:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--page-bg: #15191d;--text: #f3eee8;--heading: #faf7f2;--cell-bg: #20262b;--cell-border: #3a4349;--cell-hover-border: #6d7880;--center-bg: #29343b;--center-border: #7f969f;--active-bg: #dbe8dd;--active-border: #b6ccb9;--active-text: #26382b;--center-active-bg: #dce7e9;--center-active-border: #b8cbd0}:root[data-theme=light]{--page-bg: #f6f2ed;--text: #263643;--heading: #1f3445;--cell-bg: #fdfaf6;--cell-border: #d7d0c8;--cell-hover-border: #9c9389;--center-bg: #e7eef0;--center-border: #98adb4;--active-bg: #e8f1e9;--active-border: #c8d9cb;--active-text: #2d4332;--center-active-bg: #e7eff0;--center-active-border: #c7d7da}*,*:before,*:after{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%}html{background:var(--page-bg)}body{margin:0;min-width:320px;min-height:100vh;background:var(--page-bg);color:var(--text)}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}#root{width:100%;min-width:0}main{width:100%;margin:0 auto;padding:16px 6px 24px}h1{margin:0 0 16px;color:var(--heading);text-align:center;font-size:clamp(1.6rem,6vw,3rem);line-height:1;letter-spacing:-.03em}.grid-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:4px;min-width:720px}.bingo-cell{position:relative;width:100%;min-width:0;min-height:120px;padding:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cell-border);border-radius:6px;background:var(--cell-bg);color:var(--text);font:inherit;font-weight:700;font-size:.9rem;line-height:1.15;text-align:center;overflow:hidden;overflow-wrap:normal;word-break:normal;-webkit-hyphens:none;hyphens:none;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}.bingo-cell.long{font-size:clamp(.66rem,2.8vw,.84rem)}.bingo-cell.very-long{font-size:clamp(.6rem,2.5vw,.76rem)}.bingo-cell:active{transform:scale(.98)}.bingo-cell:focus-visible{outline:2px solid var(--cell-hover-border);outline-offset:2px}.bingo-cell.center{background:var(--center-bg);border-color:var(--center-border)}.bingo-cell.active{background:var(--active-bg);border-color:var(--active-border);color:var(--active-text)}.bingo-cell.center.active{background:var(--center-active-bg);border-color:var(--center-active-border);color:var(--active-text)}.tick{position:absolute;top:4px;right:4px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--active-text)}.tick svg{width:100%;height:100%}.settings{width:min(420px,calc(100% - 24px));margin:0 auto;padding:24px 0;display:flex;flex-direction:column;gap:12px;color:var(--text)}.settings button{width:100%;padding:12px 16px;border:1px solid var(--cell-border);border-radius:8px;background:var(--cell-bg);color:var(--text);font-weight:600;cursor:pointer}@media(min-width:600px){main{max-width:900px;padding:24px 12px 36px}h1{margin-bottom:24px}.grid{gap:6px}.bingo-cell{min-height:125px;padding:12px 9px;border-radius:8px;font-size:.9rem;line-height:1.2}.tick{top:7px;right:7px;width:20px;height:20px}}@media(min-width:1000px){main{max-width:1200px;padding:32px 16px 48px}.grid{gap:8px}.bingo-cell{min-height:150px;padding:18px;border-radius:10px;font-size:1.05rem}.bingo-cell:hover{border-color:var(--cell-hover-border);transform:translateY(-1px)}.tick{width:24px;height:24px}}.theme-toggle{position:fixed;top:10px;right:10px;z-index:100;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--cell-border);border-radius:999px;background:var(--cell-bg);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer}.theme-toggle:active{transform:scale(.96)}@media(min-width:1000px){.theme-toggle:hover{border-color:var(--cell-hover-border)}}.view-switch{width:min(420px,100%);margin:0 auto 20px;padding:4px;display:flex;gap:4px;border:1px solid var(--cell-border);border-radius:999px;background:var(--cell-bg)}.view-switch-btn{flex:1;padding:10px 12px;border:none;border-radius:999px;background:none;color:var(--text);opacity:.65;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background-color .12s ease,opacity .12s ease}.view-switch-btn.active{background:var(--active-bg);color:var(--active-text);opacity:1}.view-switch-btn:not(.active):hover{opacity:1}.view-switch-btn:active{transform:scale(.98)}.view-switch-hint{font-weight:600;font-size:.78rem;opacity:.85}.list{max-width:720px;margin:0 auto;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}.list-row{border:1px solid var(--cell-border);border-radius:8px;background:var(--cell-bg);overflow:hidden}.list-row.center{background:var(--center-bg);border-color:var(--center-border)}.list-row.active{background:var(--active-bg);border-color:var(--active-border)}.list-row.center.active{background:var(--center-active-bg);border-color:var(--center-active-border)}.list-row-main{width:100%;padding:12px 14px;display:flex;align-items:center;gap:12px;border:none;background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer}.list-row.active .list-row-main{color:var(--active-text)}.list-tick{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cell-border);border-radius:4px;color:var(--active-text)}.list-row.active .list-tick{border-color:var(--active-text)}.list-text{flex:1;font-weight:600;font-size:.95rem;line-height:1.3}.list-rules{margin:0;padding:0 14px 12px 30px;color:var(--text);opacity:.9;font-size:.85rem;line-height:1.35}.list-rules li+li{margin-top:4px}.rules{max-width:720px;margin:28px auto 0;padding:18px;border:1px solid var(--cell-border);border-radius:10px;background:var(--cell-bg);color:var(--text);text-align:left}.rules h2{margin:0 0 12px;font-size:1.35rem;color:var(--heading)}.rules ul{margin:0;padding-left:1.2rem}.rules li+li{margin-top:10px}.rules ul ul{margin-top:8px}@media(orientation:landscape){.grid-wrap{overflow-x:visible}.grid{min-width:0;max-width:900px;margin:0 auto;grid-template-columns:repeat(5,minmax(0,1fr))}.bingo-cell{min-height:105px;font-size:.95rem}}
