/* WordlyPlay — game options: the on/off switches in the ⚙ menu, Colorblind tiles, the Hard Mode chip */
.gopt-title{margin-top:6px;border-top:1px solid rgba(148,163,184,.18);padding-top:10px}
.gopt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.gopt .option-meta{display:block}
.gopt-sw{flex:none;width:34px;height:20px;border-radius:999px;background:rgba(148,163,184,.35);position:relative;transition:background .15s}
.gopt-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.gopt.is-on .gopt-sw{background:#22C55E}.gopt.is-on .gopt-sw::after{transform:translateX(14px)}
/* Colorblind: orange = right letter, right spot; blue = in the word, other spot (the same colours as the app) */
:root[data-cb="on"]{--correct:#E66100;--correct-to:#F5852F;--correct-shadow:#B34B00;--correct-light:rgba(230,97,0,.15);--present:#7DD3FC;--present-to:#BAE6FD;--present-shadow:#0284C7;--present-light:rgba(125,211,252,.18)}
/* our keys and empty tiles are blue, so "in the word" is a pale sky blue with dark letters: never mistaken for an unused key */
:root[data-cb="on"] .tile[data-state="present"],:root[data-cb="on"] .key[data-state="present"]{color:#0C4A6E!important;text-shadow:none!important}
:root[data-cb="on"] .key[data-state="correct"],:root[data-cb="on"] .key[data-state="present"]{position:relative}
:root[data-cb="on"] .key[data-state="correct"]::after{content:'';position:absolute;left:32%;right:32%;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.95)}
:root[data-cb="on"] .key[data-state="present"]::after{content:'';position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:#0C4A6E}
:root[data-cb="on"] .tile[data-state="correct"],:root[data-cb="on"] .tile[data-state="present"]{position:relative}
:root[data-cb="on"] .tile[data-state="correct"]::after{content:'';position:absolute;left:30%;right:30%;bottom:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.9)}
:root[data-cb="on"] .tile[data-state="present"]::after{content:'';position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#0C4A6E}
/* the result card's small board follows too */
:root[data-cb="on"] .wc-mini b.c{background:#E66100}:root[data-cb="on"] .wc-mini b.p{background:#7DD3FC}
/* Hard Mode chip over the board */
.hard-chip{display:none;align-items:center;gap:5px;margin:0 auto 6px;width:max-content;padding:2px 10px;border-radius:999px;font:800 11.5px/1.5 var(--font-body,'Nunito',sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#FECACA;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.5)}
.hard-chip.is-on{display:flex}
[data-theme=light] .hard-chip{color:#B91C1C;background:rgba(239,68,68,.08)}
/* "Add to home screen" card (comeback.js) */
.cb-card{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translate(-50%,-12px);opacity:0;transition:transform .25s,opacity .25s;z-index:10030;width:min(92vw,400px);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#111827;color:#F1F5F9;border:1px solid rgba(96,165,250,.55);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.cb-card.is-in{transform:translate(-50%,0);opacity:1}
.cb-card img{border-radius:10px;flex:none}
.cb-card__t{flex:1;min-width:0}.cb-card__t>b{display:block;font:800 14px/1.25 var(--font-body,'Nunito',sans-serif)}.cb-card__t small{color:#94A3B8;font-size:12.5px;line-height:1.35}
.cb-card__go{flex:none;border:0;border-radius:10px;padding:8px 14px;font:400 14px/1 var(--font-heading,'Fredoka One',sans-serif);color:#fff;background:linear-gradient(180deg,#3B82F6,#2563EB);box-shadow:0 3px 0 #1D4ED8;cursor:pointer}
.cb-card__x{flex:none;border:0;background:none;color:#94A3B8;font-size:20px;line-height:1;padding:4px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.cb-card{transition:none}}
/* the ⚙ menu: solid background (it sat see-through over the board) and kept on screen on phones (it ran off the left edge) */
.game-controls .settings-dropdown{background:#111827;backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme=light] .game-controls .settings-dropdown{background:#FFFFFF}
@media (max-width:600px){.game-controls .settings-dropdown{right:auto;left:0;max-width:calc(100vw - 24px)}}
/* "Press Space for the next word" under Play again: only on devices with a keyboard and mouse/trackpad */
.wc-key-hint{display:none;margin:2px 0 4px;text-align:center;font:700 12px/1.4 var(--font-body,'Nunito',sans-serif);color:var(--text-tertiary,#94A3B8)}
.wc-key-hint kbd{display:inline-block;padding:0 6px;border-radius:5px;border:1px solid rgba(148,163,184,.5);border-bottom-width:2px;font:800 11px/1.5 var(--font-body,'Nunito',sans-serif);color:inherit;background:rgba(148,163,184,.1)}
@media (hover:hover) and (pointer:fine){.wc-key-hint{display:block}}
/* the after-Daily card sits at the bottom, under the result */
.cb-card--bottom{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px)}
.cb-card--bottom.is-in{transform:translate(-50%,0)}
/* "📲 Add to home screen" in the phone menu */
.cb-menu{display:block;width:100%;text-align:left;border:1px solid rgba(96,165,250,.5)!important;background:rgba(59,130,246,.14)!important;color:#BFDBFE!important;border-radius:12px;margin:6px 0;cursor:pointer;font:inherit}
.cb-menu small{display:block;font-size:11.5px;font-weight:600;color:#94A3B8;margin-top:2px}
[data-theme=light] .cb-menu{color:#1D4ED8!important;background:rgba(59,130,246,.08)!important}