/* 
* styles.css
* Copyright (C) 2025 MsCosmoJo
*
* This program is free software:you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation,either version 3 of the License,or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY;without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not,see <https://www.gnu.org/licenses/>.
,*/:root{--accent:#8a38f5;--header-bg:#262626;--cell-bg:#262626;--cell-marked-fg:#121212;--cell-hover-fg:#ba90f1;--body-fg:#ba90f1;--body-bg:#2c2c2c;--header-fg:#b568fd;--header-border:#9645ff;--border:#8a38f5;--bg-marked:#843de0;--border-marked:#8a38f5;--bg-hover:#30283b;--border-hover:var(--border);--bg-marked-hover:#7736ca;--border-marked-hover:var(--border-marked);--fg-marked-hover:#121212;--theme-toggle-bg:#272727;--active-color:#8a38f5;--inactive-color:#764cad;--active-bg:#222222;--active-hover-bg:#231f29;--inactive-hover-bg:#242424;}[data-theme="light"]{--accent:#ff00c8;--header-bg:#fcf0f8;--cell-bg:#fff8fd;--cell-marked-fg:#ffffff;--cell-hover-fg:#db05ad;--body-fg:#db05ad;--body-bg:#ffffff;--header-fg:#d20ba7;--header-border:#d20ba7;--border:#ff00c8;--bg-marked:#d20ba7;--border-marked:#d20ba7;--bg-hover:#ffd9f7;--border-hover:#ff00c8;--bg-marked-hover:#bb0a98;--border-marked-hover:#d20ba7;--fg-marked-hover:#ffffff;--theme-toggle-bg:#fbebf6;--active-color:#ff00c8;--inactive-color:#ff7be3;--active-bg:#fdd8f4;--active-hover-bg:#ffb6ee;--inactive-hover-bg:#fbdef4;}*{box-sizing:border-box;margin:0;padding:0;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;font-family:"Inter Tight",sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;}*,*::before,*::after{transition:background-color 300ms ease,color 50ms ease,border-color 300ms ease,fill 200ms ease,stroke 300ms ease;}body::after{position:absolute;width:0;height:0;overflow:hidden;z-index:-1;content:url(../images/marked.svg) url(../images/unmarked.svg);}body{background:var(--header-bg);color:var(--body-fg);font-family:sans-serif;display:flex;flex-direction:column;min-height:100vh;justify-content:center;align-items:center;}header{background:var(--header-bg);color:var(--header-fg);position:relative;display:flex;justify-content:center;align-items:center;padding:1rem;width:fit-content;}main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1rem;padding-top:2rem;}footer{background:var(--header-bg);color:var(--header-fg);padding:1rem;display:flex;justify-content:center;align-items:center;}#bingo{display:grid;width:70vmin;aspect-ratio:1 / 1;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));gap:6px;overflow:hidden;}#controls{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:.5rem;padding-bottom:1rem;}.card{padding:0,1rem,0,1rem;border:1px solid var(--border);border-radius:.35rem;background:var(--body-bg);display:flex;flex-direction:column;gap:.5rem;width:97%;}.cell{position:relative;display:grid;place-items:center;text-align:center;overflow-wrap:normal;padding:.3em;background:var(--cell-bg);border:1px solid var(--border);cursor:pointer;font-size:clamp(12pt,1.15vw,5vw);border-radius:clamp(4px,6px,12px);}.cell-text{display:flex;justify-content:center;align-items:center;width:100%;height:100%;text-align:center;font-size:inherit;line-height:1.2;font-weight:500;}.cell.marked{background:var(--bg-marked);color:var(--cell-marked-fg);border:1px solid var(--border-marked);transition:all .2s ease-in-out;}body.hasHover .cell:hover{background:var(--bg-hover);color:var(--cell-hover-fg);border:1px solid var(--border-hover);}body.hasHover .cell.marked:hover{background:var(--bg-marked-hover);color:var(--fg-marked-hover);border:1px solid var(--border-marked-hover);}.cell.free{mask:url("../images/unmarked.svg") no-repeat center/75%;background:var(--bg-marked);}.cell.free.marked{mask:url("../images/marked.svg") no-repeat center/75%;background:var(--bg-marked);}body.hasHover .cell.free:hover{background:var(--bg-marked-hover);}body.hasHover .cell.free.marked:hover{background:var(--bg-marked-hover);}.theme-toggle{display:flex;gap:.5rem;padding:.5rem;justify-self:center;align-items:center;background:var(--theme-toggle-bg);border-radius:.35rem;}.mode-btn{background:var(--theme-toggle-bg);color:var(--inactive-color);height:2.5rem;width:2.25rem;padding:.5rem;cursor:pointer;position:relative;z-index:1;text-align:center;place-items:center;display:grid;border:1px solid transparent;transition:background-color 300ms ease-in-out;border-radius:.15rem;box-sizing:border-box;justify-content:center;}.mode-btn svg{width:1.5rem;height:1.5rem;}.mode-btn.active svg{width:1.5rem;height:1.5rem;}.mode-btn.active{background:var(--active-bg);color:var(--active-color);width:2.5rem;border-radius:.15rem;border-color:var(--active-color);transition:background-color 300ms ease-in-out;padding-left:.5rem;}body.hasHover .mode-btn:hover{background:var(--inactive-hover-bg);border-radius:.15rem;transition:background-color 300ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;}body.hasHover .mode-btn.active:hover{background:var(--active-hover-bg);border-radius:.15rem;border-color:var(--active-color);transition:background-color 300ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;}.vertical-line{width:1px;height:1.5rem;background:var(--active-color);margin:0 0;padding:0;}.share-field{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.5rem;background:var(--theme-toggle-bg);border-radius:.35rem;}.share-btn{display:flex;align-items:center;gap:.5rem;height:2.5rem;width:5.5rem;padding:.5rem .5rem .5rem .47rem;color:var(--active-color);border:1px solid var(--active-color);border-radius:.15rem;cursor:pointer;font-size:1rem;transition:all 300ms ease;background:var(--theme-toggle-bg);box-sizing:border-box;justify-content:center;}.share-btn:hover{background:var(--active-hover-bg);color:var(--active-color);border-color:var(--active-color);}.share-btn svg{width:1.35rem;height:1.35rem;flex-shrink:0;}a:link,a:visited{color:var(--header-fg);text-decoration:underline;}a:hover{color:var(--accent);}@media (max-width:850px){#bingo{width:min(590px,95vw);height:min(590px,95vw);gap:4px}.cell{font-size:clamp(12pt,2vw,4vw);padding:min(.5em,5px);border-radius:8px}}@media (max-width:450px){#bingo{width:min(590px,95vw);height:min(590px,95vw);gap:4px}.cell{font-size:clamp(8pt,2vw,4vw);padding:min(.5em,5px);border-radius:8px}header{display:block;text-align:center;font-size:clamp(.5rem,1rem,2rem)}}@media (min-width:2560px){#bingo{width:clamp(20vmin,55vmin,100vmin);gap:6px}.cell{font-size:clamp(.5rem,2rem,3rem);padding:.8em;border-radius:12px}header{padding:2rem;font-size:clamp(1.5rem,2.5rem,3rem)}footer{padding:2rem;font-size:clamp(1.5rem,2.5rem,3rem)}}