/* ── παιχνίδι γνώσεων ── */

.glevel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin-bottom:.6rem}
.glevel button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:.5rem .3rem;border:1px solid var(--rule);border-radius:.6rem;background:var(--paper)}
.glevel b{display:block;font:700 .9rem/1.2 var(--sans);color:var(--ink)}
.glevel small{display:block;font:500 .68rem/1.3 var(--sans);color:var(--muted);margin-top:.1rem}
.glevel button[aria-checked="true"]{background:#192f5b;border-color:#192f5b}
.glevel button[aria-checked="true"] b{color:#fff}.glevel button[aria-checked="true"] small{color:#d8a020}
.glevel button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:420px){.glevel small{font-size:.6rem}.glevel b{font-size:.82rem}}
.ghud{position:sticky;top:var(--hudtop,0px);z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rank score" "meta share";gap:.4rem .9rem;align-items:center;padding:.6rem .8rem;border-radius:.8rem;background:#192f5b;color:#fff;box-shadow:0 8px 20px rgba(11,20,38,.28)}
@media (min-width:700px){.ghud{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"rank meta score share";padding:.8rem 1rem;gap:.6rem 1.4rem}}
.ghud .k{display:block;font:700 .62rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#d8a020}
.hrank{grid-area:rank;display:flex;align-items:center;gap:.7rem;min-width:0}
.hname{min-width:0}
.hname b{display:block;font:italic 700 1.2rem/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hname small{display:block;font:500 .72rem/1.35 var(--sans);color:#c9d3e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hname small.promo{color:#d8a020;font-weight:700}
@media (min-width:700px){.hname b{font-size:1.5rem}.hname small{font-size:.8rem;white-space:normal}}
.gbadge{flex:0 0 auto;width:60px;height:45px;display:block;filter:drop-shadow(0 0 1px rgba(255,255,255,.55))}
@media (min-width:700px){.gbadge{width:88px;height:66px}}
.gbadge svg,.gladder svg{width:100%;height:100%;display:block}
.hscore{grid-area:score;text-align:right}
.hscore b{display:block;font:700 2rem/1 var(--serif);font-variant-numeric:tabular-nums;color:#fff}
@media (min-width:700px){.hscore b{font-size:2.4rem}}
.hmeta{grid-area:meta;display:flex;align-items:center;gap:.3rem .8rem;flex-wrap:wrap;min-width:0}
.hmeta small{font:500 .74rem/1.3 var(--sans);color:#c9d3e6;white-space:nowrap}
.hmeta i{font-style:normal;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.anchors{color:#d8a020;display:flex;gap:1px;align-items:center}
.anchors svg{width:24px;height:24px;flex:0 0 auto;transition:transform .7s cubic-bezier(.5,0,.7,1),opacity .7s ease}
.anchors svg.lost{opacity:.18;transform:translateY(7px) rotate(-28deg)}
@media (prefers-reduced-motion:reduce){.anchors svg{transition:none}}
.hshare{grid-area:share;justify-self:end;width:40px;height:40px;border-radius:50%;border:1px solid rgba(216,160,32,.6);background:transparent;color:#d8a020;display:grid;place-items:center;cursor:pointer;padding:0}
.hshare svg{width:20px;height:20px}
.hshare:hover,.hshare:focus-visible{background:#d8a020;color:#192f5b;outline:none}
.ghud.up{animation:rankup .9s ease}
@keyframes rankup{0%{box-shadow:0 0 0 0 rgba(216,160,32,.9)}100%{box-shadow:0 0 0 18px rgba(216,160,32,0)}}
@media (prefers-reduced-motion:reduce){.ghud.up{animation:none}}
.gladder{margin-top:1.4rem;max-width:44rem}
.gladder summary{cursor:pointer;font:700 1rem var(--sans);color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gladder summary{color:#fff}}
:root[data-theme="dark"] .gladder summary{color:#fff}
.gladder ol{list-style:none;padding:0;margin:.8rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem}
.gladder li{display:flex;flex-direction:column;gap:.3rem;padding:.6rem;border:1px solid var(--rule);border-radius:.6rem;font:600 .88rem/1.3 var(--sans)}
.gladder li i{display:block;width:100%;aspect-ratio:4/3;max-width:100%}
.gladder li small{font-weight:500;color:var(--muted)}
.gladder li.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(216,160,32,.35)}
.game .gtitle{font:italic 700 clamp(2.2rem,1.6rem + 2.6vw,3.2rem)/1.05 var(--serif);color:var(--navy);margin:0 0 .6rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .game .gtitle{color:#fff}}
:root[data-theme="dark"] .game .gtitle{color:#fff}
.gboard{max-width:44rem;margin-top:1.4rem}
.ghint span{display:block}
.gmask b{color:var(--gold-ink)}
.gmask small{white-space:nowrap;letter-spacing:0}
.gcard{margin-top:.7rem;padding:1.1rem 1.2rem;border:1px solid var(--rule);border-radius:.8rem;background:var(--bg)}
.gclue{font-size:1.15rem;line-height:1.6;margin:.8rem 0 .4rem}
.ghint{color:var(--gold-ink);font:600 .9rem/1.5 var(--sans);min-height:1.3em;margin:.2rem 0}
.gmask{font:700 1.4rem/1.3 var(--serif);letter-spacing:.35em;margin:.5rem 0 .4rem;color:var(--muted);overflow-wrap:anywhere}
@media (max-width:699px){
  .gmask{font-size:1.1rem;letter-spacing:.18em}
  .gclue{font-size:1rem;line-height:1.5;margin:.3rem 0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  .gclue.open{display:block}
  #g-play .chips{display:none}
  #g-form{flex-wrap:nowrap}
  #g-form input{flex:1 1 auto;min-width:0;padding:.6rem .75rem}
  #g-form .btn{flex:0 0 auto}
  #g-play{padding:.8rem .9rem}
  .ghint{font-size:.82rem;line-height:1.35}
  .gfeed{margin-top:.45rem;font-size:.9rem}
}
@media (max-width:699px) and (max-height:700px){.gclue{-webkit-line-clamp:4}}
.gmask small{font:600 .8rem var(--sans);letter-spacing:.02em;margin-left:.6rem}
.gform{display:flex;gap:.5rem;flex-wrap:wrap}
.gform input{flex:1 1 14rem;font:18px/1.2 var(--serif);padding:.75rem .9rem;border-radius:.5rem;border:2px solid var(--rule);background:var(--bg);color:var(--ink)}
.gform input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(216,160,32,.22)}
.gfeed{min-height:1.5em;margin:.7rem 0 0;font-weight:600}
.gfeed.ok{color:#2f7a4b}.gfeed.no{color:#b3412f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gfeed.ok{color:#7cc79a}:root:not([data-theme="light"]) .gfeed.no{color:#ef8f80}}
:root[data-theme="dark"] .gfeed.ok{color:#7cc79a}:root[data-theme="dark"] .gfeed.no{color:#ef8f80}
.gover .k{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0}
.gans{font-size:1.2rem;margin:.6rem 0}.gans a{font:italic 700 1.5rem var(--serif)}
.gshot{display:block;width:100%;max-width:30rem;border-radius:.5rem;margin:1rem 0;border:1px solid var(--rule)}

/* ══ ΠΑΙΧΝΙΔΙΑ: κοινά ══════════════════════════════════════════════════════════ */
:root{--map-sea-1:#eef2f8;--map-sea-2:#dbe3ef;--ok:#2f7a4b;--no:#b3412f;--ok-bg:rgba(47,122,75,.14);--no-bg:rgba(179,65,47,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--map-sea-1:#18294a;--map-sea-2:#0d1830;--ok:#7cc79a;--no:#ef8f80;--ok-bg:rgba(124,199,154,.16);--no-bg:rgba(239,143,128,.14)}}
:root[data-theme="dark"]{--map-sea-1:#18294a;--map-sea-2:#0d1830;--ok:#7cc79a;--no:#ef8f80;--ok-bg:rgba(124,199,154,.16);--no-bg:rgba(239,143,128,.14)}
.game [hidden]{display:none!important}
.gfeed.ok{color:var(--ok)}.gfeed.no{color:var(--no)}

/* ο πίνακας: κύμα στη βάση και καράβι που προχωρά προς τον επόμενο βαθμό */
.ghud{grid-template-areas:"rank score" "meta share" "prog prog";padding-bottom:.9rem}
@media (min-width:700px){.ghud{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"rank score share" "meta meta meta" "prog prog prog"}.hname small{white-space:nowrap}}
.hwave{position:absolute;left:0;right:0;bottom:0;height:9px;overflow:hidden;border-radius:0 0 .8rem .8rem;pointer-events:none;opacity:.4;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='9'%3E%3Cpath d='M0 5Q20 0 40 5T80 5V9H0Z' fill='%23d8a020'/%3E%3C/svg%3E") repeat-x 0 0/80px 9px;
  animation:hwave 4s linear infinite}
@keyframes hwave{to{background-position:-80px 0}}
.hprog{grid-area:prog;position:relative;height:16px}
.hprog::before{content:"";position:absolute;left:0;right:0;top:8px;border-top:1px dashed rgba(216,160,32,.45)}
.hprog i{position:absolute;left:0;top:7px;height:3px;border-radius:2px;background:#d8a020;width:calc(var(--p,0) * 100%);transition:width .8s ease}
.hprog svg{position:absolute;top:-2px;width:22px;height:16px;left:calc(var(--p,0) * (100% - 22px));transition:left .9s cubic-bezier(.3,.9,.3,1)}
.hshare svg{pointer-events:none}

/* εφέ */
.gcard{position:relative}
.fx-rose{position:absolute;left:50%;top:45%;width:110px;height:110px;margin:-55px 0 0 -55px;pointer-events:none;z-index:5;animation:fxrose .95s ease-out forwards}
.fx-rose svg{width:100%;height:100%;display:block}
@keyframes fxrose{0%{opacity:0;transform:scale(.3) rotate(-90deg)}35%{opacity:1}100%{opacity:0;transform:scale(1.3) rotate(270deg)}}
.fx-bubble{position:absolute;width:7px;height:7px;margin:-3px;border:1.5px solid rgba(190,225,255,.95);border-radius:50%;pointer-events:none;opacity:0;animation:fxbub 1.2s ease-out var(--d,0ms) forwards}
@keyframes fxbub{0%{opacity:0;transform:translateY(0) scale(var(--s,1))}20%{opacity:1}100%{opacity:0;transform:translate(4px,-34px) scale(var(--s,1))}}
.fx-flag{position:absolute;width:12px;height:9px;margin:-4px 0 0 -6px;pointer-events:none;z-index:40;border:1px solid rgba(0,0,0,.25);animation:fxflag 1.2s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fxflag{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.gbadge.stamp{animation:stamp .65s cubic-bezier(.2,1.5,.4,1)}
@keyframes stamp{0%{transform:scale(2.4) rotate(-16deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.gmask b.flip{display:inline-block;animation:flipin .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes flipin{from{transform:rotateX(90deg) translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.shake{animation:shake .4s ease}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.gover:not([hidden]){animation:rise .5s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.gover strong{color:var(--gold-ink)}
.gchal{margin:0 0 .6rem;padding:.7rem .9rem;border-radius:.6rem;background:rgba(216,160,32,.16);border:1px solid rgba(216,160,32,.55);font:500 .92rem/1.45 var(--sans)}

/* κουμπιά επιλογών */
.popts{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.45rem;margin:.8rem 0 .2rem}
.opt{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:.7rem .6rem;border:1.5px solid var(--rule);border-radius:.6rem;background:var(--paper);font:600 .95rem/1.25 var(--sans);color:var(--ink);transition:transform .15s ease,border-color .2s,background .2s}
.opt:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}
.opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--no);background:var(--no-bg)}
.gnext{margin-top:.5rem}
.pety{font:.9rem/1.5 var(--sans);color:var(--muted);min-height:1.4em;margin:.35rem 0 0}
#g-play .gform{margin-top:.6rem}
@media (max-width:699px){#g-play .gform{flex-wrap:nowrap}#g-play .gform input{flex:1 1 auto;min-width:0;padding:.6rem .75rem}#g-play .gform .btn{flex:0 0 auto}}

/* ── ΑΠΟ ΠΟΥ ΗΡΘΕ Η ΛΕΞΗ ── */
.pmap{border-radius:.7rem;overflow:hidden;border:1px solid var(--rule)}
.pmap svg{display:block;width:100%;height:auto}
.pm-rhumb{stroke:#d8a020;stroke-width:.4;opacity:.3}
.pm-port circle{fill:var(--muted);transform-box:fill-box;transform-origin:center;transition:transform .3s}
.pm-port text{font:600 8.5px var(--sans);fill:var(--muted)}
.pm-port.on circle{fill:#d8a020;transform:scale(1.7)}
.pm-port.on text{fill:var(--ink);font-weight:800}
.pm-home circle{fill:#c8202e}
.pm-home .pm-light{fill:#d8a020;opacity:0;transform-box:fill-box;transform-origin:center}
.pm-home.lit .pm-light{animation:beacon 1.3s ease-out 2}
@keyframes beacon{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(7)}}
.pm-route{fill:none;stroke:#d8a020;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pm-route.draw{animation:draw 1.8s cubic-bezier(.45,0,.25,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pword{font:italic 700 clamp(1.8rem,1.4rem + 2vw,2.6rem)/1.1 var(--serif);margin:.8rem 0 .1rem;text-align:center;overflow-wrap:anywhere}

/* ── ΑΝΕΜΟΛΟΓΙΟ ── */
.aq{font:1.1rem/1.45 var(--serif);text-align:center;margin:.3rem 0 0;text-wrap:balance}
.aq small{display:block;font:500 .8rem var(--sans);color:var(--muted);margin-top:.15rem}
.arose{max-width:330px;margin:.4rem auto 0}
.arose svg{display:block;width:100%;height:auto;touch-action:manipulation}
.ar-rim{fill:var(--paper);stroke:var(--rule);stroke-width:2}
.ar-face{fill:none}
.ar-sec{fill:rgba(25,47,91,.05);stroke:var(--rule);stroke-width:1;transition:fill .25s;outline:none}
.arose.pick .ar-sec{cursor:pointer}
.arose.pick .ar-sec:hover,.arose .ar-sec:focus-visible{fill:rgba(216,160,32,.3)}
.ar-sec.ask{fill:rgba(216,160,32,.38)}
.ar-sec.right{fill:var(--ok-bg);stroke:var(--ok);stroke-width:2}
.ar-sec.wrong{fill:var(--no-bg);stroke:var(--no);stroke-width:2}
.ar-lbl{font:700 13px var(--sans);fill:var(--ink);text-anchor:middle;pointer-events:none}
.ar-lbl.sm{font-size:8.5px}
.ar-star path{fill:#d8a020;opacity:.85;pointer-events:none}
.ar-needle{transition:transform 1.1s cubic-bezier(.35,1.55,.45,1);pointer-events:none}
.ar-needle .n1{fill:#c8202e}.ar-needle .n2{fill:var(--muted)}.ar-needle circle{fill:#d8a020}

/* ── ΦΡΑΣΕΙΣ ── */
.fphrase{font:italic 700 clamp(1.45rem,1.15rem + 1.6vw,2.2rem)/1.3 var(--serif);text-align:center;margin:.7rem 0 .3rem;text-wrap:balance}
.fblank{display:inline-block;min-width:4.2em;border-bottom:3px solid var(--gold);padding:0 .2em;font-style:normal;color:var(--gold-ink);animation:blank 1.4s ease-in-out infinite}
.fblank.ok,.fblank.no{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.fblank.ok{color:var(--ok);border-color:var(--ok)}.fblank.no{color:var(--no);border-color:var(--no)}
@keyframes blank{50%{border-bottom-color:transparent}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.fmean{text-align:center;color:var(--muted);font:1rem/1.5 var(--sans);margin:0 0 .3rem;text-wrap:balance}

/* ── ΖΕΥΓΑΡΙΑ ── */
.zhead{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;font:600 .85rem/1.4 var(--sans);color:var(--muted)}
.zhead b{font:italic 700 1.15rem var(--serif);color:var(--ink)}
.zgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin-top:.6rem}
.zwrap{position:relative}
.zshow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;box-shadow:0 10px 26px rgba(11,20,38,.35);font-size:1rem;padding:.8rem 1.2rem;white-space:nowrap}
.zshow:not([hidden]){animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(216,160,32,.18),0 10px 26px rgba(11,20,38,.35)}}
.zc{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:4/3;perspective:700px;position:relative;display:block}
@media (max-width:480px){.zc{aspect-ratio:1/1}}
.zc-in{position:absolute;inset:0;transition:transform .5s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.zc.open .zc-in,.zc.done .zc-in{transform:rotateY(180deg)}
.zc-back,.zc-face{position:absolute;inset:0;border-radius:.55rem;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:grid;place-items:center;text-align:center;padding:.25rem}
.zc-back{border:1px solid #0f1f40;background:#192f5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d8a020' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='20' cy='9' r='2.6'/%3E%3Cpath d='M20 12V31M13 16H27M10 23Q11 31 20 31Q29 31 30 23'/%3E%3C/g%3E%3C/svg%3E") center/34% no-repeat}
.zc-face{transform:rotateY(180deg);background:var(--paper);border:1.5px solid var(--rule);font:600 clamp(.7rem,.58rem + .5vw,.95rem)/1.15 var(--sans);color:var(--ink);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.zc.done .zc-face{border-color:var(--ok);background:var(--ok-bg)}
.zc:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:.55rem}
.zt{position:absolute;top:.1rem;right:.35rem;font-style:normal;font-weight:800;color:var(--ok)}

/* ── ΨΑΡΙ, ΠΛΟΙΟ Ή ΚΑΙΡΟΣ ── */
.ttop{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}
.tclock{height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
#t-bar{display:block;height:100%;background:#d8a020;transform-origin:left center}
.tclock.low #t-bar{background:var(--no)}
.ttime{font:700 .95rem var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}
.tstage{display:grid;place-items:center;min-height:8.5rem}
.tcard{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;padding:1rem 1.4rem;border-radius:.9rem;background:var(--paper);border:1.5px solid var(--rule);box-shadow:0 10px 24px rgba(11,20,38,.16);font:italic 700 clamp(1.4rem,1.1rem + 1.4vw,2rem)/1.15 var(--serif);color:var(--ink);text-align:center;max-width:92%;transition:transform .25s ease}
.tcard.drag{cursor:grabbing;transition:none;box-shadow:0 18px 34px rgba(11,20,38,.3)}
.tcard.fly{transition:transform .36s cubic-bezier(.5,0,.8,.4),opacity .36s ease;opacity:0}
.tcard.enter{animation:rise .3s ease-out}
.tbins{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:.5rem;margin-top:.6rem}
.tbin{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem .3rem;border-radius:.8rem;border:2px dashed var(--rule);background:var(--paper);color:var(--ink);transition:transform .15s ease,border-color .2s}
.tbin svg{width:46px;height:31px;fill:currentColor}
.tbin svg .eye{fill:var(--paper)}.tbin svg .rain{stroke:currentColor;fill:none}
.tbin b{font:700 .85rem var(--sans)}
.tbin:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tbin.near{border-color:var(--gold);border-style:solid;transform:scale(1.05)}
.tbin.hit{animation:gulp .45s ease}
@keyframes gulp{40%{transform:scale(1.1);border-color:var(--ok);border-style:solid}}
.tbin.show{animation:hintbin 1.1s ease}
@keyframes hintbin{30%,70%{border-color:var(--ok);border-style:solid;background:var(--ok-bg)}}
.tbin.miss{animation:shake .4s ease}
.tgloss{font:.88rem/1.45 var(--sans);color:var(--muted);min-height:2.6em;margin:.4rem 0 0}

/* ── ΣΕΛΙΔΑ ΠΑΙΧΝΙΔΙΩΝ ── */
.hub-career{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"badge name total" "prog prog prog";gap:.3rem 1rem;align-items:center;padding:1rem 1.1rem 1.2rem;border-radius:.9rem;background:#192f5b;color:#fff;margin:1.2rem 0}
.hub-career .gbadge{grid-area:badge;width:84px;height:63px}
.hub-career .k{display:block;font:700 .64rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#d8a020}
.hub-career .nm{grid-area:name;min-width:0}
.hub-career .nm b{display:block;font:italic 700 1.5rem/1.15 var(--serif)}
.hub-career .nm small{display:block;font:500 .8rem/1.4 var(--sans);color:#c9d3e6}
.hub-career .tot{grid-area:total;text-align:right}
.hub-career .tot b{display:block;font:700 2.2rem/1 var(--serif);font-variant-numeric:tabular-nums}
.hub-career .hprog{margin-top:.2rem}
@media (max-width:520px){.hub-career{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badge name" "total total" "prog prog"}.hub-career .tot{text-align:left}}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.8rem;margin-top:1rem}
.hg{display:flex;flex-direction:column;gap:.3rem;padding:0 0 1rem;border:1px solid var(--rule);border-radius:.9rem;background:var(--paper);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.hg:hover,.hg:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,20,38,.16)}
.hg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hg .art{display:block;height:118px;background:#192f5b;position:relative;overflow:hidden}
.hg .art svg{position:absolute;inset:0;width:100%;height:100%}
.hg .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 6Q20 0 40 6T80 6V12H0Z' fill='%23264a86'/%3E%3C/svg%3E") repeat-x 0 0/80px 12px;animation:hwave 5s linear infinite}
.hg b{font:italic 700 1.3rem/1.15 var(--serif);padding:0 1rem;margin-top:.55rem}
.hg .d{padding:0 1rem;font:.9rem/1.45 var(--sans);color:var(--muted)}
.hg small{padding:0 1rem;font:600 .76rem var(--sans);color:var(--gold-ink)}
.hub-more{margin-top:1.6rem}
.hub-more ul.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.6rem;margin:.6rem 0 .8rem}
.hub-more a.mini{display:flex;flex-direction:column;padding:0;border-radius:.7rem;overflow:hidden;background:var(--paper);border:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.hub-more a.mini .art{display:block;height:74px;background:#192f5b;position:relative;overflow:hidden}
.hub-more a.mini .art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hub-more a.mini b{font:italic 700 .95rem/1.2 var(--serif);padding:.5rem .6rem .6rem}
.hub-more a.mini:hover,.hub-more a.mini:focus-visible{transform:translateY(-3px);border-color:#d8a020;box-shadow:0 10px 22px rgba(11,20,38,.2)}
.hub-more a.mini:hover .art svg{transform:scale(1.08)}
.h-reset{margin-left:auto;color:var(--muted)}
.hub-more ul{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.hub-more a{display:inline-block;padding:.45rem .8rem;border:1px solid var(--rule);border-radius:999px;font:600 .85rem var(--sans);text-decoration:none;color:var(--ink);background:var(--paper)}
.hub-more a:hover{border-color:var(--gold)}
/* μικρές κινούμενες εικόνες των καρτών */
.art .t{transform-box:fill-box;transform-origin:center}
.art-lexi .t{animation:tile 4s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes tile{0%,12%{transform:rotateX(90deg);opacity:0}24%,80%{transform:none;opacity:1}92%,100%{transform:rotateX(90deg);opacity:0}}
.art-proeleusi .ship{animation:sailx 6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sailx{0%{transform:translate(0,0)}50%{transform:translate(150px,26px)}50.01%{opacity:0}51%{transform:translate(0,0);opacity:0}60%,100%{opacity:1}}
.art-proeleusi .route{stroke-dasharray:4 5;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-9}}
.art-anemologio .needle{transform-box:view-box;transform-origin:130px 59px;animation:swing 4.5s cubic-bezier(.35,1.4,.45,1) infinite}
@keyframes swing{0%,100%{transform:rotate(-35deg)}30%{transform:rotate(80deg)}60%{transform:rotate(200deg)}}
.art-fraseis .w1{animation:swap 4s ease infinite}.art-fraseis .w2{animation:swap 4s ease infinite reverse}
@keyframes swap{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
.art-zevgaria .c{animation:cflip 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes cflip{0%,20%{transform:scaleX(1)}30%{transform:scaleX(0)}40%,70%{transform:scaleX(1)}80%{transform:scaleX(0)}90%,100%{transform:scaleX(1)}}
.art-zevgaria .c .f{animation:cface 3.6s steps(1) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes cface{0%,29%{opacity:0}30%,79%{opacity:1}80%,100%{opacity:0}}
.art-taxinomisi .fish{animation:swim 7s linear infinite}
@keyframes swim{from{transform:translateX(-60px)}to{transform:translateX(320px)}}
.art-taxinomisi .fish2{animation:swim 9s linear infinite 2.5s;transform:translateX(-60px)}

/* ── κινητό, όσο γράφει ο παίκτης: ο πίνακας κολλάει στο ορατό μέρος, σε συμπαγή μορφή ── */
.g-typing .ghud{position:fixed;top:0;z-index:60;margin:0;border-radius:0 0 .8rem .8rem;padding:.35rem .7rem .55rem;
  grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"rank meta score";gap:.2rem .6rem;
  box-shadow:0 8px 22px rgba(11,20,38,.4);will-change:transform}
.g-typing .ghud .hname small,.g-typing .ghud .hprog,.g-typing .ghud .hshare,.g-typing .ghud .k{display:none}
.g-typing .ghud .gbadge{width:40px;height:30px}
.g-typing .ghud .hname b{font-size:1.02rem}
.g-typing .ghud .hscore b{font-size:1.55rem}
.g-typing .ghud .hmeta{flex-direction:column;align-items:flex-end;gap:0}
.g-typing .ghud .hmeta small{display:none}
.g-typing .ghud .anchors svg{width:18px;height:18px}
.g-typing .ghud .hwave{height:6px}
.ghud-ph{pointer-events:none}

/* ── ΓΥΡΟΣ ΤΗΣ ΘΑΛΑΣΣΑΣ ── */
.ykind{margin:.2rem 0 0;text-align:center}
.yclue{font:1.12rem/1.6 var(--serif);text-align:center;margin:.6rem auto .2rem;max-width:40rem;text-wrap:pretty}
@media (max-width:699px){.yclue{font-size:1rem;line-height:1.5}}

/* ── ΑΛΗΘΕΙΑ Ή ΜΥΘΟΣ ── */
#m-clock{margin:.1rem 0 .5rem}
#m-bar{display:block;height:100%;background:#d8a020;transform-origin:left center}
.mstage{display:grid;place-items:center;padding:.3rem 0}
.mcard{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;width:min(100%,30rem);padding:1rem 1.2rem 1.1rem;border-radius:1rem;background:var(--paper);border:1.5px solid var(--rule);box-shadow:0 12px 28px rgba(11,20,38,.16);text-align:center;transition:transform .25s ease,border-color .2s,opacity .3s}
.mcard b{display:block;font:italic 700 clamp(1.5rem,1.2rem + 1.4vw,2.1rem)/1.15 var(--serif);margin:.45rem 0 .35rem;overflow-wrap:anywhere}
.mcard p{margin:0;font:1rem/1.5 var(--sans);color:var(--ink)}
.mcard.drag{cursor:grabbing;transition:none}
.mcard.lean-r{border-color:var(--ok)}.mcard.lean-l{border-color:var(--no)}
.mcard.enter{animation:rise .3s ease-out}
.mcard.fly-r{transform:translateX(120%) rotate(14deg);opacity:0;transition:transform .45s cubic-bezier(.5,0,.8,.4),opacity .45s}
.mcard.fly-l{transform:translateX(-120%) rotate(-14deg);opacity:0;transition:transform .45s cubic-bezier(.5,0,.8,.4),opacity .45s}
.mbtns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.8rem}
.mbtn{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:.8rem .6rem;border-radius:.7rem;font:700 1rem var(--sans);border:2px solid;transition:transform .15s}
.mbtn.no{border-color:var(--no);color:var(--no);background:var(--no-bg)}
.mbtn.yes{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.mbtn:hover{transform:translateY(-1px)}.mbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* κάρτες της σελίδας «Παιχνίδια» */
.art-geografia .globe{transform-box:fill-box;transform-origin:center;animation:bob 4s ease-in-out infinite}
.art-geografia .meri{transform-box:fill-box;transform-origin:center;animation:spinx 6s linear infinite}
.art-geografia .pin{animation:pinpulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes spinx{to{transform:scaleX(-1)}}
@keyframes pinpulse{50%{transform:scale(1.6)}}
.art-alitheia .tfc{transform-box:view-box;transform-origin:130px 110px;animation:tilt 4s ease-in-out infinite}
.art-alitheia .tfn{animation:glowl 4s ease-in-out infinite}.art-alitheia .tfy{animation:glowr 4s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:none}25%{transform:rotate(-12deg) translateX(-18px)}35%,65%{transform:none}75%{transform:rotate(12deg) translateX(18px)}}
@keyframes glowl{0%,15%,35%,100%{opacity:.35}25%{opacity:1}}
@keyframes glowr{0%,65%,85%,100%{opacity:.35}75%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mcard.enter,.mcard.fly-r,.mcard.fly-l,.mbtn{animation:none!important;transition:none!important}}

/* ── σελίδα «Παιχνίδια»: ανάλυση, κοινοποίηση, κάρτες που προκαλούν ── */
.hub-share{margin:0 0 1.6rem}
.hub-h{font:700 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .6rem}
.h-break{list-style:none;padding:0;margin:0;display:grid;gap:.35rem;max-width:40rem}
.h-break li{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr) 4.5rem;gap:.8rem;align-items:center;font:500 .9rem var(--sans)}
.h-break a{color:var(--ink);text-decoration:none}.h-break a:hover{color:var(--gold-ink)}
.hb-bar{height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.hb-bar i{display:block;height:100%;background:#d8a020;border-radius:4px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.h-break b{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:520px){.h-break li{grid-template-columns:minmax(0,1fr) 4rem;row-gap:.15rem}.hb-bar{grid-column:1 / -1;order:3}}
.hub-btns{margin-top:.9rem}
.hg{position:relative;isolation:isolate;transform-origin:center bottom}
.hg:hover,.hg:focus-visible{transform:translateY(-6px) scale(1.015);box-shadow:0 18px 38px rgba(11,20,38,.28),0 0 0 2px #d8a020}
.hg:active{transform:translateY(-2px) scale(.99)}
.hg .art svg{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hg:hover .art svg,.hg:focus-visible .art svg{transform:scale(1.08)}
.hg .art::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .8s ease}
.hg:hover .art::before,.hg:focus-visible .art::before{left:130%}
.hg .cta{margin:.45rem 1rem 0;align-self:flex-start;font:700 .85rem var(--sans);color:#192f5b;background:#d8a020;border-radius:999px;padding:.5rem 1rem;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.hg .cta i{display:inline-block;font-style:normal;transition:transform .25s ease}
.hg:hover .cta,.hg:focus-visible .cta{transform:scale(1.06);background:#f0b52a;box-shadow:0 6px 18px rgba(216,160,32,.5)}
.hg:hover .cta i,.hg:focus-visible .cta i{transform:translateX(5px)}
/* κεντραρισμένη λίστα βαθμών */
.gladder{margin-left:auto;margin-right:auto;text-align:center}
.gladder .note{max-width:40rem;margin-left:auto;margin-right:auto}
.gladder ol{grid-template-columns:repeat(auto-fill,9.5rem);justify-content:center}
.gladder li{align-items:center;text-align:center}
@media (prefers-reduced-motion:reduce){.hg .art svg,.hg .art::before,.hg .cta,.hg .cta i,.hb-bar i{transition:none!important}.zshow{animation:none!important}}

@media (prefers-reduced-motion:reduce){
  .hwave,.hg .art::after,.art *,.gbadge.stamp,.gmask b.flip,.shake,.gover:not([hidden]),.fx-rose,.fx-bubble,.fx-flag,
  .pm-route.draw,.pm-home.lit .pm-light,.fblank,.tcard.enter,.tbin.hit,.tbin.show,.tbin.miss{animation:none!important}
  .pm-route{stroke-dashoffset:0}
  .hprog svg,.hprog i,.ar-needle,.zc-in,.tcard,.hg{transition:none!important}
}

/* ══ ΓΥΑΛΙ ΣΤΑ ΠΑΙΧΝΙΔΙΑ ════════════════════════════════════════════════════════ */
.glevel button,.opt,.tbin,.hg,.hub-more a.mini,.h-break li{
  background:linear-gradient(180deg,var(--gl-top),var(--gl-bot));border:1px solid var(--gl-bd);
  box-shadow:inset 0 1px 0 var(--gl-hi),0 4px 14px var(--gl-sh);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%)}
.glevel button{border-radius:.8rem;transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease}
.glevel button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gold) 70%,transparent);box-shadow:inset 0 1px 0 var(--gl-hi),0 8px 22px var(--gl-sh2)}
.glevel button[aria-checked="true"]{background:linear-gradient(180deg,#27427c,#192f5b);border-color:color-mix(in srgb,var(--gold) 60%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(25,47,91,.3)}
.opt{border-radius:.8rem}
.opt:hover:not(:disabled){box-shadow:inset 0 1px 0 var(--gl-hi),0 8px 22px var(--gl-sh2)}
.opt.right{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 22%,transparent),var(--ok-bg))}
.opt.wrong{background:linear-gradient(180deg,color-mix(in srgb,var(--no) 20%,transparent),var(--no-bg))}
.tbin{border-style:solid;border-width:1px}
.tbin.near{border-color:var(--gold)}
.ghud{background:linear-gradient(180deg,#223c73,#192f5b);border:1px solid rgba(216,160,32,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(11,20,38,.3)}
.hshare{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.h-break li{padding:.45rem .7rem;border-radius:.7rem;box-shadow:inset 0 1px 0 var(--gl-hi)}
.hg{border-radius:1rem}
.hub-career{background:linear-gradient(180deg,#223c73,#192f5b);border:1px solid rgba(216,160,32,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px rgba(11,20,38,.28)}
.mcard,.tcard,.gcard{box-shadow:inset 0 1px 0 var(--gl-hi),0 10px 26px var(--gl-sh)}
/* η λίστα όλων των παιχνιδιών: το τωρινό τονισμένο */
.hub-more a.mini{position:relative;border-radius:.9rem}
.hub-more a.mini.on{border:1.5px solid var(--gold);box-shadow:inset 0 1px 0 var(--gl-hi),0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent),0 8px 22px var(--gl-sh2)}
.hub-more a.mini.on .art{box-shadow:inset 0 -3px 0 var(--gold)}
.hub-more a.mini .now{position:absolute;top:.4rem;left:.4rem;font:700 .62rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;font-style:normal;
  color:#192f5b;background:#d8a020;border-radius:999px;padding:.3rem .5rem;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.hub-more a.mini.on b{color:var(--gold-ink)}

/* ════════════════════════════════════════════════════════════════════════════
   ΧΕΙΡΙΣΤΗΡΙΑ: ΔΥΣΚΟΛΙΑ, ΠΕΔΙΟ, ΠΑΡΕΑ, ΡΥΘΜΙΣΕΙΣ
   Η γραμμή του καπετάνιου: ορειχάλκινα κουμπιά πάνω σε βαθύ μπλε, με τη
   σειρά που τα χρειάζεσαι. Κάθε σειρά έχει το όνομά της αριστερά, όπως
   γράφονται τα πεδία σε ναυτικό χάρτη.
   ════════════════════════════════════════════════════════════════════════════ */
.gcontrols{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.grow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.grow .gk{font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);
  min-width:4.6rem;opacity:.85}
.grow .ghelp{font:500 .74rem/1.3 var(--sans);color:var(--muted);flex:1 1 12rem}
.gfields,.gparty{display:flex;flex-wrap:wrap;gap:.35rem;flex:1 1 auto}
.gfields button,.gparty button{font:600 .78rem/1 var(--sans);padding:.44rem .7rem;border-radius:999px;cursor:pointer;
  color:var(--ink);background:color-mix(in srgb,var(--navy) 12%,transparent);border:1px solid var(--rule)}
.gfields button:hover,.gparty button:hover{border-color:var(--gold)}
.gfields button[aria-checked="true"],.gparty button[aria-checked="true"]{
  background:linear-gradient(180deg,#e2b04a,#b8860b);border-color:#8a6508;color:#17223d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.gparty button{min-width:2.6rem}
.gscope{margin:.2rem 0 .8rem;font:500 .84rem/1.45 var(--sans);color:var(--muted);
  border-left:3px solid var(--gold);padding:.35rem .7rem;background:color-mix(in srgb,var(--navy) 10%,transparent);
  border-radius:0 .35rem .35rem 0}
.gscope b{color:var(--ink)}

/* Ρυθμίσεις: το τιμόνι ανοίγει ένα συρτάρι με πέντε διακόπτες. */
/* Ο πίνακας (HUD) είναι κολλητός με z-index:30, οπότε το συρτάρι πρέπει να
   στέκεται ΠΑΝΩ και από αυτόν, αλλιώς το σκορ τρυπάει μέσα από τις ρυθμίσεις. */
.gset{position:relative;margin-left:auto;z-index:70}
.gset-b{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  color:var(--gold-ink);background:color-mix(in srgb,var(--navy) 14%,transparent);border:1px solid var(--rule)}
.gset-b svg{width:1.3rem;height:1.3rem;transition:transform .5s cubic-bezier(.3,0,.2,1)}
.gset-b:hover svg{transform:rotate(45deg)}
.gset-b[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.gset-p{position:absolute;right:0;top:calc(100% + .45rem);z-index:70;width:min(19rem,82vw);
  background:var(--paper);border:1px solid var(--gold);border-radius:.7rem;padding:.4rem;
  box-shadow:0 18px 44px rgba(4,10,24,.42);display:flex;flex-direction:column;gap:.15rem}
.gset-p button{display:grid;grid-template-columns:1fr 2.5rem;grid-template-rows:auto auto;align-items:center;gap:.12rem .7rem;
  padding:.5rem .6rem;border:0;border-radius:.5rem;background:none;color:var(--ink);cursor:pointer;text-align:left}
.gset-p button b{grid-area:1/1;font:700 .86rem/1.2 var(--sans)}
.gset-p button small{grid-area:2/1;font:500 .74rem/1.3 var(--sans);color:var(--muted)}
.gset-p button i{grid-area:1/2/3/3;align-self:center;width:2.5rem;height:1.4rem;border-radius:999px;background:var(--rule);position:relative;
  transition:background .18s}
.gset-p button i::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--bg);transition:transform .18s}
.gset-p button[aria-checked="true"] i{background:linear-gradient(180deg,#e2b04a,#b8860b)}
.gset-p button[aria-checked="true"] i::after{transform:translateX(1.1rem)}
.gset-p button:hover{background:color-mix(in srgb,var(--navy) 10%,transparent)}

/* ── ΟΙ ΡΥΘΜΙΣΕΙΣ ΟΠΩΣ ΤΙΣ ΒΛΕΠΕΙ Η ΣΕΛΙΔΑ ── */
[data-g-big] .gboard{font-size:1.12em}
[data-g-big] .gclue,[data-g-big] .fphrase,[data-g-big] #x-sense,[data-g-big] .yclue{font-size:1.2em}
[data-g-contrast] .gboard .opt,[data-g-contrast] .gfields button,[data-g-contrast] .gparty button{border-width:2px}
[data-g-contrast] .gboard{--rule:#d8a020}
[data-g-contrast] .gfeed.ok{outline:2px solid #7cc79a;outline-offset:2px}
[data-g-contrast] .gfeed.no{outline:2px solid #ef8f80;outline-offset:2px}
[data-g-calm] *,[data-g-calm] *::before,[data-g-calm] *::after{animation:none!important;transition:none!important}
[data-g-focus] header.top,[data-g-focus] footer,[data-g-focus] .hub-more,[data-g-focus] .gladder,
[data-g-focus] .crumbs,[data-g-focus] .lede{opacity:.12;filter:grayscale(1)}
[data-g-focus] header.top:focus-within,[data-g-focus] footer:focus-within{opacity:1;filter:none}
[data-g-focus] .gboard{box-shadow:0 0 0 100vmax rgba(5,10,22,.35)}

/* ── Η ΚΟΥΡΤΙΝΑ ΤΗΣ ΠΑΡΕΑΣ ── η επόμενη ερώτηση δεν διαβάζεται από τον προηγούμενο */
.gpass{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:1.2rem;border-radius:.9rem;
  background:rgba(8,16,34,.93);backdrop-filter:blur(3px)}
.gp-in{max-width:22rem;text-align:center;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.gp-k{font:700 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#d8a020}
.gp-in b{font:italic 700 2.1rem/1.1 var(--serif);color:#f4efe2}
.gp-in p{margin:0;font:600 .85rem/1.5 var(--sans);color:#9aa6bd}
.gp-in .btn{margin-top:.4rem}

/* ── Η ΚΑΡΤΕΛΑ ΤΗΣ ΠΡΟΑΓΩΓΗΣ ── το σήμα μεγάλο, μια φορά, και φεύγει μόνο του */
.gpromo{position:absolute;inset:0;z-index:42;display:grid;place-items:center;pointer-events:auto;border-radius:.9rem;
  background:radial-gradient(circle at center,rgba(9,18,38,.86),rgba(9,18,38,.62))}
.pc-in{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.4rem 2rem;
  background:linear-gradient(180deg,#14284f,#0d1c39);border:1px solid #d8a020;border-radius:1rem;
  box-shadow:0 24px 60px rgba(3,8,20,.6);animation:pc-in .5s cubic-bezier(.2,1.2,.3,1)}
.gpromo.still .pc-in{animation:none}
.pc-b{width:6.2rem;display:block}
.pc-b svg{width:100%;height:auto}
.pc-t{font:700 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#d8a020;margin-top:.5rem}
.pc-r{font:italic 700 1.7rem/1.2 var(--serif);color:#f4efe2}
@keyframes pc-in{from{opacity:0;transform:scale(.8) translateY(14px)}to{opacity:1;transform:none}}

/* ── Η ΚΑΤΑΤΑΞΗ ΤΗΣ ΠΑΡΕΑΣ ── */
.gstand{margin:0 0 1rem;text-align:left}
.gstand b{display:block;font:700 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.5rem}
.gstand ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.gstand li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem .7rem;border-radius:.4rem;
  background:color-mix(in srgb,var(--navy) 12%,transparent);font:600 .9rem/1 var(--sans)}
.gstand li.win{background:linear-gradient(90deg,rgba(216,160,32,.28),transparent);border-left:3px solid var(--gold)}

/* ── ΤΑ ΤΡΙΑ ΝΕΑ ΠΑΙΧΝΙΔΙΑ ── */
.vk{margin:0;font:700 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);text-align:center}
.vshort{margin:.5rem 0 1rem;text-align:center;font:italic 700 clamp(2.4rem,9vw,3.6rem)/1 var(--serif);color:var(--ink);
  letter-spacing:.02em}
.ok-k{margin:0;font:700 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);text-align:center}
.ok-root{margin:.45rem 0 .2rem;text-align:center;font:italic 700 clamp(1.8rem,6vw,2.6rem)/1.1 var(--serif)}
.ok-gloss{margin:0 auto 1rem;max-width:34rem;text-align:center;font:400 .92rem/1.5 var(--sans);color:var(--muted)}
.okgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9.5rem,100%),1fr));gap:.55rem}
.okgrid .opt{width:100%;font:600 1rem/1.2 var(--sans);padding:.9rem .6rem}
#x-card .chip{display:inline-block;margin-bottom:.6rem}
#x-sense{margin:0;font:400 1.05rem/1.6 var(--serif)}
.art-vraxygrafies .vgrow{animation:vgrow 3.4s ease-in-out infinite}
@keyframes vgrow{0%,28%{opacity:0;transform:translateY(6px)}40%,88%{opacity:1;transform:none}100%{opacity:0}}
.art-oikogeneies .okn{animation:okn 3s ease-in-out infinite;animation-delay:calc(var(--i)*.22s)}
.art-oikogeneies .okx{animation:okx 3s ease-in-out infinite}
@keyframes okn{0%,40%{opacity:.25}55%,100%{opacity:1}}
@keyframes okx{0%,55%{opacity:.2;transform:none}70%,100%{opacity:1;transform:translateX(-6px)}}
.art-metafora .mwave{animation:mwave 4s ease-in-out infinite}
.art-metafora .mhead{animation:mhead 4s ease-in-out infinite}
@keyframes mwave{0%,45%{opacity:1}55%,100%{opacity:.25}}
@keyframes mhead{0%,45%{opacity:.25}55%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .art-vraxygrafies .vgrow,.art-oikogeneies .okn,.art-oikogeneies .okx,.art-metafora .mwave,.art-metafora .mhead{animation:none}
  .pc-in{animation:none}
}
@media (max-width:560px){
  .grow .gk{min-width:100%}
  /* Στο κινητό το τιμόνι κάθεται αριστερά, οπότε το συρτάρι ανοίγει ΠΡΟΣ ΤΑ ΔΕΞΙΑ·
     με right:0 έβγαινε έξω από την οθόνη. */
  .gset{margin-left:0}
  .gset-p{right:auto;left:0;width:min(19rem,calc(100vw - 2rem))}
}

/* ── ΠΩΣ ΠΑΙΖΕΤΑΙ ── η εξήγηση πάνω από το ταμπλό, ανοιχτή την πρώτη φορά,
   και κλείνει με ένα κλικ για όποιον την ξέρει. */
.ghow{margin:0 0 .9rem;border:1px solid var(--rule);border-radius:.7rem;
  background:color-mix(in srgb,var(--navy) 10%,transparent)}
.ghow>summary{cursor:pointer;list-style:none;padding:.55rem .85rem;font:700 .74rem/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:.5rem}
.ghow>summary::-webkit-details-marker{display:none}
.ghow>summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:auto;transition:transform .2s}
.ghow[open]>summary::after{transform:rotate(225deg)}
.ghow ul{list-style:none;margin:0;padding:.2rem .85rem .85rem;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.ghow li{display:grid;grid-template-columns:1.7rem 1fr;gap:.1rem .6rem;align-items:start}
.ghow li i{grid-row:1/3;color:var(--gold);display:block}
.ghow li i svg{width:1.5rem;height:1.5rem;display:block}
.ghow li b{font:700 .88rem/1.25 var(--sans)}
.ghow li span{font:500 .8rem/1.4 var(--sans);color:var(--muted)}

/* ── Η ΕΝΔΕΙΞΗ ΤΑΧΥΤΗΤΑΣ ── μετράει αντίστροφα πάνω στον πίνακα */
.gspeed{grid-area:share;justify-self:end;align-self:end;font:700 .7rem/1 var(--sans);letter-spacing:.06em;
  padding:.3rem .5rem;border-radius:999px;background:rgba(216,160,32,.16);color:#f0d493;border:1px solid rgba(216,160,32,.5);
  white-space:nowrap;margin-top:.3rem}
.gspeed[data-x="3"]{background:rgba(216,160,32,.3);color:#fff2cf;animation:gsp 1s ease-in-out infinite}
@keyframes gsp{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
[data-g-calm] .gspeed{animation:none}
.g-typing .gspeed{display:none}

/* ── Η ΡΙΖΑ ΤΗΣ ΛΕΞΗΣ ── */
.rz-k{margin:0;font:700 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);text-align:center}
.rz-k b{color:var(--ink);letter-spacing:.06em}
.rz-word{margin:.5rem 0 .3rem;text-align:center;font:italic 700 clamp(2rem,7vw,3rem)/1.05 var(--serif)}
.rz-gloss{margin:0 auto 1.1rem;max-width:36rem;text-align:center;font:400 .95rem/1.5 var(--sans);color:var(--muted)}
.rzopts .rz i{font-style:italic;font-family:var(--serif);font-size:1.06em;letter-spacing:.01em}
.art-riza .rzw{animation:rzw 3.4s ease-in-out infinite}
.art-riza .rzarrow{stroke-dasharray:54;stroke-dashoffset:54;animation:rza 3.4s ease-in-out infinite}
@keyframes rzw{0%,35%{opacity:0}55%,90%{opacity:1}100%{opacity:0}}
@keyframes rza{0%{stroke-dashoffset:54}40%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.art-riza .rzw,.art-riza .rzarrow,.gspeed[data-x="3"]{animation:none}}

/* ── Η ΑΥΛΑΙΑ «ΕΤΟΙΜΟΙ;» ── κανένα παιχνίδι δεν ξεκινάει χωρίς να το ζητήσει
   ο παίκτης, και η ίδια αυλαία κρατάει την παύση. */
.ggate{position:absolute;inset:0;z-index:41;display:grid;place-items:center;padding:1.2rem;border-radius:.9rem;
  background:rgba(8,16,34,.9);backdrop-filter:blur(3px)}
/* Το ταμπλό είναι το πλαίσιο αναφοράς για τις τρεις αυλαίες. */
.gboard{position:relative}
/* Ο πίνακας (HUD) είναι κολλητός με z-index:30 μέσα στο ίδιο ταμπλό, οπότε οι
   αυλαίες στέκονται πιο ψηλά από αυτόν. (Ένας κανόνας αδελφών εδώ είχε κάνει
   την ίδια την αυλαία position:relative και την είχε ρίξει κάτω από το ταμπλό.) */
.gg-in{max-width:23rem;text-align:center;display:flex;flex-direction:column;gap:.55rem;align-items:center;
  background:linear-gradient(180deg,#14284f,#0d1c39);border:1px solid rgba(216,160,32,.7);border-radius:1rem;
  padding:1.6rem 1.8rem;box-shadow:0 24px 60px rgba(3,8,20,.6)}
.gg-k{font:700 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#d8a020}
.gg-in b{font:italic 700 1.6rem/1.2 var(--serif);color:#f4efe2}
.gg-in p{margin:0 0 .3rem;font:500 .86rem/1.5 var(--sans);color:#9aa6bd}
.gg-in .btn{min-width:11rem}
.btn.ghost{background:none;border-color:rgba(244,239,226,.3);color:#cfd6e4}
.btn.ghost:hover{border-color:#d8a020;color:#f4efe2}
.hpause{grid-area:share;justify-self:end;align-self:start;width:2rem;height:2rem;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(244,239,226,.28);background:rgba(244,239,226,.08);color:#f4efe2;cursor:pointer;
  margin-right:2.6rem}
.hpause:hover{border-color:#d8a020;color:#ffe6a8}
.hpause svg{width:.85rem;height:.85rem}
.g-typing .hpause{display:none}

/* ── ΟΙ ΠΑΙΚΤΕΣ ── ονόματα και δυσκολία ανά παίκτη, για να παίζει ο παππούς με
   το εγγόνι στο ίδιο τραπέζι χωρίς να κερδίζει πάντα ο ίδιος. */
.gplayers{border:1px solid var(--rule);border-radius:.7rem;padding:.6rem .8rem;
  background:color-mix(in srgb,var(--navy) 10%,transparent)}
.gplayers>b{display:block;font:700 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.5rem}
.gplayers ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;
  grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.gplayers li{display:grid;grid-template-columns:1.5rem minmax(0,1fr) minmax(0,9rem);gap:.4rem;align-items:center}
.gplayers .pl-n{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
  background:linear-gradient(180deg,#e2b04a,#b8860b);color:#17223d;font:700 .78rem/1 var(--sans)}
.gplayers input,.gplayers select{font:600 .84rem/1 var(--sans);padding:.42rem .5rem;border-radius:.4rem;
  border:1px solid var(--rule);background:var(--bg);color:var(--ink);min-width:0}
.gplayers small{display:block;margin-top:.5rem;font:500 .74rem/1.4 var(--sans);color:var(--muted)}

/* ── ΛΕΙΤΟΥΡΓΙΑ TABLET ── μια συσκευή στη μέση του τραπεζιού: όλα μεγαλύτερα,
   τα κουμπιά χοντρά, οι αυλαίες πιο καθαρές από μακριά. */
[data-g-tablet] .gboard{font-size:1.2em}
[data-g-tablet] .gboard .opt,[data-g-tablet] .gboard .btn,[data-g-tablet] .tbin,[data-g-tablet] .mbtn{min-height:3.6rem;font-size:1.06em;padding:.9rem 1.1rem}
[data-g-tablet] .okgrid .opt,[data-g-tablet] .popts .opt{min-height:4rem}
[data-g-tablet] .gclue,[data-g-tablet] .fphrase,[data-g-tablet] #x-sense,[data-g-tablet] .yclue,[data-g-tablet] .rz-gloss{font-size:1.15em}
[data-g-tablet] .vshort,[data-g-tablet] .rz-word{font-size:clamp(2.6rem,7vw,4rem)}
[data-g-tablet] .gg-in{max-width:30rem;padding:2.2rem 2.4rem}
[data-g-tablet] .gg-in b{font-size:2.1rem}
[data-g-tablet] .gp-in b{font-size:2.6rem}
[data-g-tablet] .gp-in .btn,[data-g-tablet] .gg-in .btn{min-width:14rem;min-height:3.6rem}
[data-g-tablet] .gfields button,[data-g-tablet] .gparty button{padding:.6rem .95rem;font-size:.9rem}
@media (min-width:820px){[data-g-tablet] .gboard{max-width:52rem;margin-inline:auto}}

/* ── Η ΣΚΗΝΗ ── οι αυλαίες σκεπάζουν ΜΟΝΟ την κάρτα του παιχνιδιού: ο πίνακας,
   η δυσκολία και το πεδίο μένουν ορατά και πατιούνται. Όσο η αυλαία είναι πάνω,
   η ερώτηση από κάτω είναι κρυμμένη, γιατί αλλιώς διαβάζεται πριν το «Ξεκινήστε». */
.gstage{position:relative;min-height:12rem}
.gstage.veiled>#g-play,.gstage.veiled>.gcard{visibility:hidden}
.gstage .gpass,.gstage .ggate,.gstage .gpromo{border-radius:.9rem}

/* ── ΚΕΝΤΡΑΡΙΣΜΑ ── Η κάρτα του παιχνιδιού κρατάει σταθερό ύψος και κεντράρει
   το περιεχόμενό της κάθετα: αλλιώς κάθε ερώτηση με διαφορετικό μήκος μετακινεί
   τα κουμπιά, και τα παιχνίδια μοιάζουν ξεχαρβαλωμένα μεταξύ τους. */
.gstage{min-height:clamp(18rem,46vh,27rem);display:flex}
.gstage>#g-play{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  gap:.45rem;min-height:clamp(18rem,46vh,27rem)}
.gstage>#g-play>*{margin-left:auto;margin-right:auto;width:100%;max-width:44rem}
.gstage>#g-play>.gform{display:flex}
#g-play .gfeed{min-height:1.4em}
#g-play .pety,#g-play .tgloss{min-height:1.2em}
.gcard.gover{margin-top:1rem}
@media (max-width:560px){
  .gstage,.gstage>#g-play{min-height:clamp(16rem,52vh,24rem)}
}

/* ── ΕΥΘΥΓΡΑΜΜΙΣΗ ── Το ταμπλό ήταν 44rem και ό,τι ερχόταν από κάτω (οι κάρτες
   των άλλων παιχνιδιών, οι βαθμοί) έπιανε ολόκληρο το 72rem της σελίδας: δύο
   διαφορετικά πλάτη, το ένα κάτω από το άλλο, και η σελίδα έμοιαζε στραβή.
   Μία στήλη για όλη τη σελίδα του παιχνιδιού. */
.wrap.game>.lede,.wrap.game>.crumbs,.gboard,.wrap.game>.hub-more,.wrap.game>.gladder,
.wrap.game>.gtitle{max-width:44rem;margin-left:auto;margin-right:auto}
/* Η στήλη είναι 44rem μέσα σε σελίδα 72rem: χωρίς αυτό καθόταν αριστερά και σε
   φαρδιά οθόνη έμοιαζε ξεκρέμαστη. Τώρα η στήλη είναι στο κέντρο της οθόνης. */
/* Στη σελίδα «Παιχνίδια» ο πίνακας των πόντων ακολουθεί την κάρτα της καριέρας. */
.h-break{max-width:none}

/* ── ΚΡΕΜΑΛΑ, ΝΑΥΤΙΚΗ ΕΚΔΟΣΗ ── αντί για κρεμάλα, ένα καράβι που βουλιάζει όσο
   χάνονται οι άγκυρες, και ένα αλφάβητο για να διαλέγει γράμματα ο παίκτης. */
.lxship{--sink:0;display:block;margin:0 auto .4rem;max-width:15rem}
.lxship svg{display:block;width:100%;height:auto;overflow:visible}
.lxship .hull{fill:none;stroke:#f4efe2;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
  transform:translateY(calc(var(--sink) * 26px)) rotate(calc(var(--sink) * -8deg));
  transform-origin:108px 70px;transition:transform .5s cubic-bezier(.3,0,.2,1);opacity:calc(1 - var(--sink) * .45)}
.lxship .hull path:nth-child(2){stroke:#d8a020}
.lxship .sea{fill:#264a86;opacity:.85}
.lxship.gone .hull{opacity:.18}
[data-g-calm] .lxship .hull{transition:none}
.gmask{display:flex;flex-wrap:wrap;gap:.3rem;align-items:baseline;justify-content:center;margin:.8rem 0 1rem;
  font:italic 700 clamp(1.6rem,5.4vw,2.4rem)/1.2 var(--serif);letter-spacing:.06em}
.gmask b{min-width:1.1em;text-align:center;border-bottom:2px solid var(--rule);padding:0 .06em}
.gmask b.on{color:var(--gold-ink);border-color:var(--gold)}
.gmask b.off{color:transparent}
.gmask .sp{opacity:.6}
.gmask small{display:block;width:100%;text-align:center;font:600 .68rem/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.gkeys{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.3rem,1fr));gap:.3rem;margin:0 auto 1rem;max-width:32rem}
.gkey{font:700 1rem/1 var(--serif);padding:.62rem .2rem;border-radius:.4rem;cursor:pointer;
  border:1px solid var(--rule);background:color-mix(in srgb,var(--navy) 14%,transparent);color:var(--ink)}
.gkey:hover:not(:disabled){border-color:var(--gold);color:var(--gold-ink)}
.gkey.hit{background:linear-gradient(180deg,#e2b04a,#b8860b);border-color:#8a6508;color:#17223d}
.gkey.miss{opacity:.32;text-decoration:line-through}
.gkey:disabled{cursor:default}
.gword{max-width:26rem;margin:0 auto}
[data-g-tablet] .gkey{padding:.9rem .2rem;font-size:1.15rem}

/* Οι επιλογές των βραχυγραφιών: η συντομογραφία μεγάλη, η ανάπτυξη από κάτω. */
.vclue{margin:.6rem auto 1.2rem;max-width:36rem;text-align:center;font:400 1.08rem/1.6 var(--serif)}
.vxopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr));gap:.5rem}
.vxopts .opt{display:flex;flex-direction:column;gap:.15rem;align-items:center;padding:.7rem .6rem;width:100%}
.vxopts .opt b{font:italic 700 1.15rem/1.1 var(--serif);color:var(--gold-ink)}
.vxopts .opt small{font:500 .74rem/1.25 var(--sans);color:var(--muted);text-align:center}
.vxopts .opt.right b,.vxopts .opt.right small{color:inherit}

/* Τα νούμερα των απαντήσεων: πατιούνται και από το αριθμητικό πληκτρολόγιο. */
.okey{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;margin-right:.45rem;border-radius:.28rem;
  background:rgba(216,160,32,.18);border:1px solid rgba(216,160,32,.45);color:var(--gold-ink);
  font:700 .7rem/1 var(--sans);font-style:normal;flex:0 0 auto}
.vxopts .okey,.okgrid .okey{margin:0 0 .25rem}
.gkey .okey{display:none}
.tbin .okey{position:absolute;top:.3rem;left:.3rem;margin:0}
.tbin{position:relative}
.mbtn .okey{margin-right:.4rem}
.gform.solo{max-width:30rem}

/* Η υπενθύμιση των πλήκτρων: μόνο εκεί που υπάρχει αληθινό πληκτρολόγιο. */
.gkeyhint{display:none;margin:.6rem 0 0;text-align:center;font:500 .76rem/1.4 var(--sans);color:var(--muted)}
.gkeyhint b{display:inline-block;min-width:1.2rem;padding:.1rem .3rem;margin:0 .1rem;border-radius:.25rem;
  border:1px solid var(--rule);background:color-mix(in srgb,var(--navy) 14%,transparent);color:var(--ink);
  font:700 .72rem/1.3 var(--sans)}
@media (hover:hover) and (pointer:fine){.gkeyhint{display:block}}

/* ── ΤΑ ΚΟΥΜΠΙΑ ΧΩΡΑΝΕ ΤΟ ΚΕΙΜΕΝΟ ΤΟΥΣ ──
   Το «all: unset» του .opt έφερνε μαζί του white-space:normal, αλλά οι στήλες
   του πλέγματος ήταν στενές (8.5rem) και λέξεις σαν «Τραμουντάνα» ή
   «Μαϊστροτραμουντάνα» κόβονταν στη μέση. Τώρα η στήλη ανοίγει όσο χρειάζεται,
   η λέξη σπάει αν δεν χωράει, και τα γράμματα μικραίνουν λίγο στα στενά. */
.popts{grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr))}
.popts .opt,.okgrid .opt,.vxopts .opt,.mbtn,.tbin{
  white-space:normal;overflow-wrap:anywhere;word-break:normal;hyphens:auto;min-width:0}
.popts .opt{display:flex;align-items:center;justify-content:center;gap:.1rem;
  min-height:3.1rem;font-size:clamp(.82rem,.72rem + .35vw,.98rem);line-height:1.2}
.okgrid .opt,.vxopts .opt{min-height:3.4rem}
.gkeys{grid-template-columns:repeat(auto-fit,minmax(2.6rem,1fr))}
@media (max-width:420px){
  .popts{grid-template-columns:repeat(auto-fit,minmax(min(8.5rem,100%),1fr))}
  .popts .opt{font-size:.82rem}
}


/* Το «Δείτε τις λέξεις» είναι κεντραρισμένο με transform· το hover του .btn
   έγραφε ΑΠΟ ΠΑΝΩ δικό του transform και το κουμπί πεταγόταν στη γωνία.
   (Σχόλιο του George: «δείτε τις λέξεις is moving around on mouse hover».) */
.zshow,.zshow:hover,.zshow:focus-visible{transform:translate(-50%,-50%)}
.zshow:hover{box-shadow:0 14px 32px rgba(11,20,38,.45);border-color:var(--gold)}

/* Οι σημασίες ως απαντήσεις: κείμενο, όχι ταμπέλα. */
.vxopts .opt.vsense{display:block;text-align:left;font:400 .92rem/1.45 var(--serif);padding:.75rem .85rem}
.vsense .okey{float:left;margin:.1rem .5rem 0 0}
.rzw{font:italic 600 1.05rem/1.2 var(--serif)}
.rz-word{font-style:normal;font-family:var(--sans);font-weight:600;letter-spacing:.01em}

/* ── ΣΗΜΑΤΑ ΜΕ ΣΗΜΑΙΕΣ ── */
.sq{margin:0 0 .7rem;text-align:center;font:600 1rem/1.4 var(--sans);color:var(--ink)}
/* Ίδιο κάδρο για κάθε σημαία: 3:2, σταθερό πλάτος, καμία αναπήδηση. */
.sflag{margin:0 auto 1rem;width:min(15rem,62%);aspect-ratio:3/2;display:grid;place-items:center}
.sflag svg{display:block;width:100%;height:100%;border-radius:.2rem;box-shadow:0 8px 22px rgba(6,14,32,.4)}
.sflags .sfl{aspect-ratio:3/2;display:grid;place-items:center}
.sflags .sfl svg{height:100%}
.smean{text-align:left;font:400 .92rem/1.4 var(--sans)}
.sflags{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9rem,45%),1fr));gap:.6rem}
.sflags .sfl{padding:.5rem}
.sflags .sfl svg{display:block;width:100%;height:auto;border-radius:.2rem}
.sfl-in{display:inline-block;width:2.6rem;vertical-align:middle;margin-right:.4rem}
.sfl-in svg{display:block;width:100%;height:auto;border-radius:.15rem}
.art-simata .sgf rect{animation:sgf 3.6s ease-in-out infinite}
.art-simata .sgf rect:nth-child(2){animation-delay:.2s}
.art-simata .sgf rect:nth-child(3){animation-delay:.4s}
.art-simata .sgf rect:nth-child(4){animation-delay:.6s}
@keyframes sgf{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.art-simata .sgf rect{animation:none}}

/* ── ΤΙ ΒΛΕΠΕΙΣ; ── η φωτογραφία του βιβλίου, μεγάλη και καθαρή */
/* Οι 58 φωτογραφίες έχουν διαφορετικές αναλογίες: μπαίνουν σε ΣΤΑΘΕΡΟ κάδρο 4:3
   και χωράνε ολόκληρες μέσα του, αλλιώς το ταμπλό μεγάλωνε και μίκραινε σε κάθε
   ερώτηση. (Σχόλιο του George: «entire ui is moving and expanding».) */
.eshot{margin:0 auto 1rem;width:min(22rem,100%);aspect-ratio:4/3;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--rule);border-radius:.6rem;padding:.5rem}
.eshot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:.35rem}
.art-eikones .elens{animation:elens 3.4s ease-in-out infinite}
@keyframes elens{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,8px)}}
/* ── ΜΕΓΕΘΗ ── */
.mbig{font:600 1.02rem/1.25 var(--serif);font-style:italic}
.art-megethi .mscale{animation:msc 3.2s ease-in-out infinite;transform-origin:130px 40px}
@keyframes msc{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.art-eikones .elens,.art-megethi .mscale{animation:none}}

/* ── ΝΑΥΜΑΧΙΑ ── το πλέγμα, και η ερώτηση που ανοίγει πάνω του */
.ngrid{--n:6;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.28rem;max-width:26rem;margin:0 auto}
.nv{aspect-ratio:1;border-radius:.3rem;border:1px solid var(--rule);cursor:pointer;
  background:color-mix(in srgb,var(--navy) 22%,transparent);color:var(--gold);font:700 1rem/1 var(--sans)}
.nv:hover:not(:disabled){border-color:var(--gold);background:color-mix(in srgb,var(--navy) 34%,transparent)}
.nv.hit{background:linear-gradient(180deg,#c8202e,#8d1420);border-color:#8d1420;color:#fff}
.nv.miss{background:color-mix(in srgb,var(--navy) 10%,transparent);color:var(--muted);opacity:.6}
.nv.ship{background:linear-gradient(180deg,#e2b04a,#b8860b);border-color:#8a6508}
.nv:disabled{cursor:default}
.nleft{margin:.7rem 0 0;text-align:center;font:600 .82rem/1.3 var(--sans);color:var(--muted)}
.nask{margin-top:1rem;padding:.9rem;border:1px solid var(--gold);border-radius:.7rem;
  background:color-mix(in srgb,var(--navy) 16%,transparent)}
.nq p{margin:.3rem 0 .6rem;text-align:center;font:600 .95rem/1.4 var(--sans)}
.nflag{width:7rem;margin:0 auto .4rem}
.nflag svg{display:block;width:100%;height:auto;border-radius:.2rem}
.nword{font:italic 700 1.6rem/1.2 var(--serif);text-align:center;margin:.2rem 0 .3rem}
.art-naymaxia .nhit{animation:nhit 2.6s ease-in-out infinite}
@keyframes nhit{0%,60%{opacity:.25;r:4}75%{opacity:1;r:9}100%{opacity:.25;r:4}}
@media (prefers-reduced-motion:reduce){.art-naymaxia .nhit{animation:none}}
.msrc{display:block;margin-top:.35rem;font:500 .74rem/1.4 var(--sans);color:var(--muted)}

/* ════════════════════════════════════════════════════════════════════════════
   ΑΠΛΟΥΣΤΕΥΣΗ, 1 Οκτ 2026 (George: «simplify the gaming ui … best experience on
   each device»). Η ερώτηση είναι η σελίδα: οι ρυθμίσεις ξεκινούν από προεπιλογές
   και απέχουν ένα πάτημα, ποτέ ανάμεσα στον παίκτη και στο παιχνίδι.
   Κάτω από 900px (κινητό, τάμπλετ όρθιο): γραμμή-περίληψη, φύλλο από κάτω,
   ▶ για πλήρη οθόνη. Από 900px: μία σειρά ρυθμίσεων πάνω από το ταμπλό.
   Τίποτα δίπλα στο ταμπλό (George, 28 Σεπ: «not on the side»).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ΣΕΛΙΔΑ «ΠΑΙΧΝΙΔΙΑ»: πρώτα τα παιχνίδια ── */
.wrap.game.hub>.crumbs{max-width:none}
.hub-top{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem 1.4rem;flex-wrap:wrap}
.hub-ttl{flex:1 1 22rem;min-width:0}
.hub-ttl .gtitle{margin-bottom:.25rem}
.hub-ttl .lede{margin:0}
.hub-line{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .45rem;border-radius:999px;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,#223c73,#192f5b);border:1px solid rgba(216,160,32,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(11,20,38,.22)}
.hub-line .gbadge{width:42px;height:32px}
.hub-line>b{font:italic 700 1.05rem/1 var(--serif);white-space:nowrap}
.hl-p{margin-left:.5rem;font:600 .82rem/1 var(--sans);color:#d8a020;white-space:nowrap}
.hl-p b{font:700 1.05rem/1 var(--sans);color:#fff;font-variant-numeric:tabular-nums}
.hub-line>i{font-style:normal;color:#d8a020;font-size:1.25rem;line-height:1}
.hub-line:hover,.hub-line:focus-visible{border-color:#d8a020}
.hub-line:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:599px){.hub-line{flex:1 1 100%}.hl-p{margin-left:auto}}
.hub-cont{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .8rem;margin:.9rem 0 0;padding:.65rem .9rem;border-radius:.9rem;
  border:1.5px solid var(--gold);background:color-mix(in srgb,var(--navy) 10%,transparent);color:var(--ink);text-decoration:none}
.hub-cont .k{flex:1 1 100%;font:700 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.hub-cont b{flex:1 1 auto;min-width:0;font:italic 700 1.15rem/1.2 var(--serif)}
.hub-cont .cta{font:700 .85rem/1 var(--sans);color:#192f5b;background:#d8a020;border-radius:999px;padding:.5rem .95rem;white-space:nowrap}
.hub-cont:hover .cta,.hub-cont:focus-visible .cta{background:#f0b52a}
.hub-cont:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.9rem}
@media (min-width:600px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.hub-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}}
@media (min-width:1100px){.hub-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hub-grid .hg{gap:.1rem;padding:0 0 .65rem}
.hub-grid .hg .art{height:64px}
@media (min-width:900px){.hub-grid .hg .art{height:84px}}
.hub-grid .hg b{font-size:1rem;line-height:1.2;padding:0 .7rem;margin-top:.45rem;overflow-wrap:anywhere}
.hub-grid .hg .d{display:none}
.hub-grid .hg small{padding:0 .7rem;font-size:.7rem;margin-top:.15rem}
.hub-grid .hg.last{border-color:var(--gold);box-shadow:inset 0 1px 0 var(--gl-hi),0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent)}
.hub-kar{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.hub-kar .hub-h{margin-bottom:.3rem}
.hk-next{margin:0}.hk-next small{font:500 .9rem/1.4 var(--sans);color:var(--muted)}
#h-prog{max-width:40rem;margin:.4rem 0 1.1rem}
#h-prog::before{border-top-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.hub-kar .gladder{margin-top:1.6rem}

/* ── ΣΕΛΙΔΑ ΠΑΙΧΝΙΔΙΟΥ ── */
.gboard{margin-top:.9rem}
.ghow{margin:1rem 0 0}
@media (max-width:599px){
  .game .gtitle{font-size:clamp(1.45rem,6.4vw,1.8rem);line-height:1.15;margin-bottom:.3rem}
  .wrap.game>.lede{font-size:.95rem;line-height:1.45;margin-bottom:0}
}

/* η γραμμή-περίληψη και το φύλλο: μόνο κάτω από 900px */
.gsum{display:none}
.gsheet-h,.gsheet-go{display:none}
@media (max-width:899px){
  .gsum{display:flex;align-items:center;gap:.6rem;width:100%;margin:0 0 .55rem;padding:.55rem .85rem;border-radius:999px;cursor:pointer;text-align:left;
    border:1px solid var(--rule);background:color-mix(in srgb,var(--navy) 12%,transparent);color:var(--ink);font:600 .86rem/1.2 var(--sans)}
  .gsum span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gsum i{font-style:normal;color:var(--gold-ink);font-size:1.05rem}
  .gsum:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .gcontrols{display:none}
  .g-sheet .gcontrols{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;margin:0;gap:.75rem;
    max-height:86vh;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:.5rem 1rem calc(1rem + env(safe-area-inset-bottom));background:var(--bg);
    border-top:2px solid var(--gold);border-radius:1.1rem 1.1rem 0 0;box-shadow:0 -18px 44px rgba(4,10,24,.45)}
  .gscrim{position:fixed;inset:0;z-index:94;background:rgba(5,10,22,.58)}
  .g-sheet body{overflow:hidden}
  .gsheet-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.3rem}
  .gsheet-h b{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
  .gsheet-x{width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;font:600 .95rem/1 var(--sans)}
  .grow .gk{min-width:100%}
  .gfdrop>summary{display:none}
  .gsheet-go{display:flex;justify-content:center;width:100%;margin-top:.2rem;padding:.85rem 1rem;font-size:1rem}
  .gset{margin-left:0}
  .g-sheet .gset-p{position:static;width:auto;margin-top:.4rem;box-shadow:none}
}

/* από 900px: μία σειρά ρυθμίσεων πάνω από το ταμπλό */
@media (min-width:900px){
  .gscrim{display:none!important}
  .gcontrols{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-bottom:.7rem}
  .grow{flex-wrap:nowrap;gap:.45rem}
  .grow .gk{min-width:0}
  .grow .ghelp{display:none}
  .grow-l .glevel{display:flex;gap:0;margin:0}
  .grow-l .glevel button{padding:.42rem .75rem;border-radius:0;margin-left:-1px}
  .grow-l .glevel button:first-child{border-radius:.6rem 0 0 .6rem;margin-left:0}
  .grow-l .glevel button:last-child{border-radius:0 .6rem .6rem 0}
  .grow-l .glevel b{font-size:.84rem;white-space:nowrap}
  .grow-l .glevel small{display:none}
  .gfdrop{position:relative}
  .gfdrop>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;padding:.42rem .8rem;border-radius:.6rem;
    border:1px solid var(--rule);background:color-mix(in srgb,var(--navy) 12%,transparent);font:600 .84rem/1.1 var(--sans);color:var(--ink);white-space:nowrap}
  .gfdrop>summary::-webkit-details-marker{display:none}
  .gfdrop>summary::after{content:"▾";color:var(--gold-ink)}
  .gfdrop[open]>summary,.gfdrop>summary:hover{border-color:var(--gold)}
  .gfdrop>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .gfdrop .gfields{position:absolute;top:calc(100% + .4rem);left:0;z-index:75;width:24rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem;
    padding:.5rem;background:var(--paper);border:1px solid var(--gold);border-radius:.7rem;box-shadow:0 18px 44px rgba(4,10,24,.42)}
  .gfdrop .gfields button{border-radius:.45rem;text-align:left;padding:.5rem .65rem}
  .gset{margin-left:auto}
  .gplayers{flex:1 1 100%}
}

/* ── ▶ ΠΑΙΞΤΕ, ΑΙΩΡΟΥΜΕΝΟ ── μόνο κάτω από 900px */
.gfab{display:none}
@media (max-width:899px){
  .gfab{display:inline-flex;align-items:center;gap:.4rem;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:85;
    padding:.85rem 1.3rem;border:0;border-radius:999px;cursor:pointer;background:#d8a020;color:#192f5b;font:700 1rem/1 var(--sans);
    box-shadow:0 10px 26px rgba(4,10,24,.45),0 0 0 3px rgba(216,160,32,.25)}
  .gfab:focus-visible{outline:2px solid #fff;outline-offset:3px}
}
.g-full .gfab,.g-sheet .gfab{display:none!important}

/* ── ΠΛΗΡΗΣ ΟΘΟΝΗ ── ο πίνακας πάνω, η ερώτηση στη μέση, οι απαντήσεις κάτω */
.gexit{display:none}
/* 🚨 ΤΟ inline-flex ΑΚΥΡΩΝΕΙ ΤΟ text-align ΤΟΥ ΚΟΥΜΠΙΟΥ. Τα υπόλοιπα κουμπιά
   είναι display:block και κεντράρουν το κείμενό τους με text-align:center· αυτό
   εδώ γίνεται δοχείο flex, όπου το text-align δεν ισχύει, και με min-width 11rem
   η λέξη «Έξοδος» κάθισε στην ΑΡΙΣΤΕΡΗ άκρη ενός πλαισίου 176 px.
   (George, σχόλιο στη «Ρεγκάτα», 1 Οκτ 2026: «It is not centered».) */
.g-full .gexit{display:inline-flex;align-items:center;justify-content:center}
.ggate[data-mode="ready"] .gexit{display:none!important}
html.g-full,html.g-full body{overflow:hidden}
.g-full .gboard{position:fixed;inset:0;z-index:90;max-width:none;margin:0;background:var(--bg);display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;padding:0 0 env(safe-area-inset-bottom)}
.g-full .gboard>.gsum,.g-full .gboard>.gcontrols,.g-full .gboard>.ghow,.g-full .gboard>.gkeyhint,.g-full .gboard>.gscrim{display:none!important}
.g-full .gboard>.gchal,.g-full .gboard>.gscope{margin:.5rem .8rem 0}
/* Ο ΣΥΜΠΑΓΗΣ ΠΙΝΑΚΑΣ: βαθμός, άγκυρες, πόντοι, ❚❚ σε μία σειρά. Στην πλήρη
   οθόνη παντού, και μέσα στη σελίδα κάτω από 900px (ήταν 149px ύψος στο κινητό,
   τώρα περίπου 50). Ζωές, πόντοι και βαθμός μένουν ορατά (George, 16 Σεπ). */
.g-full .ghud{position:sticky;top:0;flex:0 0 auto;margin:0;border-radius:0;border-width:0 0 1px;
  padding:calc(.4rem + env(safe-area-inset-top)) .75rem .55rem;box-shadow:0 6px 18px rgba(11,20,38,.35)}
.g-full .ghud{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"rank meta score share";gap:.2rem .6rem}
.g-full .ghud .hname small,.g-full .ghud .hprog,.g-full .ghud .hshare,.g-full .ghud .k,.g-full .ghud .hmeta small{display:none}
.g-full .ghud .gbadge{width:40px;height:30px}
.g-full .ghud .hname b{font-size:1rem}
.g-full .ghud .hscore b{font-size:1.5rem}
.g-full .ghud .hmeta{flex-direction:column;align-items:flex-end;gap:0}
.g-full .ghud .anchors svg{width:17px;height:17px}
.g-full .ghud .hpause{margin-right:0;align-self:center;width:2.3rem;height:2.3rem}
.g-full .ghud .gspeed{position:absolute;right:.75rem;top:calc(100% + .35rem);margin:0}
@media (max-width:899px){
  .ghud{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"rank meta score share";gap:.2rem .6rem;padding:.45rem .75rem .55rem}
  .ghud .hname small,.ghud .hprog,.ghud .hshare,.ghud .k,.ghud .hmeta small{display:none}
  .ghud .gbadge{width:40px;height:30px}
  .ghud .hname b{font-size:1rem}
  .ghud .hscore b{font-size:1.5rem}
  .ghud .hmeta{flex-direction:column;align-items:flex-end;gap:0}
  .ghud .anchors svg{width:17px;height:17px}
  .ghud .hpause{margin-right:0;align-self:center;width:2.3rem;height:2.3rem}
  .ghud .gspeed{position:absolute;right:.75rem;top:calc(100% + .35rem);margin:0;z-index:2}
  .ghud .hwave{height:5px}
  .wrap.game>.crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pmap svg{max-height:30vh;max-height:30svh;width:auto;max-width:100%;margin:0 auto}
}
.g-full .gstage{flex:1 0 auto;min-height:0;padding:.75rem .85rem .9rem}
.g-full .gstage>#g-play{min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;justify-content:flex-start}
.g-full #g-play>.popts,.g-full #g-play>.mbtns,.g-full #g-play>.tbins,.g-full #g-play>.gkeys,.g-full #g-play>.okgrid,.g-full #g-play>.vxopts{margin-top:auto}
.g-full .gstage>.gover{margin:0;flex:1 1 auto}
.g-full .gstage .gpass,.g-full .gstage .ggate,.g-full .gstage .gpromo{border-radius:0}
@media (min-width:900px){.g-full .gstage>#g-play>*,.g-full .gstage>.gover{max-width:44rem;margin-left:auto;margin-right:auto;width:100%}}

/* 🚨 Η κάρτα του παιχνιδιού είναι παιδί flex: χωρίς min-width:0 το πλάτος της το
   όριζε το περιεχόμενο. Στο κινητό το καράβι της κρεμάλας έβγαινε 691px σε οθόνη
   375px και τραβούσε όλη την κάρτα έξω δεξιά (μετρήθηκε 1 Οκτ 2026, και στο live).
   Ο κανόνας «.gstage>#g-play>*{max-width:44rem}» έσβηνε και το 15rem του καραβιού:
   έχει #id, οπότε κάθε όριο σε άμεσο παιδί του #g-play το χρειάζεται κι αυτό. */
.gstage>#g-play,.gstage>.gcard{min-width:0}
.gstage>#g-play>.lxship{max-width:15rem}
/* Τα ίδια όρια ίσχυαν σε όλες τις εικόνες και έσβηναν όλα: η σημαία έβγαινε 443px
   ψηλή στον υπολογιστή αντί για 15rem πλάτος. Τα μεγέθη όπως γράφτηκαν: */
.gstage>#g-play>.sflag{width:min(15rem,62%)}
.gstage>#g-play>.eshot{width:min(22rem,100%)}
.gstage>#g-play>.arose{max-width:330px}
.gstage>#g-play>.ngrid{max-width:26rem}
.g-full .gstage>#g-play>.lxship{max-width:11rem}

/* Στην πλήρη οθόνη οι εικόνες μετριούνται και με το ΥΨΟΣ της οθόνης, ώστε μετά
   την απάντηση το «Επόμενη» να μένει μέσα (μετρήθηκε σε 375×667: η φωτογραφία, η
   σημαία και το πλέγμα της Ναυμαχίας το έσπρωχναν έξω). */
.g-full .gstage>#g-play>.eshot{width:min(22rem,100%,calc(34vh * 4 / 3));width:min(22rem,100%,calc(34svh * 4 / 3))}
.g-full .gstage>#g-play>.sflag{width:min(15rem,62%,calc(22vh * 3 / 2));width:min(15rem,62%,calc(22svh * 3 / 2))}
.g-full .gstage>#g-play>.ngrid{max-width:min(26rem,40vh);max-width:min(26rem,40svh)}
.g-full .gstage>#g-play>.arose{max-width:min(330px,40vh);max-width:min(330px,40svh)}
.g-full .pmap svg{max-height:26vh;max-height:26svh;width:auto;max-width:100%;margin:0 auto}
.g-full .gstage>#g-play>.lxship{max-width:min(11rem,26vh);max-width:min(11rem,26svh)}
.g-full .nask{margin-top:.6rem;padding:.6rem}
/* Ναυμαχία: όσο είναι ανοιχτή η ερώτηση, το πλέγμα μικραίνει για να χωρέσει το αποτέλεσμα. */
.g-full .gstage>#g-play:has(#n-ask:not([hidden]))>.ngrid{max-width:min(26rem,28vh);max-width:min(26rem,28svh)}
.g-full .nflag{width:5.5rem}

/* ── ΚΙΝΗΤΟ ΟΡΙΖΟΝΤΙΑ, ΠΛΗΡΗΣ ΟΘΟΝΗ ── σε 375px ύψος μία στήλη δεν χωράει (μετρήθηκε:
   10 στα 12 παιχνίδια ήθελαν κύλιση). Δύο στήλες: αριστερά η ερώτηση και η εικόνα,
   δεξιά οι απαντήσεις, η απάντηση και το «Επόμενη». Μόνο CSS: ένα ψευδοστοιχείο με
   order:1 και ύψος 100% σπάει τη στήλη, και όσα είναι απαντήσεις παίρνουν order:2. */
@media (orientation:landscape) and (max-height:520px){
  .g-full .gstage{padding:.45rem .9rem .5rem}
  .g-full .gstage>#g-play{display:flex;flex-direction:column;flex-wrap:wrap;align-content:center;justify-content:center;gap:.35rem 1.2rem;
    height:calc(100vh - 3.7rem);height:calc(100svh - 3.7rem - env(safe-area-inset-top))}
  .g-full .gstage>#g-play::after{content:"";order:1;flex-basis:100%;width:0;margin:0}
  .g-full .gstage>#g-play>*{width:calc(50% - .6rem);max-width:none;margin-left:0;margin-right:0}
  .g-full .gstage>#g-play>:is(.popts,.mbtns,.tbins,.gkeys,.gform,.gfeed,.pety,.gnext,.nask,.tgloss,.okgrid,.vxopts,.nleft){order:2;margin-top:0}
  .g-full .gstage>#g-play>.gnext{align-self:flex-end}
  .g-full .gstage>#g-play>.eshot{width:min(calc(50% - .6rem),calc(62vh * 4 / 3));width:min(calc(50% - .6rem),calc(62svh * 4 / 3));align-self:center}
  .g-full .gstage>#g-play>.sflag{width:min(calc(50% - .6rem),calc(48vh * 3 / 2));width:min(calc(50% - .6rem),calc(48svh * 3 / 2));align-self:center}
  .g-full .gstage>#g-play>.ngrid,.g-full .gstage>#g-play:has(#n-ask:not([hidden]))>.ngrid{width:min(calc(50% - .6rem),72vh);width:min(calc(50% - .6rem),72svh);align-self:center}
  .g-full .gstage>#g-play>.arose{width:min(calc(50% - .6rem),64vh);width:min(calc(50% - .6rem),64svh);align-self:center}
  .g-full .gstage>#g-play>.lxship{width:min(calc(50% - .6rem),32vh);width:min(calc(50% - .6rem),32svh);align-self:center}
  .g-full .pmap svg{max-height:56vh;max-height:56svh}
  .g-full .pword,.g-full .rz-word{font-size:1.6rem;margin:.2rem 0}
  .g-full .popts{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-full .pety{font-size:.8rem;line-height:1.35}
  .g-full .gstage>#g-play{height:calc(100vh - 4.3rem);height:calc(100svh - 4.3rem - env(safe-area-inset-top))}
  .g-full .popts .opt{min-height:2.6rem;padding:.45rem .5rem}
  .g-full .gkeys{grid-template-columns:repeat(8,minmax(0,1fr));gap:.22rem;margin:0}
  .g-full .gkey{padding:.42rem .1rem;font-size:.9rem}
  .g-full .gclue{-webkit-line-clamp:4;font-size:.92rem;margin:0}
  .g-full .gmask{margin:.2rem 0;font-size:1.3rem}
  .g-full .tstage{min-height:5rem}
  .g-full .mcard{padding:.7rem .9rem}
  .g-full .mcard b{font-size:1.4rem;margin:.2rem 0}
  .g-full .zgrid{gap:.3rem}
  .g-full .gstage>#g-play>.zwrap{width:min(100%,calc((100svh - 6rem) * 4 / 3 * 4 / 3))}
}

/* ── ΥΠΟΛΟΓΙΣΤΗΣ ── ο πίνακας σε μία σειρά (ήταν 154px ύψος), και από 900px η στήλη
   του παιχνιδιού 52rem, ώστε δυσκολία, πεδίο, παρέα και ρυθμίσεις να χωράνε σε μία
   γραμμή. Όλη η στήλη μαζί, για να μη χαλάσει η ευθυγράμμιση. */
@media (min-width:900px){
  .ghud{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"rank meta score share" "prog prog prog prog";gap:.25rem 1.1rem;padding:.55rem 1rem .7rem}
  .ghud .gbadge{width:60px;height:45px}
  .ghud .hname b{font-size:1.25rem}
  .ghud .hscore b{font-size:2rem}
  .ghud .hmeta{flex-direction:column;align-items:flex-start;gap:.15rem}
  .ghud .hprog{margin-top:.1rem}
  .ghud .hpause{grid-area:share;align-self:center}
  .ghud .hshare{align-self:center}
  .ghud .gspeed{position:absolute;right:1rem;top:calc(100% + .35rem);margin:0;z-index:2}
  .gstage,.gstage>#g-play{min-height:clamp(16rem,38vh,24rem)}
}
@media (min-width:900px){
  .wrap.game>.lede,.wrap.game>.crumbs,.gboard,.wrap.game>.hub-more,.wrap.game>.gladder,.wrap.game>.gtitle{max-width:52rem}
  .wrap.game.hub>.crumbs{max-width:none}
}
@media (min-width:900px){
  .grow-l .gk,.grow-f .gk{display:none}
  .gfdrop>summary::before{content:"Πεδίο";font:700 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
  .gstage>#g-play>.lxship{max-width:9rem}
  .pmap svg{max-height:30vh;width:auto;max-width:100%;margin:0 auto}
  .gstage>#g-play>.zwrap{max-width:34rem}
  .gstage>#g-play>.arose{max-width:min(330px,36vh)}
  .gmask{margin:.4rem 0 .6rem}
}
@media (min-width:900px){.gstage>#g-play:has(#n-ask:not([hidden]))>.ngrid{max-width:min(26rem,30vh)}}
/* Στο φύλλο του κινητού τα τέσσερα επίπεδα έβγαιναν φαρδύτερα από την οθόνη (το
   «Master» κομμένο): ως παιδί flex το πλέγμα έπαιρνε το πλάτος του περιεχομένου. */
@media (max-width:899px){.grow>.glevel,.grow>.gparty,.grow>.gfdrop{flex:1 1 100%;min-width:0}}

/* ════════════════════════════════════════════════════════════════════════════
   ΛΕΙΤΟΥΡΓΙΑ TABLET ΣΤΗΝ ΠΑΡΕΑ (George, 1 Οκτ 2026: «add the tablet mode on
   multiplayer that changes the question orientation according where the player
   is sitting»). Σε πλήρη οθόνη όλο το ταμπλό γυρίζει προς τη θέση του παίκτη που
   παίζει: απέναντι 180°, στα πλάγια 90°, όπως στο «Μαζί» του aporia.
   ════════════════════════════════════════════════════════════════════════════ */
.g-full .gboard[data-side]{transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.g-full .gboard[data-side="top"]{transform:rotate(180deg)}
.g-full .gboard:is([data-side="left"],[data-side="right"]){inset:auto;top:50%;left:50%;width:100vh;height:100vw;width:100dvh;height:100dvw}
.g-full .gboard[data-side="left"]{transform:translate(-50%,-50%) rotate(90deg)}
.g-full .gboard[data-side="right"]{transform:translate(-50%,-50%) rotate(-90deg)}
[data-g-calm] .g-full .gboard[data-side]{transition:none}
@media (prefers-reduced-motion:reduce){.g-full .gboard[data-side]{transition:none}}
/* Με τάμπλετ και παρέα, το ▶ «στο τραπέζι» υπάρχει σε κάθε πλάτος οθόνης. */
.g-table .gfab{display:inline-flex;align-items:center;gap:.4rem;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:85;
  padding:.85rem 1.3rem;border:0;border-radius:999px;cursor:pointer;background:#d8a020;color:#192f5b;font:700 1rem/1 var(--sans);
  box-shadow:0 10px 26px rgba(4,10,24,.45),0 0 0 3px rgba(216,160,32,.25)}
.gplayers.seats li{grid-template-columns:1.5rem minmax(0,1fr) minmax(0,8rem) minmax(0,7rem)}
@media (max-width:520px){.gplayers.seats li{grid-template-columns:1.5rem minmax(0,1fr) minmax(0,1fr)}.gplayers.seats li .pl-seat{grid-column:2 / -1}}
/* παιχνίδια χωρίς άγκυρες (η Ρεγκάτα): ο πίνακας δεν δείχνει ζωές */
.g-nolives #g-lives{display:none}

/* ── ΡΕΓΚΑΤΑ ── λωρίδες θάλασσας, σημαδούρες ανά μίλι, το ιστιοφόρο ταξιδεύει */
.gstage>#g-play>.rg-sea{display:flex;flex-direction:column;gap:.3rem;padding:.45rem .5rem;border-radius:.8rem;
  background:linear-gradient(180deg,#14305e,#0d2147);border:1px solid rgba(216,160,32,.3);box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
.rg-lane{position:relative;display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);align-items:center;gap:.5rem;
  padding:.15rem .3rem;border-radius:.5rem;transition:background .3s}
.rg-lane.now{background:rgba(216,160,32,.13);box-shadow:inset 3px 0 0 var(--pc)}
.rg-name{font:700 .74rem/1.15 var(--sans);color:#f4efe2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-lane.now .rg-name{color:#ffe6a8}
.rg-track{position:relative;height:2.6rem;margin-right:1.3rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10'%3E%3Cpath d='M0 6Q15 1 30 6T60 6' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x 0 70%/60px 10px;
  animation:rgwave 6s linear infinite}
@keyframes rgwave{to{background-position:-60px 70%}}
.rg-m{position:absolute;bottom:.3rem;left:calc(var(--m) / var(--n) * 100%);width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:rgba(216,160,32,.55)}
.rg-m.fin{width:12px;height:12px;margin-left:-6px;bottom:.1rem;background:#d8a020;box-shadow:0 0 0 3px rgba(216,160,32,.25)}
.rg-m.fin::after{content:"";position:absolute;left:5px;bottom:10px;width:2px;height:18px;background:#f4efe2}
.rg-m.fin::before{content:"";position:absolute;left:7px;bottom:20px;width:11px;height:8px;
  background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/5.5px 4px}
.rg-boat{position:absolute;bottom:.1rem;left:calc(var(--s) / var(--n) * 100%);width:2.6rem;margin-left:-1.3rem;
  transition:left 1.1s cubic-bezier(.35,.1,.25,1);filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));animation:rgbob 2.6s ease-in-out infinite}
.rg-boat svg{display:block;width:100%;height:auto}
@keyframes rgbob{50%{transform:translateY(-2px) rotate(-2deg)}}
.rg-kind{margin:.35rem 0 0;text-align:center;font:600 .82rem/1.3 var(--sans);color:var(--muted)}
.rg-kind b{color:var(--ink)}
.rg-kind em{font-style:normal;color:var(--gold-ink);font-weight:700}
.rg-q{text-align:center}
.rg-clue{margin:.2rem auto 0;max-width:36rem;font:400 1.05rem/1.55 var(--serif)}
.rg-word{margin:.2rem 0 0;font:italic 700 clamp(1.7rem,1.3rem + 2vw,2.4rem)/1.1 var(--serif)}
.rg-img{width:min(18rem,100%);aspect-ratio:4/3;margin:.2rem auto 0;display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:.6rem;padding:.4rem}
.rg-img img{max-width:100%;max-height:100%;border-radius:.3rem}
.rg-flag{width:min(9rem,50%);margin:.3rem auto 0}
.rg-flag svg{display:block;width:100%;height:auto;border-radius:.2rem;box-shadow:0 6px 18px rgba(6,14,32,.35)}
@media (max-width:599px){.rg-lane{grid-template-columns:minmax(0,4.6rem) minmax(0,1fr)}.rg-track{height:2.2rem}.rg-boat{width:2.2rem;margin-left:-1.1rem}.rg-clue{font-size:.95rem}}
.g-full .rg-img{width:min(16rem,100%,calc(26svh * 4 / 3))}
.g-full .rg-clue{font-size:.98rem}
@media (orientation:landscape) and (max-height:520px){
  .g-full .gstage>#g-play>:is(.rg-kind){order:0}
  .g-full .rg-track{height:1.8rem}.g-full .rg-boat{width:1.9rem;margin-left:-.95rem}
  .g-full .rg-img{width:min(100%,calc(36svh * 4 / 3))}
}
[data-g-calm] .rg-boat,[data-g-calm] .rg-track{animation:none;transition:none}
@media (prefers-reduced-motion:reduce){.rg-boat,.rg-track,.art-regata .rgb{animation:none!important;transition:none!important}}
.art-regata .rgb{animation:rgsail 5s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
@keyframes rgsail{0%{transform:translateX(0)}50%{transform:translateX(150px)}100%{transform:translateX(0)}}
/* η Ρεγκάτα, πρώτη στη σελίδα «Παιχνίδια», σε διπλό πλακίδιο */
.hub-grid .hg[href$="/regata/"]{grid-column:span 2}
.hub-grid .hg[href$="/regata/"]::after{content:"ΝΕΟ · ΠΑΡΕΑ";position:absolute;top:.45rem;left:.5rem;z-index:3;font:700 .6rem/1 var(--sans);letter-spacing:.12em;
  color:#192f5b;background:#d8a020;border-radius:999px;padding:.3rem .55rem}
.gans .note a,.gans .note{font:500 .9rem/1.5 var(--sans)}.gans .note a{font-weight:700}

/* ── ΝΑΥΜΑΧΙΑ: επιλογή, βολή στη θάλασσα, βυθισμένο πλοίο ── (σχόλια George, 1 Οκτ 2026) */
.nv.sel{border-color:#d8a020;background:linear-gradient(180deg,rgba(216,160,32,.5),rgba(216,160,32,.22));
  box-shadow:0 0 0 3px rgba(216,160,32,.35),inset 0 0 0 1px #ffe6a8;transform:scale(1.06);z-index:1}
/* σωστή απάντηση και από κάτω θάλασσα: το τετράγωνο χάνεται, χωρίς τελίτσα */
.nv.miss{opacity:0;pointer-events:none}
.nv.miss.sink{animation:nsink .9s ease-in forwards}
@keyframes nsink{0%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(190,225,255,.7)}
  45%{opacity:.8;transform:scale(.85);box-shadow:0 0 0 7px rgba(190,225,255,0)}100%{opacity:0;transform:scale(.3)}}
/* το βυθισμένο πλοίο, από ψηλά, πάνω από τα τετράγωνά του */
.nsunk{position:relative;z-index:2;display:block;pointer-events:none;padding:6% 2%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.nsunk svg{display:block;width:100%;height:100%}
.nsunk.v{padding:2% 6%}
.nsunk.now{animation:nsunk .8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes nsunk{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nv.miss.sink,.nsunk.now{animation:none}}
[data-g-calm] .nv.miss.sink,[data-g-calm] .nsunk.now{animation:none}

/* ↻ η ερώτηση που ξαναβγαίνει για να μαθευτεί */
.gstage>#g-play>.grep{align-self:center;width:auto;margin:0 auto .2rem;padding:.3rem .75rem;border-radius:999px;
  font:700 .74rem/1.2 var(--sans);color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.grep span{display:inline-block;margin-right:.2rem}
.grep:not([hidden]){animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
[data-g-calm] .grep{animation:none}
@media (orientation:landscape) and (max-height:520px){.g-full .gstage>#g-play>.grep{order:0;width:auto}}
/* Ναυμαχία, τέλος: ο στόλος που δεν βρέθηκε, μέσα στην κάρτα του τέλους */
.nv.ship{display:block}
span.nv{display:grid;place-items:center;cursor:default}
.nend{max-width:16rem;margin:.4rem auto .3rem;pointer-events:none}
.nend .nv.miss{opacity:.25}
.nend-k{margin:.6rem 0 0;text-align:center;font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.nend-l{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:.2rem 0 0;font:500 .78rem/1 var(--sans);color:var(--muted)}
.nend-l .nv{display:inline-block;width:.9rem;height:.9rem;aspect-ratio:auto;margin-left:.6rem}
#g-play .ngrid .nv.ship{animation:nfound .6s ease both}
@keyframes nfound{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
[data-g-calm] #g-play .ngrid .nv.ship{animation:none}
@media (prefers-reduced-motion:reduce){#g-play .ngrid .nv.ship{animation:none}}

/* ════ ΠΑΡΕΑ ΜΕ ΧΡΩΜΑΤΑ (George, 1 Οκτ 2026) ════
   Κάθε παίκτης έχει το χρώμα του (--pc). Στη σειρά του η οθόνη του παιχνιδιού
   παίρνει το χρώμα του, η κουρτίνα «Δώστε τη συσκευή» είναι στο χρώμα του με το
   όνομά του, και ο πίνακας της παρέας δείχνει όλους με τους πόντους τους. */
.g-party .gboard .ghud{box-shadow:inset 0 0 0 3px var(--pc),0 10px 26px rgba(11,20,38,.3)}
.g-party .gboard .gstage>#g-play{border-color:var(--pc);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pc) 55%,transparent),0 10px 26px var(--gl-sh);
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 9%,transparent),transparent 40%)}
.g-party.g-full .gboard{background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 14%,var(--bg)),var(--bg) 45%)}
.gturn{grid-area:meta;justify-self:start;align-self:end;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:999px;
  font:700 .74rem/1 var(--sans);color:#fff;background:var(--pc,#192f5b);box-shadow:0 2px 8px rgba(0,0,0,.3);white-space:nowrap}
.ghud .gturn{position:absolute;left:50%;top:-.75rem;transform:translateX(-50%);z-index:3}
.gscores{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.gscores li{display:flex;align-items:center;gap:.4rem;padding:.3rem .65rem .3rem .45rem;border-radius:999px;font:600 .8rem/1 var(--sans);
  border:1.5px solid color-mix(in srgb,var(--pc) 55%,transparent);background:color-mix(in srgb,var(--pc) 12%,transparent);color:var(--ink)}
.gscores li i{width:.7rem;height:.7rem;border-radius:50%;background:var(--pc)}
.gscores li b{font-variant-numeric:tabular-nums}
.gscores li.now{background:var(--pc);color:#fff;border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 30%,transparent)}
.gscores li.now i{background:#fff}
.g-full .gboard>.gscores{margin:.4rem .8rem 0}
/* η κουρτίνα του επόμενου παίκτη, στο χρώμα του */
.gpass{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--pc,#192f5b) 55%,rgba(8,16,34,.95)),rgba(8,16,34,.96))}
.gp-in b{color:#fff;text-shadow:0 2px 12px color-mix(in srgb,var(--pc,#192f5b) 70%,transparent)}
.gp-in .gp-k{color:#fff;opacity:.85}
.gp-in .btn.primary{background:var(--pc,#d8a020);border-color:#fff;color:#fff}
.gparty{flex-wrap:wrap}
.gparty button{min-width:2.3rem}

/* Ναυμαχία: τα χτυπήματα και τα πλοία στο χρώμα του στόλου που χτυπήθηκε (--vc) */
.ngrid .nv.hit{background:linear-gradient(180deg,var(--vc,#c8202e),color-mix(in srgb,var(--vc,#c8202e) 70%,#000));border-color:color-mix(in srgb,var(--vc,#c8202e) 70%,#000);color:#fff}
.ngrid .nv.ship{background:linear-gradient(180deg,color-mix(in srgb,var(--vc,#d8a020) 85%,#fff),var(--vc,#d8a020));border-color:color-mix(in srgb,var(--vc,#d8a020) 60%,#000)}
.ngrid.duo{padding:.35rem;border-radius:.6rem;border:2px solid var(--vc);background:color-mix(in srgb,var(--vc) 10%,transparent)}
.nleft b{font-weight:800}
.nend-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.4rem 1rem}
.nend-duo .nend{max-width:14rem}
.nend-l .nv.ship{--vc:#d8a020}.nend-l .nv.hit{--vc:#c8202e}
/* Οι παίκτες με θέση: το όνομα χρειάζεται χώρο (με 16rem ανά παίκτη το πεδίο του ονόματος γινόταν 0px). */
.gplayers.seats ul{grid-template-columns:repeat(auto-fit,minmax(min(23rem,100%),1fr))}
.gplayers.seats li{grid-template-columns:1.5rem minmax(5.5rem,1fr) minmax(0,8.5rem) minmax(0,7rem)}
@media (max-width:520px){.gplayers.seats li{grid-template-columns:1.5rem minmax(0,1fr) minmax(0,1fr)}}
.gplayers li input{min-width:5.5rem}

/* Η κάρτα του τέλους: τα κουμπιά στη μέση, και όταν σπάνε σε δεύτερη γραμμή.
   Σχόλιο του George στην κονσόλα (1 Οκτ, Ρεγκάτα, «Έξοδος»): «It is not centered».
   Ήταν στοιβαγμένα αριστερά, και στο κινητό το «Έξοδος» έμενε μόνο του αριστερά. */
.gover p.row{justify-content:center}
.gexit{justify-content:center}