/* Quaternary dot games: shared look. Tokens, cards, buttons, toast, links, stars, the level
   map and the account dialog. Each game adds only its own header and board styles. */

/* Schibsted Grotesk (SIL Open Font License, see fonts/OFL.txt), served from the game's own
   site rather than Google Fonts so no player data goes to Google. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#FFFFFF; --ink:#000000; --muted:#8A8A8A; --line:#DADADA; --panel:#F2F2F2; --alert:#E3342F; --dot:#E8322B;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#161616;--ink:#F5F5F5;--muted:#8C8C8C;--line:#3A3A3A;--panel:#222222;}
}
:root[data-theme="dark"]{--bg:#161616;--ink:#F5F5F5;--muted:#8C8C8C;--line:#3A3A3A;--panel:#222222;}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);
  font-family:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Square icon buttons in the header */
.icon{width:38px;height:38px;display:grid;place-items:center;background:none;border:2px solid var(--ink);
  color:var(--ink);cursor:pointer;padding:0;position:relative}
.icon svg{width:20px;height:20px}
#acct[hidden]{display:none}
#acct.in{background:var(--ink);color:var(--bg)}

/* Cards */
#overlay,#acctOv,#giftOv{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);padding:24px}
#overlay.on,#acctOv.on,#giftOv.on{display:flex}
#overlay.solid{background:var(--bg)}
#acctOv,#giftOv{z-index:2}
.card{background:var(--bg);border:2px solid var(--ink);padding:26px 24px;max-width:320px;width:100%}
.card h2{font-size:1.9rem;font-weight:800;margin:0 0 10px;line-height:1.05;letter-spacing:-.03em}
.card h2:only-of-type{margin-bottom:18px}
.card p{margin:0 0 22px;line-height:1.45;font-size:1rem}
.card p:empty{display:none}
#ovBtns{display:grid;gap:8px}
#ovArt:empty{display:none}
#ovArt{margin-bottom:14px}
#ovArt svg{width:72px;height:44px;display:block}
#ovArt .stars svg{width:22px;height:22px}
.primary{font:inherit;font-weight:800;font-size:1rem;background:var(--ink);color:var(--bg);
  border:0;padding:13px 22px;cursor:pointer;width:100%;text-align:left}
.primary:active{opacity:.8}
.secondary{font:inherit;font-weight:700;font-size:1rem;background:none;color:var(--ink);border:2px solid var(--ink);padding:11px 20px;cursor:pointer;width:100%;text-align:left}
.link{font:inherit;font-size:.9rem;background:none;border:0;color:var(--muted);padding:6px 0;cursor:pointer;text-align:left;text-decoration:underline}

/* Toast */
#toast{position:absolute;left:0;right:0;top:0;padding:6px 16px;background:var(--bg);text-align:center;font-size:.9rem;font-weight:600;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:4}
#toast.on{opacity:1}
@media (prefers-reduced-motion: reduce){#toast{transition:none}}

/* Site links live on the cards and the level map, not under the board, so play gets the
   whole screen and showing them never resizes the board. */
.links{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:16px;font-size:12px;color:var(--muted)}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--ink);text-decoration:underline}
#lvOv .links{justify-content:center;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--line)}

/* Stars and the level map */
.stars{display:inline-flex;gap:3px;vertical-align:middle}
#lvOv{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;background:var(--bg)}
#lvOv.on{display:flex}
.lvHead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:2px solid var(--ink)}
.lvHead h2{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin:0}
#lvTotal{color:var(--muted);font-size:.9rem;margin-right:auto}
#lvGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;padding:16px;align-content:start}
.lv{font:inherit;background:none;color:var(--ink);border:2px solid var(--line);padding:8px 4px 6px;cursor:pointer;display:grid;gap:4px;justify-items:center}
.lv b{font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums}
.lv.now{border-color:var(--ink)}
.lv .lock{width:11px;height:11px;color:var(--muted)}

/* Account dialog */
#acctOv form{display:grid;gap:8px;margin:0}
#acctOv input,#giftOv input{font:inherit;font-size:1rem;background:var(--bg);color:var(--ink);border:2px solid var(--line);
  padding:11px 12px;width:100%;border-radius:0;-webkit-user-select:text;user-select:text}
#acctOv input:focus,#giftOv input:focus{border-color:var(--ink);outline:none}
#acctOv .rule{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;margin:6px 0}
#acctOv .rule::before,#acctOv .rule::after{content:"";flex:1;height:2px;background:var(--line)}
#acctOv .card p{margin-bottom:18px}
#acctErr{color:var(--alert);font-size:.9rem;font-weight:600;margin:0}
#acctErr:empty{display:none}
#acctPlan{border:2px solid var(--ink);padding:10px 12px;font-weight:700;font-size:.95rem;display:flex;gap:8px;align-items:center}
#acctPlan:empty{display:none}
#acctPlan.free{border-color:var(--line);font-weight:600;color:var(--muted)}
#acctPlan .o{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:none}
#acctDelErr{color:var(--alert);font-weight:600;margin:0}
#acctDelYes{background:var(--alert);color:#fff}

/* Gift code dialog */
#giftOv form{display:grid;gap:8px;margin:0}
#giftOv input{text-transform:uppercase;letter-spacing:.06em;font-weight:700}
#giftErr{color:var(--alert);font-size:.9rem;font-weight:600;margin:0}
#giftErr:empty{display:none}
#ovBtns .link{padding:8px 0 0;width:auto}

/* Phones held sideways: the games are laid out for portrait, so cover the screen with a
   "turn your phone upright" note (and kit.js pauses play). Only short landscape screens:
   tablets and computers in landscape are tall enough to play as normal. */
@media (orientation: landscape) and (max-height: 500px){
  /* !important beats the inline display:none the element is created with */
  #rotate{position:fixed;inset:0;z-index:10;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    background:var(--bg);color:var(--ink);text-align:center;padding:24px}
  #rotate svg{width:56px;height:56px}
  #rotate p{margin:0;font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
}