/* ===================================================================== OPAP GAMES — KINO & SUPER3 Ενιαίο, μοντέρνο dark theme για ολόκληρο το site. Γραμμένο από το μηδέν — καλύπτει κάθε στοιχείο που παράγει το plugin. ===================================================================== */ /* --------------------------------------------------------------------- 1. DESIGN TOKENS --------------------------------------------------------------------- */ :root { /* Φόντα */ --bg-page: #060b26; --bg-panel: #0c142f; --bg-panel-2: #111b3e; --bg-ball-idle-1: #2a4070; --bg-ball-idle-2: #162248; /* Brand χρώματα */ --amber: #ffb502; --amber-light: #ffd34d; --amber-dark: #c98e00; --green: #22c55e; --green-dark: #15803d; --red: #e02d22; --red-dark: #a00805; --indigo: #2e3a6e; --indigo-dark: #1f2750; /* Κείμενο */ --text: #dfe7ff; --text-dim: #8fa3c8; --text-on-amber: #1a1404; --text-ball-idle: #7aa0cc; /* Περιγράμματα / σκιές */ --line: rgba(130, 150, 255, 0.16); --line-strong: rgba(255, 181, 2, 0.55); --shadow-panel: 0 10px 35px rgba(2, 6, 25, 0.55); --glow-amber: 0 0 12px rgba(255, 181, 2, 0.55), 0 0 28px rgba(255, 181, 2, 0.25); --glow-green: 0 0 12px rgba(34, 197, 94, 0.6), 0 0 28px rgba(34, 197, 94, 0.3); --glow-red: 0 0 12px rgba(224, 45, 34, 0.6), 0 0 28px rgba(224, 45, 34, 0.3); --radius: 18px; --radius-sm: 12px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* --------------------------------------------------------------------- 1b. LIGHT THEME OVERRIDES Ενεργοποιείται με data-theme="light" στο --------------------------------------------------------------------- */ [data-theme="light"] { --bg-page: #f0f3fb; --bg-panel: #ffffff; --bg-panel-2: #eaeff9; --bg-ball-idle-1: #c8d3ee; --bg-ball-idle-2: #dce4f5; --indigo: #3a4a8e; --indigo-dark: #2a3678; --text: #1a2340; --text-dim: #4a5e80; --text-ball-idle: #6a7e9a; --line: rgba(30, 50, 120, 0.13); --line-strong: rgba(200, 140, 0, 0.65); --shadow-panel: 0 4px 20px rgba(20, 40, 100, 0.09); } [data-theme="light"] body { background: radial-gradient(1100px 500px at 50% -10%, rgba(180, 200, 255, 0.35), transparent 70%), var(--bg-page); } /* Buttons στο light theme — λευκό κείμενο στο σκούρο indigo background */ [data-theme="light"] #clear_numbers, [data-theme="light"] #random_numbers, [data-theme="light"] #kino-fullscreen-btn, [data-theme="light"] #select-kino-stats-nums-button, [data-theme="light"] #kino_form input[type="submit"], [data-theme="light"] .kino-protasis-kino-numbers-stats-form-submit, [data-theme="light"] .draw-select-btn, [data-theme="light"] #showAllButton, [data-theme="light"] #showAllSuper3Button, [data-theme="light"] #kino-toggle-btn, [data-theme="light"] #kino-bonus-toggle-btn, [data-theme="light"] #odd-even-coloumns-toggle-btn, [data-theme="light"] #kino-protasis-toggle-btn, [data-theme="light"] .epitixies-kerdon-kino-toggle-wins-btn, [data-theme="light"] .epitixies-kerdon-kino-toggle-wins-btn-close, [data-theme="light"] .kino-anchor-btn, [data-theme="light"] .donate-inline-button { color: #ffffff; box-shadow: 0 4px 14px rgba(30, 50, 120, 0.25); } /* Toggle κουμπί θέματος */ #theme-toggle-btn { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line-strong); background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: var(--amber); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: all 0.25s ease; } #theme-toggle-btn:hover { transform: scale(1.1); box-shadow: var(--glow-amber); } #theme-toggle-btn svg { display: block; width: 22px; height: 22px; flex-shrink: 0; pointer-events: none; } /* --------------------------------------------------------------------- 2. GLOBAL SKIN (ολόκληρο το site) --------------------------------------------------------------------- */ body { background: radial-gradient(1100px 500px at 50% -10%, rgba(46, 58, 110, 0.45), transparent 70%), var(--bg-page); color: var(--text); font-family: var(--font); } ::selection { background: var(--amber); color: var(--text-on-amber); } h1, h2, h3, h4, h5, h6 { color: var(--text); } /* --------------------------------------------------------------------- 3. ΚΟΙΝΑ COMPONENTS --------------------------------------------------------------------- */ /* --- Κουμπιά (όλα τα action buttons του plugin) --- */ #clear_numbers, #random_numbers, #kino-fullscreen-btn, #select-kino-stats-nums-button, #kino_form input[type="submit"], .kino-protasis-kino-numbers-stats-form-submit, .draw-select-btn, #showAllButton, #showAllSuper3Button, #kino-toggle-btn, #kino-bonus-toggle-btn, #odd-even-coloumns-toggle-btn, #kino-protasis-toggle-btn, .epitixies-kerdon-kino-toggle-wins-btn, .epitixies-kerdon-kino-toggle-wins-btn-close, .kino-anchor-btn, .donate-inline-button { display: inline-block; background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 10px 22px; font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.2px; text-decoration: none; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(2, 6, 25, 0.4); } #clear_numbers:hover, #random_numbers:hover, #kino-fullscreen-btn:hover, #select-kino-stats-nums-button:hover, #kino_form input[type="submit"]:hover, .kino-protasis-kino-numbers-stats-form-submit:hover, .draw-select-btn:hover, #showAllButton:hover, #showAllSuper3Button:hover, #kino-toggle-btn:hover, #kino-bonus-toggle-btn:hover, #odd-even-coloumns-toggle-btn:hover, #kino-protasis-toggle-btn:hover, .epitixies-kerdon-kino-toggle-wins-btn:hover, .epitixies-kerdon-kino-toggle-wins-btn-close:hover, .kino-anchor-btn:hover, .donate-inline-button:hover { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); box-shadow: var(--glow-amber); transform: translateY(-1px); } /* Toggle κουμπιά ενοτήτων — block, κεντραρισμένα */ #kino-toggle-btn, #kino-bonus-toggle-btn, #odd-even-coloumns-toggle-btn, #kino-protasis-toggle-btn, .epitixies-kerdon-kino-toggle-wins-btn, .epitixies-kerdon-kino-toggle-wins-btn-close { display: block; margin: 0 auto 20px auto; } .epitixies-kerdon-kino-toggle-wins-btn-close { margin-top: 18px; } /* --- Επικεφαλίδες-ταμπέλες (pill headers) --- */ .kino-category-selector-title, #numbers_header, .kino-table-kino-numbers-stats-heading { display: flex; justify-content: center; text-align: center; } .kino-category-selector-title h4, #numbers_header h4, .kino-table-kino-numbers-stats-heading h4, .kino-live-draw-time { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 8px 22px; background: linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-bottom: 2px solid var(--amber); border-radius: 12px 12px 0 0; color: var(--text); font-size: 16px; font-weight: 700; letter-spacing: 0.3px; } /* --- Panels --- */ .kino-table, .live-klirosi-kino-container, #kino_category_selector, #kino_numbers_grid, .kino-protasis-checkbox-container, .kino-winning-stats-list-box, .kino-columns-container-box, .kino-numbers-stats-number-grid-for-protinomenoi-sindiasmoi-box, .container-pinakas-apodoseon-kino, #super3-apodosis-table, #super3-apodosis-description, .epitixies-kerdon-kino-wins-content { background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 16px; } /* --- Μπάλες αριθμών (κοινή βάση) --- */ .kino-number, .live-klirosi-kino-numbers, .kino-table-kino-numbers-stats-number-box, .kino-numbers-stats-number-box, .kino-category-label span, .kino-number-label span, .kino-protasis-checkbox-label span, .column-number { width: 55px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--text-ball-idle); background: radial-gradient(ellipse at 32% 28%, var(--bg-ball-idle-1) 0%, var(--bg-ball-idle-2) 80%); border-radius: 50%; margin: 5px 0; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.06); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } /* Κίτρινη μπάλα (κληρωμένος αριθμός / επιλογή / στατιστικά) */ .kino-number.highlight, .kino-table-kino-numbers-stats-yellow-box, .kino-numbers-stats-yellow-box, .kino-category-label span:hover, .kino-category-label input:checked + span, .kino-number-label span:hover, .kino-number-label input:checked + span, .kino-protasis-checkbox-label span:hover, .kino-protasis-checkbox-label input:checked + span, .column-number { background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); color: var(--text-on-amber); box-shadow: inset 0 -3px 6px rgba(120, 70, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4); } /* Κίτρινη μπάλα (νικητής live κλήρωσης) */ .live-klirosi-kino-number-winner, .live-klirosi-kino-animate-winner { background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); color: var(--text-on-amber); box-shadow: inset 0 -3px 6px rgba(120, 70, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.5), var(--glow-amber); } .live-klirosi-kino-animate-winner { animation: fadeScale 0.8s ease-out forwards; } /* Μπάλα που "αναβοσβήνει" κατά τη διάρκεια της κλήρωσης */ .live-klirosi-kino-blunk-number { background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); color: transparent; box-shadow: var(--glow-amber); } /* Κόκκινη μπάλα (KINO Bonus) */ .kino-number.bonus, .live-klirosi-kino-number-bonus, .kino-table-kino-numbers-stats-red-box, .kino-numbers-stats-red-box { background: radial-gradient(ellipse at 32% 28%, #ffb3ad 0%, #f0584e 35%, var(--red) 65%, var(--red-dark) 100%); color: #ffffff; box-shadow: inset 0 -3px 6px rgba(90, 5, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.4), var(--glow-red); } .live-klirosi-kino-animate-bonus { animation: pulseGlow 0.85s infinite alternate; border-radius: 50%; font-weight: 700; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); } /* Μη-bonus αριθμοί κατά την αποκάλυψη του bonus */ .live-klirosi-kino-number-no-bonus { position: relative; background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); color: var(--text-on-amber); animation: fadeInOutChange 1.8s cubic-bezier(0.42, 0, 0.58, 1) forwards, tremble 0.5s ease-in-out 1s forwards; } .live-klirosi-kino-number-no-bonus::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--red); border-radius: 50%; opacity: 0; pointer-events: none; animation: borderRotate 1.8s cubic-bezier(0.42, 0, 0.58, 1) forwards; } /* Zoom του bonus στο κέντρο της οθόνης */ .live-klirosi-kino-bonus-zoom { position: relative; border-radius: 50%; color: #fff; font-weight: 700; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); animation: bonusExpandShrinkToCenter 6s ease-in-out forwards, bonusGlow 1.5s linear infinite; transition: transform 0.5s ease-in-out; } .live-klirosi-kino-bonus-zoom.remove-glow { animation: none; box-shadow: 0 0 0 transparent; transition: box-shadow 0.5s ease-in-out; } /* --- Spinner φόρτωσης --- */ .kino-spinner { width: 50px; height: 50px; display: block; margin: 0 auto 10px auto; animation: spinner-rotate 1s linear infinite; } .kino-spinner .spinner-line rect { fill: var(--amber); transform-origin: center bottom; animation: spinner-fade 1.2s linear infinite; opacity: 0.2; } .kino-spinner .spinner-line:nth-child(1) rect { animation-delay: 0s; } .kino-spinner .spinner-line:nth-child(2) rect { animation-delay: 0.1s; } .kino-spinner .spinner-line:nth-child(3) rect { animation-delay: 0.2s; } .kino-spinner .spinner-line:nth-child(4) rect { animation-delay: 0.3s; } .kino-spinner .spinner-line:nth-child(5) rect { animation-delay: 0.4s; } .kino-spinner .spinner-line:nth-child(6) rect { animation-delay: 0.5s; } .kino-spinner .spinner-line:nth-child(7) rect { animation-delay: 0.6s; } .kino-spinner .spinner-line:nth-child(8) rect { animation-delay: 0.7s; } .kino-spinner .spinner-line:nth-child(9) rect { animation-delay: 0.8s; } .kino-spinner .spinner-line:nth-child(10) rect { animation-delay: 0.9s; } .kino-spinner .spinner-line:nth-child(11) rect { animation-delay: 1s; } .kino-spinner .spinner-line:nth-child(12) rect { animation-delay: 1.1s; } .kino-loading-text { display: block; margin-top: 6px; font-weight: 700; color: var(--text-dim); font-size: 15px; line-height: 1.3; } #kino-loading-message, #kino-loading-message-for-your-nums-analysis { text-align: center; width: 100%; box-sizing: border-box; } /* --- Donate --- */ .donate-box { margin-top: 24px; padding: 18px; background: var(--bg-panel-2); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-dim); } .donate-box p { margin: 0 0 12px 0; } /* --- Μπάλες μέσα σε κείμενο στατιστικών --- */ .kino-ball-in-stats { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 32px; height: 32px; background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber) 60%, var(--amber-dark) 100%); border-radius: 50%; font-weight: 700; margin: 2px 4px 2px 0; color: var(--text-on-amber); } .kino-bonus-in-stats { display: inline-block; vertical-align: middle; padding: 4px 10px; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.3px; border-radius: 999px; white-space: nowrap; } .kino-analysis-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0; } .kino-analysis-fav, .kino-analysis-share { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .kino-analysis-fav:hover, .kino-analysis-share:hover { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; border-color: var(--amber); transform: translateY(-1px); } .kino-analysis-msg { width: 100%; text-align: center; color: var(--green); font-size: 13.5px; min-height: 16px; } /* «Ρεαλιστικός Απολογισμός» — κόστος/κέρδη/καθαρό/απόδοση μέσα στο modal ανάλυσης */ .kino-roi-box { margin: 22px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); box-shadow: inset 0 0 0 1px rgba(255, 181, 2, 0.06); } .kino-roi-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: var(--amber); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); } .kino-roi-head .opap-icon { width: 1.15em; height: 1.15em; } .kino-roi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--text); } .kino-roi-row + .kino-roi-row { border-top: 1px solid var(--line); } .kino-roi-label { color: var(--text-dim); } .kino-roi-label small { font-size: 11.5px; opacity: 0.8; } .kino-roi-val { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .kino-roi-net { margin-top: 2px; } .kino-roi-net .kino-roi-label { color: var(--text); font-weight: 700; } .kino-roi-net .kino-roi-val { font-size: 18px; } .kino-roi-net.is-loss .kino-roi-val { color: var(--red); } .kino-roi-net.is-profit .kino-roi-val { color: var(--green); } .kino-roi-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); } .kino-roi-note strong { color: var(--text); } /* --------------------------------------------------------------------- 4. KINO — LIVE ΚΛΗΡΩΣΗ --------------------------------------------------------------------- */ /* Χρονόμετρο + progress bar */ #kino-timer-container { text-align: center; margin: 0 auto 20px auto; width: 100%; padding: 14px 18px; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); box-sizing: border-box; } #kino-countdown { font-size: 26px; font-weight: 800; margin-bottom: 10px; color: var(--amber); letter-spacing: 1px; font-variant-numeric: tabular-nums; } #kino-progress-bar-container { width: 100%; height: 12px; background: rgba(128, 128, 128, 0.18); border-radius: 999px; overflow: hidden; position: relative; } #kino-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--amber-dark), var(--amber), var(--amber-light)); transition: width 1s linear; border-radius: 999px; box-shadow: 0 0 10px rgba(255, 181, 2, 0.5); } #kino-message-good-luck { display: none; font-size: 18px; font-weight: 700; color: var(--green); margin-top: 10px; } /* Container live αποτελεσμάτων */ #live-klirosi-kino-container { position: relative; } #live-kino-results, #live-super3-results { margin-bottom: 100px; } #live-kino-results.blur, #live-super3-results.blur { filter: blur(25px); transition: filter 0.5s ease-in-out; } /* Τεράστια αντίστροφη μέτρηση πάνω από το grid */ #live-klirosi-kino-container .countdown-top { font-size: 172px; font-weight: 800; color: var(--amber); text-shadow: 0 0 40px rgba(255, 181, 2, 0.5); text-align: center; margin-bottom: 10px; position: absolute; top: 23%; left: 0; z-index: 5; width: 100%; font-variant-numeric: tabular-nums; } /* Header live (ώρα, κλήρωση, fullscreen) */ #just-live-time-container { text-align: center; margin: 6px 0; } #just-live-time { font-size: 15px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } #header-container { display: flex; justify-content: center; margin-bottom: 0; } #kino-fullscreen-btn { margin-bottom: 6px; } /* Grid 80 αριθμών */ .live-klirosi-kino-container { display: grid; grid-template-columns: repeat(10, 1fr); row-gap: 8px; justify-items: center; border: 2px solid var(--line-strong); padding: 14px 10px; } /* Στατιστικά ΜΟΝΑ / ΙΣΟΠΑΛΙΑ / ΖΥΓΑ */ .kino-odd-even-stats { margin-top: 22px; display: flex; gap: 12px; } .kino-stat-box { flex: 1; padding: 10px 8px; text-align: center; font-weight: 700; font-size: 15px; color: var(--text); background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: 999px; transition: all 0.3s ease; } .kino-live-green-box { background: linear-gradient(135deg, var(--green), var(--green-dark)); border-color: var(--green); color: #04240f; box-shadow: var(--glow-green); } .kino-live-gray-box { background: rgba(255, 255, 255, 0.04); border-color: var(--line); color: var(--text-dim); box-shadow: none; } .kino-live-flash-green { background: linear-gradient(135deg, var(--amber-light), var(--amber)) !important; border-color: var(--amber) !important; color: var(--text-on-amber) !important; box-shadow: var(--glow-amber) !important; transition: all 0.3s ease; } /* --- Στήλες 1η-10η (σωλήνες) --- */ .kino-live-columns { margin-top: 22px; display: flex; gap: 1%; align-items: stretch; } .kino-live-column { display: flex; flex-flow: column-reverse; flex: 1; min-height: 230px; padding: 14px 4px 18px 4px; text-align: center; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 100px 100px; box-shadow: var(--shadow-panel); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .column-header { font-weight: 700; font-size: 15px; color: var(--text-dim); padding-top: 10px; } .column-content { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; flex: 1; justify-content: flex-start; } .column-number { flex: 0 0 auto; animation: dropBall 0.7s cubic-bezier(0.34, 1.3, 0.45, 1) both; } /* Νικήτρια στήλη — ΙΔΙΟ σχήμα, μόνο πράσινα χρώματα */ .kino-live-column.kino-live-green-box { background: linear-gradient(180deg, rgba(34, 197, 94, 0.22), rgba(21, 128, 61, 0.34)); border: 1px solid var(--green); border-top: 0; border-radius: 0 0 100px 100px; box-shadow: var(--glow-green), var(--shadow-panel); color: var(--text); } .kino-live-column.kino-live-green-box .column-header { color: var(--green); text-shadow: 0 0 12px rgba(34, 197, 94, 0.6); } .kino-live-column.kino-live-green-box .column-number { background: radial-gradient(ellipse at 32% 28%, #a9f3c4 0%, #45e088 35%, var(--green) 65%, var(--green-dark) 100%); color: #04240f; box-shadow: inset 0 -3px 6px rgba(0, 70, 25, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.5), var(--glow-green); } /* --------------------------------------------------------------------- 5. FULLSCREEN MODE (κλιμάκωση με vw — όλες οι αναλύσεις) --------------------------------------------------------------------- */ #full-screen-container:fullscreen { background: radial-gradient(1100px 500px at 50% -10%, rgba(46, 58, 110, 0.45), transparent 70%), var(--bg-page); padding: 2vh 6vw; overflow-y: auto; } #full-screen-container:fullscreen .kino-live-columns, #full-screen-container:fullscreen .kino-odd-even-stats { display: none; } #full-screen-container:fullscreen .live-klirosi-kino-numbers { width: clamp(40px, 7.2vw, 150px); height: clamp(26px, 4.8vw, 100px); font-size: clamp(18px, 3.4vw, 80px); } #full-screen-container:fullscreen #kino-countdown { font-size: clamp(30px, 6vw, 115px); } #full-screen-container:fullscreen .kino-live-draw-time { font-size: clamp(14px, 1.8vw, 34px); } #full-screen-container:fullscreen #just-live-time { font-size: clamp(13px, 1.7vw, 32px); } #full-screen-container:fullscreen #kino-message-good-luck { font-size: clamp(18px, 2.6vw, 52px); } #full-screen-container:fullscreen #live-klirosi-kino-container .countdown-top { font-size: clamp(90px, 21vw, 400px); top: 18%; } /* Popup-οδηγός zoom (4s) σε πλήρη οθόνη */ #kino-fs-hint { position: fixed; top: 70px; right: 210px; z-index: 2147483647; max-width: min(92vw, 400px); padding: 16px 22px; text-align: center; font-family: var(--font); color: var(--text); background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--amber); border-radius: 14px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), var(--glow-amber); animation: kinoFsHintIn 0.35s ease both; } #kino-fs-hint.kino-fs-hint-out { animation: kinoFsHintOut 0.42s ease both; } @keyframes kinoFsHintIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes kinoFsHintOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-14px); } } .kino-fs-hint-title { font-weight: 800; font-size: 15.5px; color: var(--amber); margin-bottom: 12px; } .kino-fs-hint-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 7px 0; font-size: 14px; } .kino-fs-hint-row em { font-style: normal; color: var(--text-dim); } .kino-fs-hint-row span { color: var(--text-dim); font-weight: 700; } #kino-fs-hint kbd { display: inline-block; min-width: 20px; padding: 3px 9px; background: var(--bg-panel); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--text); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } /* ── Σύγκριση συνδυασμών [kino_compare] ── */ .kino-compare { max-width: 760px; margin: 26px auto; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); box-shadow: 0 10px 30px rgba(3, 6, 20, 0.35); } .kino-compare-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; background: linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kino-compare-title .opap-icon { width: 1.05em; height: 1.05em; color: var(--amber); } .kino-compare-sub { margin: 6px 0 16px; font-size: 13px; color: var(--text-dim); } .kino-compare-sub strong { color: var(--text); } .kino-compare-inputs { display: flex; flex-direction: column; gap: 10px; } .kino-compare-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kino-compare-badge-letter { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; color: var(--text-on-amber); background: linear-gradient(135deg, var(--amber-light), var(--amber)); } .kino-compare-nums { flex: 1 1 240px; min-width: 180px; background: var(--bg-panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: var(--font); font-size: 14px; } .kino-compare-nums:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,181,2,0.18); } .kino-compare-fav { flex: 0 1 200px; background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font-family: var(--font); font-size: 13px; } .kino-compare-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .kino-compare-depth-label { color: var(--text-dim); font-size: 13.5px; font-weight: 600; } .kino-compare-depth { background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .kino-compare-depth:hover { border-color: var(--amber); color: var(--amber); } .kino-compare-depth.active { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } .kino-compare-go { margin-left: 8px; background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border: none; border-radius: 999px; padding: 10px 26px; font-family: var(--font); font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.18s ease; } .kino-compare-go:hover { box-shadow: var(--glow-amber); transform: translateY(-1px); } .kino-compare-results { margin-top: 18px; } .kino-compare-head { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 12px; } .kino-compare-head strong { color: var(--text); } .kino-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .kino-compare-card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 16px 14px; background: var(--bg-panel); } .kino-compare-card.is-best { border-color: var(--amber); box-shadow: var(--glow-amber); } .kino-compare-best-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: 999px; white-space: nowrap; } .kino-compare-card-head { text-align: center; font-weight: 800; font-size: 15px; color: var(--text); margin-bottom: 10px; } .kino-compare-card-head small { color: var(--text-dim); font-weight: 600; } .kino-compare-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 12px; } .kino-compare-ball { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: var(--text-on-amber); background: radial-gradient(circle at 35% 30%, var(--amber-light), var(--amber)); } .kino-compare-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 13.5px; color: var(--text-dim); border-top: 1px solid var(--line); } .kino-compare-stat:first-of-type { border-top: none; } .kino-compare-stat strong { color: var(--text); font-variant-numeric: tabular-nums; } .kino-compare-stat strong.is-loss { color: var(--red); } .kino-compare-stat strong.is-profit { color: var(--green); } .kino-compare-best { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--text-dim); text-align: center; } .kino-compare-best strong { color: var(--amber); } .kino-compare-empty, .kino-compare-loading { text-align: center; color: var(--text-dim); font-size: 14px; } /* ── Προφίλ αριθμού [kino_number_profile] ── */ .knp { max-width: 720px; margin: 26px auto; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); box-shadow: 0 10px 30px rgba(3, 6, 20, 0.35); container-type: inline-size; /* ώστε να προσαρμόζεται στο πλάτος του (π.χ. sidebar), όχι του παραθύρου */ } .knp-title { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; background: linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .knp-title .opap-icon { width: 1.05em; height: 1.05em; color: var(--amber); } .knp-sub { margin: 6px 0 16px; font-size: 13px; color: var(--text-dim); } .knp-sub strong { color: var(--text); } .knp-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; justify-items: center; } .knp-num { width: 100%; max-width: 44px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: var(--text); border: 1px solid var(--line); border-radius: 50%; font-family: var(--font); font-size: clamp(11px, 3.4cqi, 14.5px); font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .knp-num:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-1px); } .knp-num.active { background: radial-gradient(circle at 35% 30%, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255, 181, 2, 0.45), 0 2px 10px rgba(255, 181, 2, 0.35); position: relative; z-index: 1; } .knp-result { margin-top: 18px; } .knp-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--bg-panel); } .knp-card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .knp-big-ball { width: 56px; height: 56px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; font-weight: 800; color: var(--text-on-amber); background: radial-gradient(circle at 35% 30%, var(--amber-light), var(--amber)); box-shadow: var(--glow-amber); } .knp-badge { font-size: 14px; font-weight: 800; padding: 7px 14px; border-radius: 999px; } .knp-badge small { font-weight: 600; opacity: 0.85; } .knp-badge.is-hot { background: linear-gradient(135deg, #f0584e, var(--red)); color: #fff; } .knp-badge.is-cold { background: linear-gradient(135deg, #4aa3ff, #2b6fd6); color: #fff; } .knp-badge.is-normal { background: var(--bg-panel-2); color: var(--text-dim); border: 1px solid var(--line); } .knp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; } .knp-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text-dim); } .knp-stat strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .knp-stat strong small { color: var(--text-dim); font-weight: 600; } .knp-timeline-title { margin: 16px 0 8px; font-weight: 800; font-size: 14px; color: var(--amber); } .knp-timeline { display: flex; flex-direction: column; gap: 4px; } .knp-tl-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--bg-panel-2); border-radius: 8px; font-size: 13px; } .knp-tl-date { color: var(--text); font-weight: 600; } .knp-tl-ago { color: var(--text-dim); } .knp-loading { text-align: center; color: var(--text-dim); font-size: 14px; } /* Προσαρμογή στο πλάτος του ΙΔΙΟΥ του widget (container queries) — δουλεύει και σε sidebar. Σε στενό container: 8 στήλες × 10 γραμμές (οι μπάλες απλώς μικραίνουν, δεν αλλάζουμε σε 6/5). */ @container (max-width: 560px) { .knp-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; } .knp-stat strong { white-space: nowrap; } } @container (max-width: 470px) { .knp-stats { grid-template-columns: 1fr; gap: 0; } .knp-stat { padding: 9px 0; font-size: 13px; } .knp-card-head { gap: 10px; } .knp-big-ball { width: 48px; height: 48px; font-size: 21px; } .knp-badge { font-size: 13px; padding: 6px 12px; } .knp-tl-row { font-size: 12px; padding: 6px 9px; } } @container (max-width: 330px) { .knp { padding: 14px 10px; } .knp-grid { gap: 3px; } .knp-card { padding: 14px; } } /* ── Προσομοίωση (Monte Carlo) — καρτέλα Έξυπνου Οδηγού ── */ .kg-sim-run { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px auto 16px; } .kg-sim-summary { text-align: center; color: var(--text-dim); font-size: 13.5px; margin-bottom: 14px; } .kg-sim-summary strong { color: var(--text); } .kg-sim-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; } .kg-sim-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; text-align: center; background: var(--bg-panel); } .kg-sim-card.kg-sim-bad { border-color: rgba(224, 45, 34, 0.5); } .kg-sim-v { font-size: 21px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .kg-sim-bad .kg-sim-v { color: var(--red); } .kg-sim-l { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; } .kg-sim-hist { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 0 4px; } .kg-sim-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; } .kg-sim-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; } .kg-sim-bar.is-loss { background: linear-gradient(180deg, #f0584e, var(--red-dark)); } .kg-sim-bar.is-profit { background: linear-gradient(180deg, var(--green), var(--green-dark)); } .kg-sim-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-dim); } .kg-sim-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); display: flex; gap: 6px; align-items: flex-start; } .kg-sim-note strong { color: var(--text); } .kg-sim-note .opap-icon { color: var(--amber); flex: 0 0 auto; margin-top: 2px; width: 1.1em; height: 1.1em; } /* --------------------------------------------------------------------- 6. KINO — ΙΣΤΟΡΙΚΟ ΚΛΗΡΩΣΕΩΝ (kino_draws) --------------------------------------------------------------------- */ .kino-draw { margin-bottom: 50px; } #kinoDraws hr, #super3Draws hr { border: none; border-top: 1px solid var(--line); margin: 26px 0; } .kino-info { display: flex; justify-content: space-between; align-items: center; margin: 0 auto 12px auto; max-width: 800px; gap: 25px; font-weight: 700; } .kino-left, .kino-right { display: flex; flex-direction: column; align-items: center; color: var(--text-dim); } .kino-time { color: var(--text); } .kino-center img { width: 100px; height: auto; } .kino-table { display: grid; grid-template-columns: repeat(10, 1fr); row-gap: 8px; justify-items: center; border: 2px solid var(--line-strong); padding: 14px 10px; } /* Κουτιά ΜΟΝΑ/ΙΣΟΠΑΛΙΑ/ΖΥΓΑ + Τυχερή στήλη στο ιστορικό */ .kino-draw-kino-counts { display: flex; justify-content: space-around; gap: 10px; margin-top: 14px; } .kino-draw-kino-counts .kino-draw-count-box { width: 30%; } .winning-col-wrapper { margin-top: 10px; } .winning-col-wrapper .kino-draw-count-box { width: 100%; box-sizing: border-box; } .kino-draw-count-box { padding: 9px 10px; text-align: center; font-weight: 700; border-radius: 999px; border: 1px solid var(--line); } .kino-draw-winner { background: linear-gradient(135deg, var(--green), var(--green-dark)); border-color: var(--green); color: #04240f; box-shadow: var(--glow-green); } .kino-draw-loser { background: rgba(255, 255, 255, 0.04); color: var(--text-dim); } /* Tabs κερδών */ .epitixies-kerdon-kino .wins-details { margin-top: 16px; text-align: center; } .epitixies-kerdon-kino .toggle-arrow { margin-left: 6px; } .epitixies-kerdon-kino .total-column { text-align: center; color: var(--text); margin-bottom: 15px; border-bottom: 2px solid var(--amber); padding-bottom: 10px; } .epitixies-kerdon-kino .tabs { margin-top: 10px; } .epitixies-kerdon-kino .tab-nav { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-evenly; gap: 4px; border-bottom: 1px solid var(--line); } .epitixies-kerdon-kino .tab-nav li { flex: 1; display: flex; align-items: center; justify-content: center; padding: 9px 10px; cursor: pointer; color: var(--text-dim); background: var(--bg-panel); border: 1px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; font-weight: 600; transition: all 0.2s ease; } .epitixies-kerdon-kino .tab-nav li:hover { color: var(--text); background: var(--bg-panel-2); } .epitixies-kerdon-kino .tab-nav li.active { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } .epitixies-kerdon-kino .tab-pane { display: none; padding: 10px 0; } .epitixies-kerdon-kino .tab-pane.active { display: block; } .epitixies-kerdon-kino-wins-content { margin-top: 10px; } .epitixies-kerdon-kino-wins-content table { width: 100%; border-collapse: collapse; } .epitixies-kerdon-kino-wins-content th, .epitixies-kerdon-kino-wins-content td { border: 1px solid var(--line); padding: 9px; color: var(--text); } .epitixies-kerdon-kino-wins-content th { background: var(--indigo-dark); color: var(--amber); font-weight: 700; text-align: center; } .epitixies-kerdon-kino-wins-content tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } .epitixies-kerdon-kino-wins-content td img { width: 68px; height: 32px; object-fit: contain; display: block; margin: auto; } /* --------------------------------------------------------------------- 7. KINO — ΠΙΝΑΚΑΣ ΑΠΟΔΟΣΕΩΝ --------------------------------------------------------------------- */ .container-pinakas-apodoseon-kino { max-width: 100%; margin-top: 50px; } .kino-header-pinakas-apodoseon-kino { text-align: center; color: var(--text); margin-bottom: 15px; border-bottom: 2px solid var(--amber); padding-bottom: 10px; } .kino-table-pinakas-apodoseon-kino { width: 100%; border-collapse: collapse; margin-bottom: 18px; } .kino-table-pinakas-apodoseon-kino th, .kino-table-pinakas-apodoseon-kino td { border: 1px solid var(--line); padding: 10px; font-size: 15px; color: var(--text); } .kino-table-pinakas-apodoseon-kino th { background: var(--indigo-dark); color: var(--amber); font-weight: 700; text-align: center; } .kino-table-pinakas-apodoseon-kino tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } .kino-table-pinakas-apodoseon-kino th img { background: #fff; border-radius: 8px; padding: 4px 8px; max-width: 110px; height: auto; } /* --------------------------------------------------------------------- 8. KINO — ΦΟΡΜΑ "ΠΟΤΕ ΝΑ ΞΑΝΑΠΑΙΞΩ" + MODAL --------------------------------------------------------------------- */ #kino_form_container { margin-bottom: 100px; } #kino_category_selector { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; justify-items: center; border: 2px solid var(--line-strong); } #kino_numbers_grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; justify-items: center; border: 2px solid var(--line-strong); } #kino_numbers_grid > :nth-last-child(1) { grid-column: span 10; text-align: center; } /* Το BONUS μένει full-width centered ακόμη κι όταν δεν είναι το τελευταίο παιδί */ #kino_numbers_grid > .kino-bonus-label { grid-column: span 10; text-align: center; } /* «Εύρος ανάλυσης» + κουμπιά μέσα στο κουτί των αριθμών → ένα ενιαίο κουτί */ #kino_numbers_grid > .kino-scope-control { grid-column: span 10; justify-self: stretch; max-width: none; width: 100%; margin: 6px 0 0; padding: 18px 16px 16px; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; } .kino-number-label, .kino-category-label { margin: 0; cursor: pointer; } .kino-number-label input, .kino-category-label input { display: none; } .kino-bonus-label { margin: 0; cursor: pointer; } .kino-bonus-label input { display: none; } .kino-bonus-label img { filter: brightness(0.45) grayscale(0.4); transition: filter 0.3s ease, transform 0.3s ease; width: 75px; height: auto; } .kino-bonus-label input:checked + img { filter: brightness(1) grayscale(0); transform: scale(1.08); } #numbers_header_2, #select-kino-stats-nums-button-box { display: flex; align-items: center; justify-content: space-evenly; margin: 14px 0; } #kino_form input[type="submit"] { display: block; margin: 0 auto; background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } #kino_form input[type="submit"]:hover { box-shadow: var(--glow-amber); transform: translateY(-1px); } /* Εύρος ανάλυσης (scope) — επιλογή σε ποιες κληρώσεις θα γίνει ο υπολογισμός */ .kino-scope-control { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 24px; margin: 22px auto; max-width: 560px; text-align: center; background: radial-gradient(120% 80% at 50% -10%, rgba(255, 181, 2, 0.10), transparent 60%), linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); box-shadow: 0 10px 30px rgba(3, 6, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); color-scheme: dark; } [data-theme="light"] .kino-scope-control { color-scheme: light; } .kino-scope-title { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: 0.2px; background: linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kino-scope-title .opap-icon { width: 1.05em; height: 1.05em; color: var(--amber); } .kino-scope-subtitle { margin: 4px 0 16px; font-size: 12.5px; color: var(--text-dim); } /* Segmented controls (modes + range-type) */ .kino-scope-modes, .kino-scope-range-type { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(3, 6, 20, 0.35); } .kino-scope-modes label, .kino-scope-range-type label { margin: 0; cursor: pointer; } .kino-scope-modes input, .kino-scope-range-type input { display: none; } .kino-scope-modes span, .kino-scope-range-type span { display: inline-block; padding: 8px 18px; border-radius: 999px; color: var(--text-dim); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: all 0.18s ease; } .kino-scope-range-type span { padding: 6px 14px; font-size: 12.5px; } .kino-scope-modes label:hover span, .kino-scope-range-type label:hover span { color: var(--text); } .kino-scope-modes input:checked + span, .kino-scope-range-type input:checked + span { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); box-shadow: 0 3px 10px rgba(255, 181, 2, 0.35); } /* Sub-sections (reveal) */ .kino-scope-sub { display: none; margin-top: 16px; } .kino-scope-sub.is-on { display: block; animation: kinoScopeIn 0.25s ease both; } @keyframes kinoScopeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .kino-scope-range-type { margin-bottom: 4px; } .kino-scope-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 12px; } .kino-scope-field { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-dim); font-size: 14px; font-weight: 600; } /* Ρητό χρώμα στα labels (αλλιώς το γενικό label{} του Astra τα κάνει σκούρα/δυσανάγνωστα) */ .kino-scope-field label, .kino-scope-field span { color: var(--text-dim); } .kino-scope-control input[type="number"], .kino-scope-control input[type="date"] { background: var(--bg-panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: var(--font); font-size: 14px; font-weight: 600; width: auto; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .kino-scope-control input[type="number"]:focus, .kino-scope-control input[type="date"]:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 181, 2, 0.18); } #kino_last_n { width: 84px; text-align: center; } #kino_from_draw, #kino_to_draw { width: 150px; } .kino-scope-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; } .kino-scope-presets button { background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; } .kino-scope-presets button:hover { border-color: var(--amber); color: var(--amber); background: rgba(255, 181, 2, 0.08); transform: translateY(-1px); } /* Ενέργειες (Καθαρισμός / Τυχαία / Έλεγχος) μέσα στην κάρτα */ .kino-scope-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; } .kino-scope-helpers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .kino-scope-helpers #clear_numbers, .kino-scope-helpers #random_numbers { padding: 8px 18px; font-size: 14px; } .kino-scope-actions input[type="submit"] { min-width: 200px; padding: 12px 30px; font-size: 16px; } /* Modal αποτελεσμάτων */ .kino-modal { display: none; position: fixed; z-index: 99999; inset: 0; overflow: auto; background: rgba(3, 6, 20, 0.82); backdrop-filter: blur(4px); } .kino-modal-content { background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); color: var(--text); margin: 4vh auto; padding: 26px; width: 92vw; max-width: 1100px; box-sizing: border-box; position: relative; border-radius: var(--radius); box-shadow: var(--shadow-panel); } .kino-modal-close { position: absolute; top: 10px; right: 16px; color: var(--text-dim); font-size: 30px; font-weight: 700; cursor: pointer; transition: color 0.2s ease; } .kino-modal-close:hover, .kino-modal-close:focus { color: var(--amber); } #kino_modal_body h3, #kino_modal_body h4 { color: var(--text); } #kino_modal_body table { width: 100%; border-collapse: collapse; margin: 14px 0; } #kino_modal_body th, #kino_modal_body td { border: 1px solid var(--line); padding: 8px; color: var(--text); } #kino_modal_body th { background: var(--indigo-dark); color: var(--amber); } #kino_modal_body ul { color: var(--text); } /* --------------------------------------------------------------------- 9. KINO — ΣΤΑΤΙΣΤΙΚΑ --------------------------------------------------------------------- */ /* Φόρμα επιλογής πλήθους κληρώσεων */ #draws-selection-form { text-align: center; } #draws-selection-form > label { display: block; margin-bottom: 12px; color: var(--text-dim); font-weight: 600; } #draws-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; } .draw-select-btn { padding: 8px 16px; font-size: 14px; } #draws_count { display: block; margin: 0 auto; width: 140px; padding: 10px 12px; text-align: center; font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--text); background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #draws_count:focus { border-color: var(--amber); box-shadow: var(--glow-amber); } .kino-numbers-stats-box { margin-top: 100px; } .kino-emfaniseis-box, .kino-kathisterisis-box, .kino-epanalipseis-box, .kino-emfaniseis-kino-bonus-box, .kino-kathisteriseis-kino-bonus-box { margin-bottom: 75px; } .kino-emfaniseis-table, .kino-kathisterisis-table, .kino-epanalipseis-table, .kino-emfaniseis-kino-bonus-table, .kino-kathisteriseis-kino-bonus-table { margin-bottom: 25px; } /* Πλέγματα στατιστικών */ .kino-table-kino-numbers-stats-number-grid, .kino-numbers-stats-number-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-bottom: 0.5rem; justify-items: center; padding: 14px 10px; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-panel); } .kino-table-kino-numbers-stats-number-cell, .kino-numbers-stats-number-cell { position: relative; text-align: center; } .kino-numbers-stats-number-cell.kino-numbers-stats-main-number, .kino-numbers-stats-number-cell.kino-numbers-stats-bonus-number { display: flex; justify-content: center; } /* Badge με την τιμή του στατιστικού πάνω από τη μπάλα */ .kino-table-kino-numbers-stats-stat-value, .kino-numbers-stats-stat-value { position: absolute; top: -6px; right: -12px; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: #fff; color: #0a1430; font-weight: 800; font-size: 11px; border-radius: 8px 8px 8px 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } /* Μόνα/Ζυγά/Ισοπαλίες — λίστα με εικονίδια */ .kino-winning-odd-draw-even-stats-box { margin-bottom: 25px; } .kino-winning-stats-list { display: flex; justify-content: space-evenly; list-style: none; padding: 0; margin: 0.75rem 0 0 0; width: 100%; box-sizing: border-box; } .kino-winning-stats-list li { text-align: center; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); } .kino-winning-stats-list li img { display: block; max-width: 85px; height: auto; } .parity-inline-container { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; font-size: 18px; } .parity-delay { color: var(--red); } /* Ραβδόγραμμα στηλών */ .kino-columns-container { display: flex; align-items: flex-end; justify-content: space-around; margin: 20px 0 6px 0; width: 100%; box-sizing: border-box; } .kino-column-bar { text-align: center; } .kino-bar { width: 30px; margin: 4px auto; background: rgba(255, 255, 255, 0.06); border-radius: 6px 6px 0 0; overflow: hidden; position: relative; display: flex; flex-direction: column; } .kino-bar-appearances { background: linear-gradient(180deg, var(--amber-light), var(--amber-dark)); width: 100%; } .kino-bar-delay { background: linear-gradient(180deg, #f0584e, var(--red-dark)); width: 100%; } .kino-column-value { font-size: 0.85em; line-height: 1.25; color: var(--text-dim); font-weight: 700; font-variant-numeric: tabular-nums; } .kino-column-label { margin-top: 6px; font-weight: 800; color: var(--amber); } /* Προτεινόμενοι συνδυασμοί */ #kino-protasis-kino-suggestions { margin-top: 25px; } .kino-protasis-checkbox-container { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; justify-items: center; border: 2px solid var(--line-strong); margin-bottom: 25px; } .kino-protasis-checkbox-label { margin: 0; cursor: pointer; } .kino-protasis-checkbox-label input { display: none; } .kino-protasis-kino-numbers-stats-form { text-align: center; } .kino-protasis-kino-numbers-stats-form-submit { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } .kino-numbers-stats-number-grid-for-protinomenoi-sindiasmoi-box { margin-top: 14px; } .kino-numbers-stats-number-grid-for-protinomenoi-sindiasmoi { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; justify-items: center; width: 100%; box-sizing: border-box; } .kino-numbers-stats-extra-info { font-size: 14px; text-align: center; margin-top: 15px; padding: 12px; border-top: 1px dashed var(--line-strong); font-style: italic; color: var(--text-dim); } /* --------------------------------------------------------------------- 10. KINO — ANCHORS & ΛΙΣΤΑ ΠΑΙΧΝΙΔΙΩΝ --------------------------------------------------------------------- */ .kino-anchors-container { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; margin: 20px auto; flex-wrap: wrap; } .paixnidia-allwyn-container { width: 100%; overflow-x: auto; white-space: nowrap; box-sizing: border-box; padding: 10px 0; } .paixnidia-allwyn-inner { display: flex; justify-content: space-evenly; align-items: center; } .paixnidia-allwyn-container img { max-width: 75px; height: auto; transition: transform 0.25s ease, filter 0.25s ease; } .paixnidia-allwyn-container a:hover img { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(255, 181, 2, 0.55)); } /* --------------------------------------------------------------------- 11. SUPER3 --------------------------------------------------------------------- */ /* Χρονόμετρο */ #super3-timer-container { text-align: center; margin: 0 auto 20px auto; width: 100%; padding: 14px 18px; background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); box-sizing: border-box; } #super3-countdown { font-size: 26px; font-weight: 800; margin-bottom: 10px; color: var(--red); letter-spacing: 1px; font-variant-numeric: tabular-nums; } #super3-progress-bar-container { width: 100%; height: 12px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; overflow: hidden; position: relative; } #super3-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--red-dark), var(--red), #ff7a72); transition: width 1s linear; border-radius: 999px; box-shadow: 0 0 10px rgba(224, 45, 34, 0.5); } #super3-message-good-luck { display: none; font-size: 18px; font-weight: 700; color: var(--green); margin-top: 10px; } /* Live αποτελέσματα */ #live-klirosi-super3-container { position: relative; } #live-klirosi-super3-container .countdown-top { font-size: 172px; font-weight: 800; color: var(--red); text-shadow: 0 0 40px rgba(224, 45, 34, 0.5); text-align: center; margin-bottom: 10px; position: absolute; top: -43%; left: 0; z-index: 5; width: 100%; font-variant-numeric: tabular-nums; } .super3-info { display: flex; flex-direction: column; align-items: center; padding: 8px 22px; margin: 0 auto; width: fit-content; background: linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-bottom: 2px solid var(--red); border-radius: 12px 12px 0 0; color: var(--text); font-weight: 700; } .live-klirosi-super3-numbers-container { display: flex; justify-content: center; gap: 20px; margin: 18px 0 0 0; } .live-klirosi-super3-number { display: inline-flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800; margin: 10px; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(ellipse at 32% 28%, #ffb3ad 0%, #f0584e 35%, var(--red) 65%, var(--red-dark) 100%); color: #fff; text-align: center; box-shadow: inset 0 -4px 8px rgba(90, 5, 0, 0.5), inset 0 3px 4px rgba(255, 255, 255, 0.4), var(--glow-red); font-variant-numeric: tabular-nums; } .live-klirosi-super3-number.enlarge { animation: enlargeAnimation 0.5s forwards; } /* Ιστορικό Super3 */ .super3-container { margin-bottom: 50px; } .super3-header { display: flex; justify-content: space-between; align-items: center; margin: 0 auto 10px auto; max-width: 800px; gap: 25px; font-weight: 700; } .super3-left, .super3-right, .super3-center { display: flex; flex-direction: column; align-items: center; color: var(--text-dim); } .super3-time { color: var(--text); } .super3-center img { width: 100px; height: auto; } .super3-numbers { display: flex; justify-content: center; gap: 20px; margin: 15px 0 0 0; } .super3-numbers .number { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(ellipse at 32% 28%, #ffb3ad 0%, #f0584e 35%, var(--red) 65%, var(--red-dark) 100%); color: #fff; font-size: 26px; font-weight: 800; box-shadow: inset 0 -3px 6px rgba(90, 5, 0, 0.5), inset 0 2px 3px rgba(255, 255, 255, 0.4); } /* Αποδόσεις Super3 */ #super3-apodosis-table { max-width: 1200px; margin-top: 50px; } .super3-header-pinakas-apodoseon-super3 { text-align: center; color: var(--text); margin-bottom: 15px; border-bottom: 2px solid var(--red); padding-bottom: 10px; } .super3-table-pinakas-apodoseon-super3 { width: 100%; border-collapse: collapse; margin-bottom: 18px; } .super3-table-pinakas-apodoseon-super3 th, .super3-table-pinakas-apodoseon-super3 td { border: 1px solid var(--line); padding: 10px; text-align: center; color: var(--text); } .super3-table-pinakas-apodoseon-super3 th { background: var(--indigo-dark); color: var(--amber); font-weight: 700; } .super3-table-pinakas-apodoseon-super3 tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } .super3-note { font-size: 14px; color: var(--text-dim); margin-top: 10px; text-align: left; font-style: italic; } #super3-apodosis-description { max-width: 1200px; margin-top: 26px; } #super3-apodosis-description p { font-size: 15px; line-height: 1.65; margin: 0; color: var(--text-dim); } /* --------------------------------------------------------------------- 12. ANIMATIONS --------------------------------------------------------------------- */ @keyframes dropBall { 0% { transform: translateY(-240px); opacity: 0; } 65% { transform: translateY(8px); opacity: 1; } 82% { transform: translateY(-5px); } 100% { transform: translateY(0); opacity: 1; } } @keyframes fadeScale { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } } @keyframes pulseGlow { 0% { transform: scale(1); box-shadow: 0 0 10px rgba(224, 45, 34, 0.5); } 50% { transform: scale(1.3); box-shadow: 0 0 22px rgba(224, 45, 34, 1); } 100% { transform: scale(1); box-shadow: 0 0 10px rgba(224, 45, 34, 0.5); } } @keyframes bonusGlow { 0%, 100% { box-shadow: 0 0 20px rgba(224, 45, 34, 0.6), 0 0 40px rgba(224, 45, 34, 0.3); } 50% { box-shadow: 0 0 32px rgba(224, 45, 34, 0.9), 0 0 60px rgba(224, 45, 34, 0.5); } } @keyframes bonusExpandShrinkToCenter { 0% { transform: translate(0, 0) scale(1); z-index: 10; } 40% { transform: var(--center-transform) scale(10); z-index: 999; } 70% { transform: var(--center-transform) scale(10); z-index: 999; } 100% { transform: translate(0, 0) scale(1); z-index: 10; } } @keyframes borderRotate { 0% { opacity: 0; transform: scale(0.85); box-shadow: none; } 25% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px 2px rgba(224, 45, 34, 0.7); } 50% { opacity: 1; transform: scale(1); box-shadow: 0 0 9px 3px rgba(224, 45, 34, 0.85); } 75% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px 2px rgba(224, 45, 34, 0.7); } 100% { opacity: 0; transform: scale(1); box-shadow: none; } } @keyframes fadeInOutChange { 0% { opacity: 1; transform: scale(1); } 35% { transform: scale(1.6); } 75% { transform: scale(2); } 100% { opacity: 0.55; transform: scale(1); background: radial-gradient(ellipse at 32% 28%, var(--bg-ball-idle-1) 0%, var(--bg-ball-idle-2) 80%); color: var(--amber); } } @keyframes tremble { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 75% { translate: 4px 0; } } @keyframes enlargeAnimation { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } } @keyframes spinner-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinner-fade { 0%, 39%, 100% { opacity: 0.2; } 40% { opacity: 1; } } /* --------------------------------------------------------------------- 13. RESPONSIVE --------------------------------------------------------------------- */ @media (max-width: 991px) { #kino-fullscreen-btn { display: none; } } @media (max-width: 768px) { .kino-number, .live-klirosi-kino-numbers, .kino-table-kino-numbers-stats-number-box, .kino-numbers-stats-number-box, .kino-category-label span, .kino-number-label span, .kino-protasis-checkbox-label span, .column-number { width: 35px; height: 22px; font-size: 14px; margin: 3px 0; } .kino-center img, .super3-center img { width: 75px; } .kino-live-column { min-height: 160px; border-radius: 0 0 60px 60px; } .kino-live-column.kino-live-green-box { border-radius: 0 0 60px 60px; } .column-header { font-size: 12px; } .kino-stat-box { font-size: 12.5px; padding: 8px 4px; } #live-klirosi-kino-container .countdown-top { top: 20%; font-size: 124px; } #live-klirosi-super3-container .countdown-top { top: -19%; font-size: 124px; } .kino-table-pinakas-apodoseon-kino th, .kino-table-pinakas-apodoseon-kino td { font-size: 13px; padding: 7px; } .kino-header-pinakas-apodoseon-kino { font-size: 20px; } .epitixies-kerdon-kino-wins-content th, .epitixies-kerdon-kino-wins-content td { font-size: 13px; padding: 6px; } .kino-anchors-container { gap: 8px; } .kino-anchor-btn { padding: 8px 16px; font-size: 14px; } .live-klirosi-super3-number { width: 58px; height: 58px; font-size: 32px; } .super3-numbers .number { width: 46px; height: 46px; font-size: 22px; } .kino-winning-stats-list li img { max-width: 60px; } .kino-bar { width: 22px; } } @media (max-width: 765px) { .kino-numbers-stats-number-grid, .kino-numbers-stats-number-grid-for-protinomenoi-sindiasmoi { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 480px) { .kino-number, .live-klirosi-kino-numbers, .kino-table-kino-numbers-stats-number-box, .kino-numbers-stats-number-box, .kino-category-label span, .kino-number-label span, .kino-protasis-checkbox-label span, .column-number { width: 30px; height: 20px; font-size: 12px; margin: 2px 0; } .kino-center img, .super3-center img { width: 50px; } .kino-live-column { min-height: 130px; padding: 10px 2px 12px 2px; border-radius: 0 0 44px 44px; } .kino-live-column.kino-live-green-box { border-radius: 0 0 44px 44px; } .column-header { font-size: 10.5px; } .kino-stat-box { font-size: 11px; padding: 7px 3px; } #live-klirosi-kino-container .countdown-top { top: 22%; font-size: 108px; } #live-klirosi-super3-container .countdown-top { top: -9%; font-size: 108px; } .kino-anchors-container { flex-direction: column; gap: 10px; } .kino-anchor-btn { width: 100%; text-align: center; } .kino-info, .super3-header { gap: 12px; } .live-klirosi-super3-number { width: 48px; height: 48px; font-size: 26px; margin: 6px; } .super3-numbers .number { width: 40px; height: 40px; font-size: 19px; } .kino-loading-text { font-size: 13px; } .kino-spinner { width: 40px; height: 40px; } .kino-winning-stats-list li img { max-width: 48px; } .parity-inline-container { font-size: 14px; } .kino-bar { width: 16px; } .kino-modal-content { margin: 4vh auto; padding: 16px; } } /* --------------------------------------------------------------------- 14. HOT & COLD WIDGET --------------------------------------------------------------------- */ .kino-hotcold-widget { background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 20px; margin: 20px 0; } .kino-hotcold-header { text-align: center; font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 18px; letter-spacing: 0.3px; } .kino-hotcold-grid { display: grid; /* min(220px, 100%): σε container στενότερο από 220px το grid συρρικνώνεται αντί να ξεχειλίζει (το σκέτο minmax(220px,...) δεν μικραίνει ποτέ κάτω από 220) */ grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; } .kino-hotcold-title { text-align: center; font-size: 17px; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.3px; } .kino-hotcold-title-hot { color: #ff7a3c; } .kino-hotcold-title-cold { color: #4db8ff; } .kino-hotcold-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .kino-hotcold-ball { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-weight: 700; position: relative; box-shadow: inset 0 -3px 6px rgba(0,0,0,0.35), inset 0 2px 3px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.35); } .kino-hotcold-ball.hot { background: radial-gradient(ellipse at 32% 28%, #ffd0a8 0%, #ff9a4d 38%, #ff6a1f 70%, #d84500 100%); color: #3a1600; } .kino-hotcold-ball.cold { background: radial-gradient(ellipse at 32% 28%, #d6f0ff 0%, #8fd2ff 38%, #4db8ff 70%, #1d7fc4 100%); color: #04243a; } .kino-hotcold-num { font-size: 21px; line-height: 1; } .kino-hotcold-count { font-size: 11px; line-height: 1.4; opacity: 0.85; } .kino-hotcold-pct { font-size: 9.5px; line-height: 1; opacity: 0.7; } @media (max-width: 600px) { .kino-hotcold-grid { grid-template-columns: 1fr; gap: 22px; } .kino-hotcold-ball { width: 54px; height: 54px; } .kino-hotcold-num { font-size: 18px; } } /* --------------------------------------------------------------------- 15. NOTIFICATIONS BELL (floating, πάνω από το theme toggle) --------------------------------------------------------------------- */ #kino-notify-btn { position: fixed; bottom: 80px; right: 24px; z-index: 9999; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line-strong); background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.35); transition: all 0.25s ease; } #kino-notify-btn:hover { transform: scale(1.1); box-shadow: var(--glow-amber); } #kino-notify-btn svg { display: block; width: 22px; height: 22px; fill: none !important; stroke: #ffb502 !important; pointer-events: none; } #kino-notify-btn.active { background: linear-gradient(135deg, var(--amber-light), var(--amber)); border-color: var(--amber); box-shadow: var(--glow-amber); } #kino-notify-btn.active svg { stroke: #1a1404 !important; } /* --------------------------------------------------------------------- 16. ΑΓΑΠΗΜΕΝΟΙ ΑΡΙΘΜΟΙ --------------------------------------------------------------------- */ .kino-favorites-widget { background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 22px; margin: 24px 0; } .kino-favorites-title { text-align: center; font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 6px; } .kino-favorites-hint { text-align: center; font-size: 13.5px; color: var(--text-dim); margin: 0 0 18px 0; } .kino-favorites-grid { display: grid; /* ΠΑΝΤΑ 10 στήλες — η διάταξη του ΚΙΝΟ (10 ανά σειρά, 8 σειρές). minmax(0,1fr): επιτρέπει στα tracks να μικρύνουν κάτω από το min-content ώστε να μη σπάει ποτέ η στοίχιση. */ grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(3px, 1.4cqw, 8px); max-width: 560px; margin: 0 auto; } .kino-fav-num { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; min-width: 0; border-radius: 50%; font-weight: 700; font-size: clamp(9px, 3.2cqw, 15px); cursor: pointer; color: var(--text-ball-idle); background: radial-gradient(ellipse at 32% 28%, var(--bg-ball-idle-1) 0%, var(--bg-ball-idle-2) 80%); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4); transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; user-select: none; } .kino-fav-num:hover { transform: scale(1.08); } .kino-fav-num.selected { background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); color: var(--text-on-amber); box-shadow: inset 0 -2px 4px rgba(120,70,0,0.45), 0 2px 8px rgba(0,0,0,0.4); } .kino-favorites-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .kino-favorites-result { margin-top: 18px; text-align: center; } .kino-fav-result-head { font-size: 15px; color: var(--text); margin-bottom: 12px; } .kino-fav-result-head strong { color: var(--amber); font-size: 18px; } .kino-fav-result-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .kino-fav-result-ball { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 15px; } .kino-fav-result-ball.hit { background: radial-gradient(ellipse at 32% 28%, #a9f3c4 0%, #45e088 35%, var(--green) 65%, var(--green-dark) 100%); color: #04240f; box-shadow: var(--glow-green); } .kino-fav-result-ball.miss { background: radial-gradient(ellipse at 32% 28%, var(--bg-ball-idle-1) 0%, var(--bg-ball-idle-2) 80%); color: var(--text-ball-idle); opacity: 0.7; } .kino-fav-warn { color: var(--red); font-size: 14px; } /* --- Chips συνδυασμών --- */ .kino-fav-combos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; } .kino-fav-chip { background: var(--bg-panel); border: 1px solid var(--line); color: var(--text-dim); border-radius: 999px; padding: 7px 14px; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .kino-fav-chip:hover { border-color: var(--amber); color: var(--text); } .kino-fav-chip.active { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } .kino-fav-chip-count { font-weight: 600; opacity: 0.75; } .kino-fav-chip-add { border-style: dashed; } /* --- Επιλογή βάθους ελέγχου --- */ .kino-fav-checkrow { margin-top: 20px; text-align: center; } .kino-fav-drawsrow { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; } .kino-fav-drawsrow input { width: 90px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 700; padding: 7px 10px; text-align: center; margin: 0 6px; } .kino-fav-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-bottom: 14px; } .kino-fav-check-btn { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border: 1px solid var(--amber); border-radius: 999px; padding: 11px 24px; font-family: var(--font); font-size: 14.5px; font-weight: 800; cursor: pointer; transition: all 0.25s ease; } .kino-fav-check-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-amber); } /* --- Κάρτες αποτελεσμάτων ανά συνδυασμό --- */ .kino-fav-loading { text-align: center; color: var(--text-dim); font-size: 14px; } .kino-fav-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px auto; max-width: 560px; text-align: center; } .kino-fav-card-title { font-weight: 800; font-size: 15px; color: var(--amber); margin-bottom: 8px; } .kino-fav-line { font-size: 13.5px; color: var(--text-dim); margin: 6px 0; } .kino-fav-line strong { color: var(--text); } .kino-fav-best strong { color: var(--green); } .kino-fav-dist { max-width: 320px; margin: 10px auto; } .kino-fav-dist-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); padding: 4px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .kino-fav-dist-row.zero { color: var(--text-dim); opacity: 0.6; } /* --- Inline SVG icons (αντικαθιστούν τα emoji) --- */ .opap-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; margin-right: 0.4em; flex-shrink: 0; } .opap-icon:last-child { margin-right: 0; } /* --- Γεννήτρια Συνδυασμών --- */ .kino-generator { position: relative; overflow: hidden; background: radial-gradient(680px 320px at 50% -10%, rgba(255, 181, 2, 0.15), transparent 70%), linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 32px 24px; margin: 20px 0; } .kino-gen-title { font-size: clamp(22px, 4vw, 28px); font-weight: 800; text-align: center; margin-bottom: 6px; color: var(--amber); background: linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kino-gen-title .opap-icon { -webkit-text-fill-color: var(--amber); } .kino-gen-sub { font-size: 14px; color: var(--text-dim); text-align: center; margin: 0 auto 20px; max-width: 520px; } .kino-gen { text-align: center; padding: 4px 0 8px; } .kino-gen-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 20px; } .kino-gen-mode { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); border: 1px solid var(--line); color: #fff; border-radius: 999px; padding: 11px 20px; font-family: var(--font); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .kino-gen-mode .opap-icon { opacity: 0.95; } .kino-gen-mode:hover { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; border-color: var(--amber); transform: translateY(-1px); } .kino-gen-mode.active, .kino-gen-mode.active:hover { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); box-shadow: var(--glow-amber); transform: translateY(-1px) scale(1.04); } .kino-gen-controls { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 16px; margin-bottom: 18px; font-size: 14px; color: var(--text); } .kino-gen-controls label { font-weight: 600; color: var(--text-dim); white-space: nowrap; } .kino-gen-controls select { width: auto !important; min-width: 64px; background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 800; padding: 7px 14px; margin-left: 0; cursor: pointer; text-align: center; appearance: none; -webkit-appearance: none; } .kino-gen-controls select:hover { border-color: var(--amber); } .kino-gen-go { background: linear-gradient(135deg, #ffd34d, var(--amber-light) 45%, var(--amber)); color: var(--text-on-amber); border: none; border-radius: 999px; padding: 15px 40px; font-family: var(--font); font-size: 16.5px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; box-shadow: var(--glow-amber), 0 8px 22px rgba(255, 181, 2, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .kino-gen-go:hover { background: linear-gradient(135deg, #ffd34d, var(--amber-light) 45%, var(--amber)); color: var(--text-on-amber); transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--glow-amber), 0 12px 30px rgba(255, 181, 2, 0.42); } .kino-gen-go:active { transform: translateY(0); } .kino-gen-result { margin-top: 24px; } .kino-gen-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; } .kino-gen-ball { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; font-weight: 800; font-size: 19px; color: var(--text-on-amber); background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); box-shadow: inset 0 -2px 4px rgba(120,70,0,0.45), 0 2px 8px rgba(0,0,0,0.4); animation: fadeScale 0.4s ease both; } .kino-gen-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .kino-gen-fav, .kino-gen-share { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-family: var(--font); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; } .kino-gen-fav:hover, .kino-gen-share:hover { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #fff; border-color: var(--amber); transform: translateY(-1px); } .kino-gen-msg { margin-top: 12px; font-size: 13.5px; color: var(--green); min-height: 18px; } .kino-gen-note { font-size: 12px; color: var(--text-dim); opacity: 0.8; max-width: 460px; margin: 16px auto 0; line-height: 1.5; } /* --- Αναζήτηση Κληρώσεων --- */ .kino-search-draws { background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 22px 20px; margin: 20px 0; } .kino-search-title { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 6px; } .kino-search-hint { font-size: 13.5px; color: var(--text-dim); text-align: center; margin: 0 auto 18px; max-width: 540px; } .kino-search-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 16px; } .kino-search-field { display: flex; flex-direction: column; gap: 6px; } .kino-search-field label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); } .kino-search-field input { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; padding: 9px 12px; min-width: 170px; } .kino-search-btn { display: block; margin: 0 auto; background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border: 1px solid var(--amber); border-radius: 999px; padding: 11px 28px; font-family: var(--font); font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.25s ease; } .kino-search-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-amber); } .kino-search-results { margin-top: 20px; } .ksd-loading, .ksd-empty { text-align: center; color: var(--text-dim); font-size: 14px; padding: 10px; } .ksd-count { text-align: center; font-size: 14px; color: var(--text-dim); margin-bottom: 14px; } .ksd-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 auto 10px; max-width: 620px; } .ksd-card-head { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; text-align: center; } .ksd-card-head strong { color: var(--amber); } .ksd-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .ksd-ball { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: var(--text-ball-idle); background: radial-gradient(ellipse at 32% 28%, var(--bg-ball-idle-1) 0%, var(--bg-ball-idle-2) 80%); } .ksd-ball-hit { color: var(--text-on-amber); background: radial-gradient(ellipse at 32% 28%, #ffe9a8 0%, var(--amber-light) 30%, var(--amber) 62%, var(--amber-dark) 100%); box-shadow: var(--glow-amber); } /* KINO Bonus — κόκκινη μπάλα */ .ksd-ball-bonus { color: #fff; background: radial-gradient(ellipse at 32% 28%, #ff8a80 0%, #f04438 45%, var(--red) 70%, var(--red-dark) 100%); box-shadow: var(--glow-red, 0 0 10px rgba(224,45,34,0.6)); } /* Διαχωριστικό πριν τις 2 ειδικές μπάλες */ .ksd-sep { width: 1px; align-self: stretch; margin: 0 4px; background: var(--line-strong, rgba(255,255,255,0.18)); } /* Μονά/Ζυγά/Ισοπαλία */ .ksd-ball-parity { color: #04240f; font-size: 13px; background: radial-gradient(ellipse at 32% 28%, #a9f3c4 0%, #45e088 35%, var(--green) 65%, var(--green-dark) 100%); box-shadow: var(--glow-green, 0 0 10px rgba(34,197,94,0.5)); } /* Νικήτρια στήλη (Xη) */ .ksd-ball-column { color: #fff; font-size: 11.5px; background: radial-gradient(ellipse at 32% 28%, #8aa0ff 0%, var(--indigo) 55%, var(--indigo-dark) 100%); box-shadow: 0 0 10px rgba(99,102,241,0.45); } /* Λεζάντα */ .ksd-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 14px; } .ksd-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; margin-right: 2px; } .ksd-dot-bonus { background: var(--red); } .ksd-dot-parity { background: var(--green); } .ksd-dot-column { background: var(--indigo); } /* --------------------------------------------------------------------- 17. HERO SECTION --------------------------------------------------------------------- */ .kino-hero { position: relative; overflow: hidden; border-radius: var(--radius); margin: 0 0 30px 0; padding: 56px 24px; text-align: center; background: radial-gradient(700px 300px at 50% -20%, rgba(255, 181, 2, 0.16), transparent 70%), linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); box-shadow: var(--shadow-panel); } .kino-hero-inner { max-width: 720px; margin: 0 auto; } .kino-hero-title { font-size: clamp(28px, 5vw, 46px); font-weight: 800; line-height: 1.15; margin: 0 0 16px 0; background: linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kino-hero-subtitle { font-size: clamp(15px, 2.2vw, 19px); color: var(--text-dim); margin: 0 0 28px 0; line-height: 1.5; } .kino-hero-cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .kino-hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.25s ease; border: 1px solid var(--line); } .kino-hero-btn img { width: 28px; height: 28px; object-fit: contain; } .kino-hero-btn-primary { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } .kino-hero-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-amber); } .kino-hero-btn-secondary { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: var(--text); } .kino-hero-btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(2,6,25,0.5); } [data-theme="light"] .kino-hero-btn-secondary { color: #ffffff; } .kino-hero-features { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 14px; color: var(--text-dim); font-weight: 600; } @media (max-width: 480px) { .kino-hero { padding: 40px 18px; } .kino-hero-btn { width: 100%; justify-content: center; } .kino-hero-features { gap: 12px; font-size: 13px; } } /* --------------------------------------------------------------------- 18. KINO SMART GUIDE --------------------------------------------------------------------- */ .kino-guide { background: linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 26px 22px; margin: 24px 0; } .kino-guide-header { text-align: center; max-width: 680px; margin: 0 auto 22px auto; } .kino-guide-header h3 { font-size: clamp(22px, 4vw, 26px); font-weight: 800; margin: 0 0 10px 0; color: var(--amber); background: linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .kino-guide-header h3 .opap-icon { -webkit-text-fill-color: var(--amber); } .kino-guide-header p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; margin: 0; } .kino-guide-header strong, .kino-guide-header em { color: var(--text); } .kino-guide-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .kg-tab { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #ffffff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; font-family: var(--font); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; } .kg-tab:hover { transform: translateY(-1px); } .kg-tab.active { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); box-shadow: var(--glow-amber); } .kg-controls { display: flex; justify-content: center; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .kg-control { display: flex; flex-direction: column; gap: 6px; } .kg-control > label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); } .kg-control select, .kg-control input { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600; padding: 9px 12px; min-width: 120px; } .kg-switch { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text); } .kg-switch input { width: 17px; height: 17px; accent-color: var(--amber); cursor: pointer; } .kg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; margin-bottom: 18px; } .kg-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 10px; text-align: center; } .kg-card-value { font-size: 25px; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; } .kg-card-label { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.35; } .kg-verdict { padding: 12px 16px; border-radius: var(--radius-sm); text-align: center; font-weight: 600; font-size: 14.5px; margin-bottom: 14px; } .kg-verdict.kg-good { background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.45); color: var(--green); } .kg-verdict.kg-mid { background: rgba(255, 181, 2, 0.08); border: 1px solid rgba(255, 181, 2, 0.45); color: var(--amber); } .kg-verdict.kg-bad { background: rgba(224, 45, 34, 0.08); border: 1px solid rgba(224, 45, 34, 0.45); color: var(--red); } .kg-top { text-align: center; font-size: 14px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.5; } .kg-top strong { color: var(--amber); } .kg-table-wrap { overflow-x: auto; margin-bottom: 24px; } .kg-table { width: 100%; border-collapse: collapse; } .kg-table th { background: var(--indigo-dark); color: var(--amber); padding: 9px 8px; font-size: 13px; letter-spacing: 0.2px; } .kg-table td { border: 1px solid var(--line); padding: 8px; text-align: center; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; } .kg-row-lose td { color: var(--text-dim); opacity: 0.7; } .kg-row-win td:last-child { color: var(--green); font-weight: 700; } .kg-compare-title { text-align: center; font-weight: 700; font-size: 15px; margin-bottom: 14px; color: var(--text); } .kg-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); } .kg-bar-label { width: 130px; text-align: right; flex-shrink: 0; } .kg-bar-track { flex: 1; height: 13px; background: rgba(128, 128, 128, 0.16); border-radius: 999px; overflow: hidden; } .kg-bar-fill { display: block; height: 100%; border-radius: 999px; } .kg-bar-good { background: linear-gradient(90deg, var(--green-dark), var(--green)); } .kg-bar-mid { background: linear-gradient(90deg, var(--amber-dark), var(--amber)); } .kg-bar-bad { background: linear-gradient(90deg, var(--red-dark), var(--red)); } .kg-bar-current { font-weight: 800; } .kg-bar-current .kg-bar-label, .kg-bar-current .kg-bar-val { color: var(--amber); } .kg-bar-val { width: 58px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .kg-goals { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .kg-goal { background: var(--bg-panel); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; } .kg-goal:hover { border-color: var(--amber); } .kg-goal.active { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); box-shadow: var(--glow-amber); } .kg-advice-intro, .kg-advice-note { text-align: center; font-size: 14px; color: var(--text-dim); max-width: 600px; margin: 14px auto; line-height: 1.5; } .kg-advice-intro strong, .kg-advice-note strong { color: var(--text); } .kg-advice-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; max-width: 560px; margin: 10px auto; } .kg-advice-title { font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 8px; } .kg-advice-line { font-size: 13.5px; color: var(--text-dim); margin: 4px 0; line-height: 1.45; } .kg-advice-line strong { color: var(--amber); } .kg-btn { background: linear-gradient(135deg, var(--indigo), var(--indigo-dark)); color: #ffffff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; } .kg-btn:hover { background: linear-gradient(135deg, var(--amber-light), var(--amber)); color: var(--text-on-amber); border-color: var(--amber); } .kg-progress-wrap { max-width: 560px; margin: 0 auto 8px auto; } .kg-progress-info { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-dim); margin-bottom: 6px; } .kg-progress-info strong { color: var(--text); } .kg-progress { height: 14px; background: rgba(128, 128, 128, 0.16); border-radius: 999px; overflow: hidden; } .kg-progress-bar { display: block; width: 0; height: 100%; border-radius: 999px; transition: width 0.4s ease; } .kg-progress-msg { text-align: center; font-size: 14.5px; color: var(--text-dim); margin-top: 12px; } .kg-progress-msg strong { color: var(--text); } .kg-quick { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 20px 0; font-size: 13.5px; color: var(--text-dim); } .kg-budget-stats { text-align: center; font-size: 14px; color: var(--text-dim); margin-top: 14px; line-height: 1.5; } .kg-budget-stats strong { color: var(--amber); } .kg-help-line { text-align: center; font-size: 11.5px; color: var(--text-dim); opacity: 0.75; margin: 24px 0 0 0; } @media (max-width: 768px) { .kg-bar-label { width: 95px; font-size: 11.5px; } .kg-bar-val { width: 50px; font-size: 11.5px; } .kino-guide { padding: 20px 14px; } } /* --------------------------------------------------------------------- 19. CONTAINER QUERIES — προσαρμογή των widgets στον ΧΩΡΟ τους (sidebar, στενές στήλες κλπ.), όχι μόνο στο viewport. --------------------------------------------------------------------- */ .kino-guide, .kino-favorites-widget, .kino-hotcold-widget { container-type: inline-size; } @container (max-width: 460px) { /* Smart Guide σε στενό container */ .kino-guide-header h3 { font-size: 19px; } .kino-guide-header p { font-size: 13px; } .kg-tab, .kg-goal { padding: 8px 12px; font-size: 12.5px; } .kg-controls { gap: 10px; } .kg-control select, .kg-control input { min-width: 90px; font-size: 14px; padding: 8px 10px; } .kg-card { padding: 12px 8px; } .kg-card-value { font-size: 20px; } .kg-card-label { font-size: 11px; } .kg-verdict { font-size: 13px; padding: 10px 12px; } .kg-top { font-size: 13px; } .kg-table th { font-size: 11px; padding: 6px 4px; } .kg-table td { font-size: 12px; padding: 5px 4px; } .kg-bar-label { width: 78px; font-size: 10.5px; } .kg-bar-val { width: 44px; font-size: 10.5px; } .kg-btn { padding: 7px 11px; font-size: 12px; } .kg-quick { font-size: 12px; gap: 6px; } .kg-advice-card { padding: 12px 14px; } .kg-advice-title { font-size: 14.5px; } .kg-advice-line { font-size: 12.5px; } .kino-guide { padding: 16px 12px; } /* Αγαπημένοι αριθμοί σε στενό container */ .kino-favorites-widget { padding: 16px 12px; } .kino-favorites-title { font-size: 17px; } .kino-favorites-hint { font-size: 12.5px; } .kino-favorites-actions .btn { font-size: 13px; padding: 8px 14px; } .kino-fav-result-ball { width: 34px; height: 34px; font-size: 13px; } /* Hot & Cold σε στενό container */ .kino-hotcold-widget { padding: 14px 10px; } .kino-hotcold-ball { width: 52px; height: 52px; } .kino-hotcold-num { font-size: 17px; } .kino-hotcold-balls { gap: 8px; } } /* Hot & Cold σε ΠΟΛΥ στενό container (sidebar ~250-320px) */ @container (max-width: 330px) { .kino-hotcold-widget { padding: 12px 8px; } .kino-hotcold-header { font-size: 12px; margin-bottom: 12px; } .kino-hotcold-title { font-size: 14px; margin-bottom: 10px; } .kino-hotcold-grid { gap: 16px; } .kino-hotcold-balls { gap: 6px; } .kino-hotcold-ball { width: 46px; height: 46px; } .kino-hotcold-num { font-size: 15px; } .kino-hotcold-count { font-size: 9.5px; } .kino-hotcold-pct { font-size: 8px; } } /* --------------------------------------------------------------------- 20. LIVE COLUMNS — adaptive μπάλες (δεν ξεχειλίζουν ποτέ από τη στήλη) --------------------------------------------------------------------- */ .kino-live-columns { container-type: inline-size; } /* Η μπάλα μέσα στη στήλη παίρνει το πλάτος που χωράει (max 55px), κρατά την αναλογία της και κλιμακώνει τη γραμματοσειρά με το container */ .column-content .column-number { width: min(55px, 94%); height: auto; aspect-ratio: 55 / 35; font-size: clamp(11px, 3.4cqw, 22px); margin: 0; /* το gap του column-content δίνει την απόσταση */ } @container (max-width: 640px) { .kino-live-column { min-height: 170px; padding: 10px 2px 14px 2px; border-radius: 0 0 60px 60px; } .kino-live-column.kino-live-green-box { border-radius: 0 0 60px 60px; } .column-header { font-size: 12px; padding-top: 6px; } .column-content { gap: 4px; } } @container (max-width: 430px) { .kino-live-columns { gap: 0.6%; } .kino-live-column { min-height: 140px; padding: 8px 1px 10px 1px; border-radius: 0 0 40px 40px; } .kino-live-column.kino-live-green-box { border-radius: 0 0 40px 40px; } .column-header { font-size: 10px; } .column-content { gap: 3px; } } /* --------------------------------------------------------------------- 21. ΠΛΕΓΜΑΤΑ ΣΤΑΤΙΣΤΙΚΩΝ & PICKER — adaptive μπάλες Κρατάμε τη διάταξη 10 στηλών (δεκάδες 1-80), αλλά οι μπάλες προσαρμόζονται στο πλάτος του κελιού τους αντί να ξεχειλίζουν. --------------------------------------------------------------------- */ #kino_numbers_grid, .kino-table-kino-numbers-stats-number-grid, .kino-numbers-stats-number-grid, .kino-numbers-stats-number-grid-for-protinomenoi-sindiasmoi { container-type: inline-size; } /* Οι μπάλες: πλάτος ανάλογο με το πλάτος του πλέγματος (10cqw ≈ 1 track), max 55px. Το κελί συνεχίζει να «αγκαλιάζει» τη μπάλα, οπότε το badge (position:absolute στο κελί) μένει κολλημένο στη γωνία της μπάλας. */ #kino_numbers_grid .kino-number-label span, #kino_numbers_grid .kino-number, .kino-table-kino-numbers-stats-number-cell .kino-table-kino-numbers-stats-number-box, .kino-numbers-stats-number-cell .kino-numbers-stats-number-box { width: min(55px, 10cqw - 8px); height: auto; aspect-ratio: 55 / 35; margin: 4px 0; font-size: clamp(11px, 4cqw, 22px); } /* Badges (τιμές στατιστικών) σε στενά πλέγματα */ @container (max-width: 520px) { .kino-table-kino-numbers-stats-stat-value, .kino-numbers-stats-stat-value { min-width: 14px; height: 14px; padding: 0 3px; font-size: 9px; top: -5px; right: -4px; border-radius: 6px 6px 6px 0; } } @container (max-width: 360px) { .kino-table-kino-numbers-stats-stat-value, .kino-numbers-stats-stat-value { min-width: 12px; height: 12px; font-size: 8px; top: -4px; right: -2px; } } /* --------------------------------------------------------------------- 22. CUSTOM LAYOUT — περιεχόμενο + δικό μας sidebar Desktop: 2 στήλες (sidebar sticky δεξιά). ≤921px (κινητό/tablet): το sidebar πάει ΠΑΝΩ-ΠΑΝΩ σε πλήρες πλάτος. --------------------------------------------------------------------- */ .kl-layout { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 28px; align-items: flex-start; width: 100%; } .kl-content { flex: 1 1 auto !important; min-width: 0; /* κρίσιμο: αφήνει το live grid να συρρικνωθεί αντί να ξεχειλίσει */ max-width: 100%; } .kl-sidebar { flex: 0 0 320px !important; width: 320px; max-width: 320px; /* Φυσική ροή — κανένας εσωτερικός scrollbar. Το sidebar κυλά μαζί με τη σελίδα όπως σε κάθε site. */ align-self: flex-start; } .kl-sidebar > * { margin-bottom: 20px; } .kl-sidebar > *:last-child { margin-bottom: 0; } /* Καθάρισμα τυχόν κενών

που προσθέτει το wpautop ανάμεσα στα shortcodes */ .kl-layout > p:empty, .kl-content > p:empty, .kl-sidebar > p:empty { display: none; margin: 0; } @media (max-width: 921px) { .kl-layout { flex-direction: column !important; gap: 20px; } .kl-sidebar { order: -1; /* στην κορυφή σε κινητό/tablet */ flex: 0 0 auto !important; width: 100%; max-width: 100%; position: static; } .kl-sidebar > * { margin-bottom: 16px; } }