/* Fonts in the project (no Google Fonts request, which would send the IP address to Google). Saira and Saira Condensed, SIL Open Font License 1.1, see fonts/OFL.txt */
@font-face{font-family:'Saira';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/saira.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}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/saira-condensed-600.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}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/saira-condensed-700.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}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/saira-condensed-800.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}
/* Versus: duel arcade. Visual language: two sides (pink left, yellow right) split by a diagonal,
   slanted condensed type, sharp panels with hard offset shadows, a VS slam before every match and a KO band after it.
   Layout: laptop = select screen (grid + game panel) and HUD with player cards left/right of the board; phone = one column.
   Only transform and opacity are animated, so it stays smooth on phones. Single dark look by design. */
:root{
  --ink:#08090f; --ink2:#0e1019; --panel:#131625; --panel2:#1b1f33; --panel3:#252a44; --line:#262b47; --line2:#373d66;
  --fg:#f3f4ff; --muted:#9ca2cc; --dim:#646a96;
  --pink:#ff4fd8; --yellow:#ffd84f; --cyan:#62f0ff; --cy:var(--cyan); --good:#5dff9d; --bad:#ff5d73; --warn:#ff9f43;
  --p1:var(--pink); --p2:var(--yellow);
  --p1hi:#ffa6ec; --p2hi:#fff1b0; --p1lo:#9c2a83; --p2lo:#9b7f1f; --p1ink:#5a0f4a; --p2ink:#5b4705;
  --pink-lo:#9c2a83;   /* edge under pink buttons that must not swap colours against the AI */
  --f-d:'Saira Condensed','Arial Narrow',system-ui,sans-serif; --f-b:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.2,1.5,.4,1); --snap:cubic-bezier(.2,.9,.2,1);
  --tabh:84px; --sk:-10deg;
  /* app feel: radius steps, the key edge under tappable cards, glass, durations, sheet curves */
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:32px; --r-pill:999px;
  --depth:0 5px 0 #05060c; --depth-press:0 1px 0 #05060c; --press-y:4px;
  --glass:rgba(19,22,37,.78); --glass-line:rgba(55,61,102,.8); --blur:blur(22px) saturate(1.4);
  --t-fast:.12s; --t-base:.25s; --t-slow:.45s; --stagger:40ms;
  --spring-soft:cubic-bezier(.2,1.15,.3,1); --sheet-in:cubic-bezier(.2,1.1,.3,1); --sheet-out:cubic-bezier(.5,0,.75,0);
  color-scheme:dark;
}
/* the AI is always yellow: when it plays side 1, the side colours trade places */
:root.swap{--p1:var(--yellow);--p2:var(--pink);--p1hi:#fff1b0;--p2hi:#ffa6ec;--p1lo:#9b7f1f;--p2lo:#9c2a83;--p1ink:#5b4705;--p2ink:#5a0f4a}
*{box-sizing:border-box}
html{background:var(--ink)}
html,body{min-height:100%}
body{margin:0;background:var(--ink);color:var(--fg);font:15px/1.5 var(--f-b);overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:var(--cur-p,pointer);background:none;border:0;padding:0;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
kbd{display:inline-grid;place-items:center;min-width:22px;height:21px;padding:0 6px;border-radius:4px;border:1px solid var(--line2);border-bottom-width:2px;background:var(--panel2);font:600 12px/1 var(--f-d);color:var(--fg);letter-spacing:.02em;text-transform:none;font-style:normal}
.only-fine{display:none!important}
@media (hover:hover) and (pointer:fine){.only-fine{display:revert!important} .iconbtn.only-fine{display:grid!important}}
#app{max-width:1180px;margin:0 auto;padding-block:max(12px,env(safe-area-inset-top,0px)) 40px;position:relative;z-index:1}

/* ---------- background: the split ---------- */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx .split{position:absolute;inset:0;background:
  linear-gradient(105deg,transparent 49.85%,rgba(255,255,255,.06) 50%,transparent 50.15%),
  linear-gradient(105deg,rgba(255,79,216,.09),rgba(255,79,216,.015) 49.9%,rgba(255,216,79,.015) 50.1%,rgba(255,216,79,.075))}
.bgfx .stripes{position:absolute;inset:-40px -80px;background:repeating-linear-gradient(-75deg,rgba(255,255,255,.024) 0 1px,transparent 1px 13px);
  -webkit-mask:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);mask:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 75%);animation:drift 24s linear infinite}
@keyframes drift{to{transform:translateX(53px)}}
.lowfx .bgfx *{animation:none!important}

/* ---------- type ---------- */
.title{font:800 italic clamp(40px,6vw,64px)/.88 var(--f-d);text-transform:uppercase;margin:0;letter-spacing:.01em}
.title span{display:block;font-size:.36em;letter-spacing:.24em;color:var(--muted);font-weight:600;margin-bottom:4px}
.tagline{color:var(--muted);margin:10px 0 0;max-width:46ch}

/* ---------- page transitions ---------- */
.view.enter{animation:fadeIn .25s ease-out}
.view.enter>*:not(.tabs),.view.enter .select>*{animation:riseIn .45s var(--ease) backwards}
.view.enter>*:nth-child(2),.view.enter .sel-panel{animation-delay:.06s} .view.enter>*:nth-child(3){animation-delay:.1s}
@keyframes fadeIn{from{opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:2px 18px}
.logo{display:inline-flex;align-items:center;gap:6px;font:800 italic 30px/1 var(--f-d);letter-spacing:.04em;padding:4px 2px}
.logo .l1{color:var(--pink)} .logo .l2{color:var(--yellow)}
.logo .slash{width:5px;height:26px;background:linear-gradient(var(--pink),var(--yellow));transform:skewX(-18deg);border-radius:1px}
.top-r{display:flex;gap:8px}
.iconbtn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(27,31,51,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;flex:none;transition:border-color .15s,transform var(--t-fast) var(--ease),background .15s}
@media (hover:hover) and (pointer:fine){.iconbtn:hover{border-color:var(--line2);background:var(--panel2)}}
.iconbtn:active{transform:scale(.88)} .iconbtn svg{width:20px;height:20px}
.tabs.desk{display:flex;gap:6px;position:relative}
.tabs.desk .tab-ind{position:absolute;left:0;top:0;height:40px;z-index:0;transition:transform .32s var(--spring),width .32s var(--ease)}
.tabs.desk .tab-ind::before{content:"";position:absolute;inset:0;background:var(--pink);transform:skewX(var(--sk));box-shadow:3px 3px 0 var(--yellow)}
.tabs.desk button{position:relative;z-index:1}
.tabs.desk button{display:flex;align-items:center;gap:8px;height:40px;padding:0 18px;transform:skewX(var(--sk));border:1px solid var(--line);background:var(--panel);color:var(--muted);font:700 italic 15px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;transition:color .15s,background .15s,border-color .15s,box-shadow .2s}
.tabs.desk button svg{width:17px;height:17px}
.tabs.desk button:hover{color:var(--fg);border-color:var(--line2)}
.tabs.desk button.on{color:var(--ink);background:transparent;border-color:transparent}
.tabs .tab-ind{pointer-events:none}
.tabs.bar{display:none}
@media (max-width:959px){
  .tabs.desk{display:none}
  .home{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
  /* floating glass bar: four tabs, a sliding pill behind the active one and the raised quick match button in the middle */
  .tabs.bar{display:flex;align-items:center;position:fixed;z-index:30;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));height:70px;padding:0 6px;
    border-radius:var(--r-l);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 18px 40px rgba(0,0,0,.55)}
  .tabs.bar button[data-tab]{flex:1;min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);font:700 italic 11px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:1;transition:color var(--t-base)}
  .tabs.bar button[data-tab] svg{width:22px;height:22px;transition:transform var(--t-base) var(--spring)}
  .tabs.bar button[data-tab]:active svg{transform:scale(.88)}
  .tabs.bar button.on{color:var(--fg)}
  .tabs.bar button.on svg{color:var(--pink);transform:translateY(-2px) scale(1.08)}
  .tabs.bar .tab-ind{position:absolute;left:0;top:6px;height:56px;border-radius:19px;background:rgba(255,79,216,.13);border:1px solid rgba(255,79,216,.3);transition:transform .45s cubic-bezier(.2,1.4,.4,1),width .3s var(--ease),opacity .2s}
  .tabs.bar .qbtn{flex:none;width:80px;height:56px;display:grid;place-items:center;position:relative;z-index:1}
  .tabs.bar .qbtn span{width:62px;height:62px;margin-top:-30px;display:grid;place-items:center;background:var(--pink);color:var(--ink);transform:skewX(var(--sk));
    box-shadow:4px 4px 0 var(--yellow),0 12px 30px rgba(255,79,216,.45);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
  .tabs.bar .qbtn svg{width:28px;height:28px;transform:skewX(10deg)}
  .tabs.bar .qbtn:active span{transform:skewX(var(--sk)) translate(3px,3px) scale(.94);box-shadow:1px 1px 0 var(--yellow),0 6px 16px rgba(255,79,216,.35)}
  .tabs.bar .nb{top:4px;right:calc(50% - 22px)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;transform:skewX(var(--sk));border:1px solid var(--line2);background:var(--panel2);
  font:700 italic 17px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:3px 3px 0 rgba(0,0,0,.45);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),border-color .15s,background .15s}
.btn>span{display:inline-flex;align-items:center;gap:8px;position:relative}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--cyan);transform:skewX(var(--sk)) translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.45)}
  .btn.primary:hover{box-shadow:7px 8px 0 var(--yellow);border-color:var(--pink)}
  .btn.ghost:hover{box-shadow:none;border-color:var(--line2);background:var(--panel)}
}
.btn:active{transform:skewX(var(--sk)) translate(2px,2px) scale(.97);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.btn.primary{background:var(--pink);border-color:var(--pink);color:var(--ink);box-shadow:5px 6px 0 var(--yellow)}
.btn.primary:active{transform:skewX(var(--sk)) translate(4px,5px);box-shadow:1px 1px 0 var(--yellow)}
.btn.primary kbd{background:rgba(0,0,0,.15);border-color:rgba(0,0,0,.25);color:var(--ink)}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--line)}
.btn.sm{height:38px;padding:0 16px;font-size:15px}
.btn.big{height:62px;font-size:24px}
/* the big pink button: a shine runs across it every few seconds */
.btn.primary.big{overflow:hidden}
.btn.primary.big::after{content:"";position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3s ease-in-out infinite;pointer-events:none}
.lowfx .btn.primary.big::after{display:none}
.btn svg{width:18px;height:18px}
.btn .dot{position:absolute;top:-6px;right:-10px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(98,240,255,.25);animation:dotp 1.4s ease-in-out infinite}
@keyframes dotp{50%{box-shadow:0 0 0 6px rgba(98,240,255,0)}}

/* ---------- select screen ---------- */
.select{display:flex;flex-direction:column;gap:18px}
.sel-head{display:flex;flex-direction:column}
.sel-panel{display:none}
@media (min-width:960px){
  .select{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:32px;align-items:start}
  .sel-panel{display:block;position:sticky;top:16px}
  .cont{display:none!important}
  .sel-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:20px}
  .sel-head .tagline{text-align:right;margin:0 0 6px;max-width:30ch}
}
.cont{--acc:var(--pink);width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:10px 12px;border-radius:8px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--acc);transition:transform .15s var(--ease)}
.cont:active{transform:scale(.98)}
.cont .ic{width:44px;height:44px;flex:none}
.cont .ct{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cont small{font:700 italic 12px/1.2 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.cont b{font:700 italic 20px/1.1 var(--f-d);text-transform:uppercase}
.cont span{font-size:13px;color:var(--muted)}
.cont .go{width:44px;height:44px;display:grid;place-items:center;flex:none;background:var(--pink);color:var(--ink);transform:skewX(var(--sk));box-shadow:3px 3px 0 var(--yellow)}
.cont .go svg{width:18px;height:18px}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;height:36px;padding:0 16px;transform:skewX(var(--sk));border:1px solid var(--line);background:var(--panel);color:var(--muted);font:700 italic 15px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;transition:all .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.chips button:hover{color:var(--fg);border-color:var(--line2)}}
.chips button:active{transform:skewX(var(--sk)) scale(.92)}
.chips button.on{color:var(--ink);background:var(--fg);border-color:var(--fg)}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
@media (max-width:520px){.tiles{grid-template-columns:1fr 1fr;gap:10px}}
.tile{--acc:var(--pink);position:relative;display:flex;flex-direction:column;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s;animation:tileIn .5s var(--ease) backwards;animation-delay:calc(var(--i) * 30ms)}
.tile .art{height:104px;display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(-60deg,color-mix(in srgb,var(--acc) 9%,transparent) 0 7px,transparent 7px 15px),linear-gradient(150deg,color-mix(in srgb,var(--acc) 20%,var(--panel2)),var(--panel2) 70%)}
.tile .art .ic{width:60px;height:60px;transition:transform .3s var(--spring);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.tile .tx{padding:10px 12px 0;display:flex;flex-direction:column;gap:2px}
.tile b{font:700 italic 21px/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.tile small{color:var(--muted);font-size:13px;line-height:1.35}
.tile .meta{margin-top:auto;padding:10px 12px 11px;display:flex;gap:6px;flex-wrap:wrap}
.tile .meta em{font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:4px 7px;border:1px solid var(--line);transform:skewX(var(--sk))}
.tile .meta em.new{color:var(--ink);background:var(--cyan);border-color:var(--cyan)}
.tile .meta em.maint{color:var(--ink);background:var(--warn);border-color:var(--warn)}
.tile .meta em.rec{color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translate(-3px,-3px);border-color:var(--acc);box-shadow:4px 4px 0 var(--acc)}
  .tile:hover .art .ic{transform:scale(1.08) rotate(-4deg)}
}
.tile:active{transform:translate(1px,1px) scale(.97);box-shadow:1px 1px 0 var(--acc)}
.tile.sel{border-color:var(--acc);box-shadow:5px 5px 0 var(--acc),0 0 0 1px var(--acc);transform:translate(-3px,-3px)}
.tile.sel::after{content:'';position:absolute;top:0;right:0;border:14px solid transparent;border-top-color:var(--acc);border-right-color:var(--acc)}
.tile:focus-visible{outline:none;border-color:var(--cyan);box-shadow:5px 5px 0 var(--cyan)}
@keyframes tileIn{from{opacity:0;transform:translateY(18px)}}
@media (max-width:520px){.tile .art{height:78px}.tile .art .ic{width:46px;height:46px}.tile b{font-size:18px}.tile small{font-size:12px}.tile .tx{padding:8px 10px 0}.tile .meta{padding:8px 10px 9px}}

/* ---------- game panel ---------- */
.gp{--acc:var(--pink);background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:6px 6px 0 color-mix(in srgb,var(--acc) 55%,transparent)}
.gp-body{display:contents}
.gp.gp-new{animation:gpin .35s var(--ease)}
.gp.gp-sw .icw,.gp.gp-sw .gp-txt{animation:gpsw .3s var(--ease)}
.gp.gp-sw .gp-art{animation:gpart .3s ease-out}
@keyframes gpin{from{opacity:0;transform:translateY(10px)}}
@keyframes gpsw{from{opacity:0;transform:translateY(8px)}}
@keyframes gpart{from{filter:brightness(1.6)}}
.gp-art{height:150px;display:grid;place-items:center;position:relative;
  background:repeating-linear-gradient(-60deg,color-mix(in srgb,var(--acc) 10%,transparent) 0 9px,transparent 9px 19px),radial-gradient(80% 120% at 50% 100%,color-mix(in srgb,var(--acc) 28%,transparent),transparent 70%),var(--panel2)}
.gp-art .ic{width:96px;height:96px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));animation:floaty 3.6s ease-in-out infinite}
.gp-art .cat{position:absolute;top:12px;left:14px;font:700 italic 12px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;padding:5px 9px;color:var(--ink);background:var(--acc);transform:skewX(var(--sk))}
.lowfx .gp-art .ic{animation:none}
@keyframes floaty{50%{transform:translateY(-6px) rotate(-2deg)}}
.gp-txt{padding:16px 18px 0}
.gp-txt h2{font:800 italic 34px/.95 var(--f-d);text-transform:uppercase;margin:0}
.gp-txt p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
/* mode segment: a sliding indicator behind the active mode (spring), icon and label; modes that do not fit are dimmed */
.gp-mode{--n:3;--i:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));height:54px;padding:4px;margin:16px 18px 0;background:var(--ink2);border-radius:17px}
.gp-mode .seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:13px;background:var(--panel3);box-shadow:inset 0 -3px 0 var(--pink);transform:translateX(calc(var(--i) * 100%));transition:transform .4s cubic-bezier(.2,1.3,.4,1)}
.gp-mode button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;border-radius:13px;color:var(--muted);font:700 italic 15px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;transition:color .2s,transform var(--t-fast) var(--ease)}
.gp-mode button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-mode button svg{width:18px;height:18px;flex:none}
.gp-mode button:active{transform:scale(.94)}
.gp-mode button.on{color:var(--fg)}
.gp-mode button.on svg{color:var(--pink)}
.gp-mode[style*="--n:4"] button{font-size:13px;gap:4px;letter-spacing:0}
.gp-mode[style*="--n:4"] button svg{width:16px;height:16px}
.gp-mode button.lockd{opacity:.3}
.gp-lvl{margin:16px 18px 0}
.lv-top{display:flex;align-items:baseline;gap:10px}
.lv-top span{font:700 italic 12px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.lv-top b{font:800 italic 21px/1 var(--f-d);text-transform:uppercase}
.lv-top b.l0{color:var(--good)} .lv-top b.l1{color:var(--cyan)} .lv-top b.l2{color:var(--warn)} .lv-top b.l3{color:var(--bad)}
.lv-top em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lv-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.lv-bar button{height:20px;transform:skewX(-24deg);background:var(--panel3);transition:background .2s,transform .2s var(--spring)}
@media (hover:hover) and (pointer:fine){.lv-bar button:hover{background:var(--line2)}}
.lv-bar button.fill:nth-child(1){background:var(--good)} .lv-bar button.fill:nth-child(2){background:var(--cyan)} .lv-bar button.fill:nth-child(3){background:var(--warn)} .lv-bar button.fill:nth-child(4){background:var(--bad)}
.lv-bar button.on{transform:skewX(-24deg) scaleY(1.35)}
.lv-bar.l0 button.on{box-shadow:0 0 16px rgba(93,255,157,.55)} .lv-bar.l1 button.on{box-shadow:0 0 16px rgba(98,240,255,.55)} .lv-bar.l2 button.on{box-shadow:0 0 16px rgba(255,159,67,.55)} .lv-bar.l3 button.on{box-shadow:0 0 16px rgba(255,93,115,.55)}
.lv-bar button:active{transform:skewX(-24deg) scale(.9)}
.hint{font-size:13px;color:var(--muted);margin:10px 0 0;min-height:1.5em}
.hint.local{margin:12px 18px 0}
.gp-more{margin:14px 18px 0;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.crow>span{font-size:13px;color:var(--muted)}
.mini-seg{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.mini-seg button{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--muted);transition:all .15s}
.mini-seg button:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.mini-seg button:hover{color:var(--fg);border-color:var(--line2)}}
.mini-seg button.on{color:var(--fg);border-color:var(--cyan);background:rgba(98,240,255,.1)}
.gp-go{display:flex;gap:12px;padding:20px 18px 18px}
.gp-go .btn.primary{flex:1}
/* phone setup screen */
.setup{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sbar .logo{font-size:24px}
.sel-panel.solo{display:block}
.sel-panel.solo .gp{box-shadow:none}
.sel-panel.solo .gp-go{position:sticky;bottom:0;background:linear-gradient(transparent,var(--panel) 25%);padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}

/* ---------- stats and options ---------- */
.page{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:620px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;border-top:3px solid var(--pink)}
.kpi:nth-child(even){border-top-color:var(--yellow)}
.kpi b{display:block;font:800 italic 32px/1.1 var(--f-d);font-variant-numeric:tabular-nums}
.kpi span{font:700 italic 12px/1 var(--f-d);color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
.slist{display:flex;flex-direction:column;gap:8px}
.srow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:6px;padding:10px 14px}
.srow .ic{width:40px;height:40px;flex:none}
.srow .sm{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.srow .sm b{font:700 italic 18px/1 var(--f-d);text-transform:uppercase}
.wbar{display:flex;height:6px;overflow:hidden;background:var(--panel3);gap:2px;transform:skewX(-20deg)}
.wbar i{display:block;min-width:0;transform-origin:left;animation:grow .7s var(--ease) backwards}
.wbar .w,.legend .w{background:var(--good)} .wbar .d,.legend .d{background:var(--dim)} .wbar .l,.legend .l{background:var(--bad)} .wbar .e{flex:1;background:transparent}
@keyframes grow{from{transform:scaleX(0)}}
.lv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.srow .sn{text-align:right;display:flex;flex-direction:column;line-height:1.1}
.srow .sn b{font:800 italic 22px/1 var(--f-d);font-variant-numeric:tabular-nums}
.srow .sn small{font-size:12px;color:var(--muted)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px;border:1px dashed var(--line2);border-radius:10px}
.empty svg{width:42px;height:42px;color:var(--yellow)}
.empty b{font:800 italic 24px/1 var(--f-d);text-transform:uppercase}
.empty p{margin:0 0 10px;color:var(--muted);max-width:40ch}
.opts{max-width:620px}
.optlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.opt{display:flex;align-items:center;gap:14px;text-align:left;padding:15px 16px;transition:background .15s}
.opt+.opt{border-top:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.opt:hover{background:var(--panel2)}}
.opt>svg{width:22px;height:22px;color:var(--pink);flex:none}
.opt span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.opt b{font-weight:600}
.opt small{color:var(--muted);font-size:13px}
.optlist.small .opt{padding:12px 16px}
.optlist.small .opt>svg{color:var(--muted);width:18px;height:18px}
.opt.danger>svg,.opt.danger b{color:var(--bad)} .opt.sure{background:rgba(255,93,115,.1)}
.sw{width:48px;height:26px;background:var(--panel3);position:relative;flex:none;transform:skewX(-12deg);transition:background .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#cfd2f0;transition:transform .25s var(--spring),background .2s}
.sw.on{background:var(--pink)} .sw.on::after{transform:translateX(22px);background:var(--ink)}
.about{font-size:13px;color:var(--dim);margin:0}

/* ---------- play: HUD ---------- */
.play{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.pbar{display:flex;align-items:center;gap:8px}
.pbar .ttl{flex:1;text-align:center;min-width:0;display:flex;flex-direction:column;line-height:1}
.pbar .ttl b{font:800 italic 24px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar .ttl small{font:700 italic 12px/1.4 var(--f-d);color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"l s r" "c c c";gap:10px 8px;align-items:center}
.pcard-l{grid-area:l} .pcard-r{grid-area:r} .score{grid-area:s} .center{grid-area:c;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.pcard{--sc:var(--pink);position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0;
  transition:border-color .2s,box-shadow .2s var(--ease),transform .2s var(--ease)}
.pcard-r{--sc:var(--yellow);flex-direction:row-reverse;text-align:right}
.pcard .av{width:36px;height:36px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--sc) 16%,var(--panel2));color:var(--sc);border:1px solid color-mix(in srgb,var(--sc) 45%,transparent);transform:skewX(var(--sk));font:800 italic 14px/1 var(--f-d)}
.pcard .av>*{transform:skewX(10deg)}
.pcard .av svg{width:20px;height:20px}
.pcard .nm{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.pcard .nm b{font:800 italic 19px/1.05 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .nm small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .wins{display:none}
.pcard .tag{position:absolute;top:-9px;font:800 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;background:var(--sc);color:var(--ink);transform:skewX(var(--sk)) translateY(4px) scale(.7);opacity:0;transition:all .25s var(--spring)}
.pcard-l .tag{left:10px} .pcard-r .tag{right:10px}
.pcard.on{border-color:var(--sc);box-shadow:4px 4px 0 var(--sc)}
.pcard-r.on{box-shadow:-4px 4px 0 var(--sc)}
.pcard.on .tag{opacity:1;transform:skewX(var(--sk))}
.pcard.pcard-in{animation:pcin .4s var(--spring)}
@keyframes pcin{40%{transform:scale(1.04)}}
.score{display:flex;align-items:center;gap:4px;font:800 italic 26px/1 var(--f-d);font-variant-numeric:tabular-nums;padding:0 2px}
.score .sl{color:var(--pink)} .score .sr{color:var(--yellow)} .score i{font-style:normal;color:var(--dim)}
.status{text-align:center;min-height:32px;font-size:15px;color:var(--fg);padding:5px 16px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.status:empty{visibility:hidden}
.status.st-in{animation:stin .28s var(--ease)}
@keyframes stin{from{opacity:.2;transform:translateY(-4px)}}
.c1{color:var(--p1);font-weight:600} .c2{color:var(--p2);font-weight:600}
.thinking::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:dots 1s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.stage{--bw:min(100%,calc(100vh - 250px),620px);--bw:min(100%,calc(100svh - 250px),620px);display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;width:100%;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
@media (max-width:959px){.stage{--bw:min(100%,620px)}}
@media (min-width:960px){
  .duel{grid-template-columns:210px minmax(0,1fr) 210px;grid-template-areas:"l c r";gap:28px;align-items:start}
  .score{display:none}
  .stage{--bw:min(100%,calc(100vh - 180px),660px);--bw:min(100%,calc(100svh - 180px),660px)}
  .pcard{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px;margin-top:44px}
  .pcard-r{align-items:flex-end}
  .pcard .av{width:60px;height:60px;font-size:20px}
  .pcard .av svg{width:30px;height:30px}
  .pcard .nm b{font-size:26px}
  .pcard .nm small{white-space:normal}
  .pcard .wins{display:flex;align-items:baseline;gap:6px;padding-top:10px;border-top:1px solid var(--line);width:100%}
  .pcard-r .wins{flex-direction:row-reverse}
  .pcard .wins b{font:800 italic 40px/1 var(--f-d);color:var(--sc);font-variant-numeric:tabular-nums}
  .pcard .wins small{font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .pcard .tag{top:-11px;font-size:13px;padding:4px 10px}
  .pcard.on{box-shadow:6px 6px 0 var(--sc)} .pcard-r.on{box-shadow:-6px 6px 0 var(--sc)}
}
@media (max-width:520px){
  .pcard{padding:6px 8px;gap:8px}.pcard .av{width:30px;height:30px}.pcard .nm b{font-size:16px}.pcard .nm small{font-size:11px}.score{font-size:22px}
  .play{gap:8px}.status{font-size:14px}.pbar .ttl b{font-size:20px}
}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(5,6,12,.8);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fadeIn .18s ease-out}
.modal-back.out{opacity:0;transition:opacity .15s}
.modal{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-m);padding:22px;width:min(100%,470px);max-height:100%;overflow:auto;animation:pop .28s var(--spring);box-shadow:8px 8px 0 rgba(0,0,0,.5)}
/* phone: every dialog (except the KO band) is a bottom sheet with a grip; it slides up with a spring and down before it goes */
@media (max-width:959px){
  .modal-back:not(.mb-endm){align-items:end;padding:max(24px,env(safe-area-inset-top,0px)) 0 0;background:rgba(5,6,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .3s ease-out}
  .modal-back.out:not(.mb-endm){transition:opacity .28s}
  .modal:not(.endm){width:100%;max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;border:0;border-top:1px solid var(--line2);box-shadow:0 -20px 60px rgba(0,0,0,.6);
    padding:30px max(20px,env(safe-area-inset-right,0px)) calc(42px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));animation:sheetUp .45s var(--sheet-in);overscroll-behavior:contain;transition:transform .35s var(--spring-soft)}
  .modal:not(.endm)::before{content:'';position:absolute;top:10px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:3px;background:rgba(255,255,255,.35)}
  .modal.drag{transition:none}
  .modal-back.out .modal:not(.endm){animation:sheetDown .28s var(--sheet-out) forwards}
  .lowfx .modal:not(.endm),.lowfx .modal-back.out .modal:not(.endm){animation:fadeIn .2s}
}
@keyframes sheetUp{from{transform:translateY(100%)}} @keyframes sheetDown{to{transform:translateY(105%)}}
@keyframes pop{from{transform:scale(.9);opacity:0}}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}
.modal .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.modal .actions .btn{flex:1 1 130px}
.confirm{display:flex;flex-direction:column;gap:12px;text-align:center}
.confirm h3{font:800 italic 30px/1 var(--f-d);text-transform:uppercase;margin:0}
.confirm p{margin:0 0 8px;color:var(--muted)}
/* KO band after a match */
.mb-endm{background:rgba(5,6,12,.72)}
.modal.endm{background:none;border:0;box-shadow:none;width:100%;max-width:none;padding:0;overflow:visible;animation:none}
.ko{--bc:var(--pink);display:flex;flex-direction:column;align-items:center;gap:16px}
.ko .band{width:100vw;margin:0 calc(50% - 50vw);transform:skewY(-4deg);background:var(--bc);padding:22px 16px;animation:band .45s var(--snap) backwards;box-shadow:0 10px 0 rgba(0,0,0,.35)}
.ko .band-in{transform:skewY(4deg);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ko .kicker{font:700 italic 14px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;color:rgba(8,9,15,.7)}
.ko h2{font:800 italic clamp(56px,14vw,128px)/.88 var(--f-d);text-transform:uppercase;margin:0;color:var(--ink);display:flex;flex-wrap:wrap;justify-content:center}
.ko h2 span{display:inline-block;animation:letter .45s var(--spring) backwards;animation-delay:calc(.2s + var(--k) * 30ms)}
.ko.win{--bc:linear-gradient(90deg,var(--pink),var(--yellow))} .ko.left{--bc:var(--pink)} .ko.right{--bc:var(--yellow)} .ko.draw{--bc:var(--cyan)}
.ko.lose{--bc:#2a0e18} .ko.lose .band{border-block:3px solid var(--bad)} .ko.lose h2{color:var(--bad)} .ko.lose .kicker{color:rgba(255,93,115,.75)}
@keyframes band{from{transform:skewY(-4deg) scaleX(0)}}
@keyframes letter{from{opacity:0;transform:translateY(24px) scale(.6)}}
.eseries{display:flex;align-items:center;gap:12px;font:800 italic 34px/1 var(--f-d);font-variant-numeric:tabular-nums;margin-top:6px}
.eseries span{font:700 italic 15px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eseries .sl{color:var(--pink)} .eseries .sr{color:var(--yellow)} .eseries i{font-style:normal;color:var(--dim)}
.ko .small{margin:-8px 0 0;color:var(--muted);font-size:13px}
.ko .actions{width:min(100%,560px)}
.ko .knext{width:min(100%,560px);display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--acc) 16%,var(--panel2)),var(--panel2) 70%);border:1.5px solid color-mix(in srgb,var(--acc) 55%,var(--line));color:var(--fg);text-align:left;cursor:var(--cur-p,pointer);animation:qsIn .4s .5s var(--spring) backwards;transition:transform .15s var(--ease),border-color .15s}
.ko .knext:hover,.ko .knext:focus-visible{border-color:var(--acc);transform:translateY(-1px)}
.ko .knext:active{transform:scale(.98)}
.knext .kn-ic{flex:none;width:46px;height:46px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc)}
.knext .kn-ic svg{width:34px;height:34px}
.knext.lvl .kn-ic svg{width:26px;height:26px}
.knext .kn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.knext .kn-t small{font:700 italic 11.5px/1.2 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.knext .kn-t b{font:800 italic 20px/1.05 var(--f-d);text-transform:uppercase}
.knext .kn-t em{font-style:normal;font-size:12.5px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.knext .kn-go{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#140a18}
.knext .kn-go svg{width:18px;height:18px}
.lowfx .ko .knext{animation:none}
/* tutorial */
.tut{display:flex;flex-direction:column;gap:14px}
.tut.gor .demo,.tut.gor h3,.tut.gor .txt{animation:slideL .3s var(--ease)}
.tut.gol .demo,.tut.gol h3,.tut.gol .txt{animation:slideR .3s var(--ease)}
@keyframes slideL{from{opacity:0;transform:translateX(26px)}} @keyframes slideR{from{opacity:0;transform:translateX(-26px)}}
.tut .tk{display:flex;justify-content:space-between;font:700 italic 13px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.tut .tk b{color:var(--dim)}
.tut h3{font:800 italic 30px/1 var(--f-d);text-transform:uppercase;margin:0}
.tut .demo{background:var(--ink2);border:1px solid var(--line);border-radius:8px;padding:16px;display:flex;justify-content:center;align-items:center;min-height:120px}
.tut .txt{margin:0;color:#cfd2f0;line-height:1.55}
.tut .txt b{color:var(--fg)}
.tut .nav{display:flex;align-items:center;gap:10px}
.tut .dots{flex:1;display:flex;gap:5px;justify-content:center}
.tut .dots i{width:14px;height:5px;background:var(--line2);transform:skewX(-30deg);transition:all .3s var(--ease)} .tut .dots i.past{background:var(--dim)} .tut .dots i.on{background:var(--pink);width:26px}
.keys h3{font:800 italic 30px/1 var(--f-d);text-transform:uppercase;margin:0 0 6px}
.keys h4{font:700 italic 13px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin:18px 0 6px}
.krow{display:flex;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.krow span{min-width:130px;display:flex;gap:4px;flex-wrap:wrap}
.krow p{margin:0;color:var(--muted);font-size:14px}
.keys .actions{margin-top:16px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) skewX(var(--sk));z-index:95;padding:10px 18px;background:var(--fg);color:var(--ink);font:700 italic 15px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;box-shadow:4px 4px 0 var(--pink);animation:toastIn .3s var(--spring);transition:opacity .3s}
.toast.out{opacity:0}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) skewX(var(--sk))}}

/* ---------- VS intro ---------- */
.vsi{position:fixed;inset:0;z-index:90;overflow:hidden;transition:opacity .25s}
.vsi.out{opacity:0}
.vsi-l,.vsi-r{position:absolute;top:0;bottom:0;width:60%;display:flex;align-items:center;justify-content:center}
.vsi-l{left:0;background:var(--pink);clip-path:polygon(0 0,100% 0,80% 100%,0 100%);animation:vsl .42s var(--snap) backwards}
.vsi-r{right:0;background:var(--yellow);clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);animation:vsr .42s var(--snap) backwards}
.vsi-n{display:flex;flex-direction:column;color:var(--ink);animation:vsn .5s .15s var(--snap) backwards}
.vsi-l .vsi-n{transform:translate(-8%,-18vh);align-items:flex-start} .vsi-r .vsi-n{transform:translate(8%,18vh);align-items:flex-end}
.vsi-n small{font:700 italic clamp(13px,2.4vw,20px)/1 var(--f-d);letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.vsi-n b{font:800 italic clamp(48px,11vw,120px)/.9 var(--f-d);text-transform:uppercase;max-width:52vw;overflow-wrap:anywhere}
.vsi-n b.l{font-size:clamp(34px,8vw,96px)} .vsi-n b.xl{font-size:clamp(24px,5.6vw,72px)}
/* avatar badge over the name and the rank line under it */
.vsi-av{display:grid;place-items:center;width:clamp(46px,9vw,84px);aspect-ratio:1;margin-bottom:10px;transform:skewX(var(--sk));background:var(--ink);color:#fff;box-shadow:5px 5px 0 rgba(8,9,15,.35);animation:vsav .45s .3s var(--spring) backwards}
.vsi-av>*{transform:skewX(calc(var(--sk) * -1))}
.vsi-av svg{width:52%;height:52%}
.vsi-av span{font:800 italic clamp(18px,3.6vw,34px)/1 var(--f-d);text-transform:uppercase}
.vsi-av .lav{display:grid;place-items:center;width:100%;height:100%}
.vsi-m{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:5px 10px;transform:skewX(var(--sk));background:var(--ink);color:#fff;font:800 italic clamp(12px,2.2vw,17px)/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;font-style:italic;animation:vsn .4s .5s var(--snap) backwards}
.vsi-m .rk{--rk:#c98a52;width:9px;height:9px;background:var(--rk);transform:rotate(45deg);box-shadow:0 0 8px var(--rk)}
.vsi-m .rk.r-sil{--rk:#c9d1e6} .vsi-m .rk.r-gold{--rk:var(--yellow)} .vsi-m .rk.r-pla{--rk:var(--cyan)} .vsi-m .rk.r-dia{--rk:#b98cff}
@keyframes vsav{from{transform:skewX(var(--sk)) scale(0) rotate(-20deg)}}
.vsi-vs{position:absolute;inset:0;display:grid;place-items:center;font:800 italic clamp(90px,22vw,200px)/1 var(--f-d);color:#fff;-webkit-text-stroke:4px var(--ink);text-shadow:8px 8px 0 var(--ink);animation:vsslam .32s .28s var(--spring) backwards}
.vsi-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:vsflash .45s .3s ease-out}
.vsi.quick .vsi-l,.vsi.quick .vsi-r{animation-duration:.28s} .vsi.quick .vsi-n{animation-delay:.06s} .vsi.quick .vsi-vs{animation-delay:.14s} .vsi.quick .vsi-flash{animation-delay:.16s}
@keyframes vsl{from{transform:translateX(-105%)}} @keyframes vsr{from{transform:translateX(105%)}}
@keyframes vsn{from{opacity:0}}
@keyframes vsslam{from{transform:scale(3.2);opacity:0}}
@keyframes vsflash{0%{opacity:.7}100%{opacity:0}}

/* ---------- tutorial mini boards ---------- */
.mini{display:grid;gap:3px;margin:0 auto;width:100%}
.mc{aspect-ratio:1;border-radius:4px;background:var(--panel2);display:grid;place-items:center;font-family:var(--f-d);font-weight:800;font-size:clamp(12px,3.6vw,18px);position:relative;line-height:1}
.mc[style]{animation:miniIn .35s var(--spring) backwards;animation-delay:var(--d)}
@keyframes miniIn{from{transform:scale(.4);opacity:0}}
.mc.d1::after,.mc.d2::after,.mc.k1::after,.mc.k2::after,.mc.tg::after,.mc.ms::after{content:'';border-radius:50%}
.mc.d1::after,.mc.k1::after{width:78%;height:78%;background:var(--pink)} .mc.d2::after,.mc.k2::after{width:78%;height:78%;background:var(--yellow)}
.mc.k1::after,.mc.k2::after{box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 0 6px rgba(255,255,255,.5)}
.mc.rg{box-shadow:inset 0 0 0 2px var(--cyan)}
.mc.tg::after{width:34%;height:34%;background:var(--cyan);opacity:.85;animation:tgpulse 1.4s ease-in-out infinite}
@keyframes tgpulse{50%{transform:scale(1.3);opacity:.5}}
.mc.ms::after{width:26%;height:26%;background:var(--dim)}
.mc.x{color:var(--pink)} .mc.o{color:var(--yellow)}
.mc.hl{background:#24355a}
.mc.lt{background:#b9bce6;color:#141428} .mc.dk{background:#585e9c;color:#141428}
.mc.sh{background:#3e4c80} .mc.ht{background:var(--bad);color:#2a0710} .mc.sk{background:#7a2433;color:#ffd0d8}
.mc.pw{color:#fff;text-shadow:0 0 2px #000,0 0 1px #000} .mc.pb{color:#151527;text-shadow:0 0 2px #fff}
.mc.nb{background:transparent}

/* ---------- pass screen (hot seat) ---------- */
.pass{position:absolute;inset:0;z-index:5;background:var(--ink2);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;animation:fadeIn .25s}
.pass h3{font:800 italic 32px/1 var(--f-d);text-transform:uppercase;margin:0}
.pass p{margin:0;color:var(--muted);max-width:34ch}
.pass .eye{width:64px;height:64px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line2);transform:skewX(var(--sk))}
.pass .eye svg{width:30px;height:30px}

/* ---------- keyboard cursor ---------- */
.kcur{position:fixed;left:0;top:0;z-index:40;pointer-events:none;border-radius:6px;border:3px solid var(--cyan);box-shadow:0 0 0 2px rgba(8,9,15,.85),0 0 18px var(--cyan);opacity:0;transition:transform .12s var(--ease),width .12s,height .12s,opacity .15s}
.kcur.on{opacity:1}
.kcur.round{border-radius:50%}

/* ---------- effects ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.fx-p{position:absolute;width:9px;height:9px;margin:-4.5px;background:var(--c);box-shadow:0 0 8px var(--c);transform:rotate(45deg);animation:burst .7s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(225deg) scale(var(--s));opacity:0}}
.fx-ring{position:absolute;width:var(--z);height:var(--z);margin:calc(var(--z) / -2);border-radius:50%;border:3px solid var(--c);animation:ring .6s ease-out forwards}
@keyframes ring{from{transform:scale(.2);opacity:1}to{transform:scale(1);opacity:0}}
.fx-float{position:absolute;transform:translate(-50%,-50%);font:800 italic 26px/1 var(--f-d);text-transform:uppercase;text-shadow:3px 3px 0 var(--ink);white-space:nowrap;animation:floatUp 1.1s var(--ease) forwards}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-180%)}}
.fx-flash{position:absolute;inset:0;background:var(--c);animation:flash .45s ease-out forwards}
@keyframes flash{from{opacity:.25}to{opacity:0}}
.fx-confetti{position:absolute;inset:0;width:100%;height:100%}
.fx-shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
.fx-shake-s{animation:shakes .3s ease-in-out}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
@keyframes shakes{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.fx-pop{animation:fxpop .35s var(--spring)}
@keyframes fxpop{40%{transform:scale(1.15)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- tab switch: only the content moves ---------- */
.hbody{--dir:1}
.hbody.leave{opacity:0;transform:translateX(calc(var(--dir) * -18px));transition:opacity .12s ease-in,transform .12s ease-in}
.hbody.tab-in{animation:tabIn .34s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateX(calc(var(--dir) * 26px))}}
.hbody.tab-in .tile{animation-duration:.4s}
.gp-art .icw{display:grid;place-items:center}

/* ---------- opening animation ---------- */
#boot{position:fixed;inset:0;z-index:100;overflow:hidden;background:var(--ink);transition:background-color .2s}
.noboot #boot{display:none}
#boot .b-l,#boot .b-r{position:absolute;top:0;bottom:0;width:60%}
#boot .b-l{left:0;background:var(--pink);clip-path:polygon(0 0,93.4% 0,73.4% 100%,0 100%);animation:bL .5s .05s var(--snap) backwards}
#boot .b-r{right:0;background:var(--yellow);clip-path:polygon(26.6% 0,100% 0,100% 100%,6.6% 100%);animation:bR .5s .05s var(--snap) backwards}
#boot .b-line{position:absolute;inset:0;background:#fff;clip-path:polygon(55.5% 0,56.5% 0,44.5% 100%,43.5% 100%);animation:bLine .3s .42s ease-out backwards}
#boot .b-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.08em;font:800 italic clamp(68px,17vw,180px)/1 var(--f-d);color:var(--ink);letter-spacing:.02em;animation:bShake .35s .72s}
#boot .b1{animation:bInL .42s .32s var(--snap) backwards} #boot .b2{animation:bInR .42s .32s var(--snap) backwards}
#boot .b-slash{display:block;width:.13em;height:.95em;background:#fff;box-shadow:0 0 0 .03em var(--ink);transform:skewX(-14deg);animation:bSlash .25s .62s var(--spring) backwards}
#boot .b-sub{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:700 italic clamp(14px,2.6vw,22px)/1 var(--f-d);letter-spacing:.32em;text-transform:uppercase;color:var(--ink);animation:fadeIn .4s .85s backwards}
#boot .b-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:bFlash .5s .7s ease-out}
@keyframes bL{from{transform:translateX(-102%)}} @keyframes bR{from{transform:translateX(102%)}}
@keyframes bLine{from{clip-path:polygon(55.5% 0,56.5% 0,56.5% 0,55.5% 0)}}
@keyframes bInL{from{transform:translateX(-70vw) skewX(20deg);opacity:0}} @keyframes bInR{from{transform:translateX(70vw) skewX(20deg);opacity:0}}
@keyframes bSlash{from{transform:skewX(-14deg) scaleY(0)}}
@keyframes bShake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes bFlash{0%{opacity:.85}100%{opacity:0}}
/* doors open: the halves leave sideways along the diagonal, the logo flies at the viewer */
#boot.open{background:transparent;pointer-events:none}
#boot.open .b-l{animation:bLout .6s cubic-bezier(.7,0,.25,1) forwards}
#boot.open .b-r{animation:bRout .6s cubic-bezier(.7,0,.25,1) forwards}
#boot.open .b-line,#boot.open .b-sub{opacity:0;transition:opacity .15s}
#boot.open .b-logo{animation:bLogoOut .45s ease-in forwards}
@keyframes bLout{to{transform:translate(-104%,-6%)}} @keyframes bRout{to{transform:translate(104%,6%)}}
@keyframes bLogoOut{to{transform:scale(1.7);opacity:0}}
#boot.skip{opacity:0;transition:opacity .22s;pointer-events:none}

/* ---------- AI presence: thinking dots, speech bubble, crosshair ---------- */
.pcard .tdots{display:none;gap:4px;align-items:center;margin-left:auto}
.pcard-r .tdots{margin-left:0;margin-right:auto}
.pcard .tdots i{width:6px;height:6px;background:var(--sc);transform:skewX(var(--sk));animation:tdot .9s ease-in-out infinite}
.pcard .tdots i:nth-child(2){animation-delay:.15s} .pcard .tdots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:translateY(0) skewX(var(--sk));opacity:.35}30%{transform:translateY(-5px) skewX(var(--sk));opacity:1}}
.pcard.thinking .tdots{display:flex}
/* the dots animation of .thinking is for status text only; on a card it would add an extra row */
.pcard.thinking::after{content:none;display:none}
.pcard.thinking .av{animation:thinkav 1.1s ease-in-out infinite}
@keyframes thinkav{50%{transform:skewX(var(--sk)) scale(1.08)}}
.bubble{position:absolute;top:calc(100% + 10px);right:6px;z-index:8;max-width:min(240px,70vw);padding:8px 12px;background:var(--fg);color:var(--ink);transform-origin:top right;
  box-shadow:4px 4px 0 var(--yellow);opacity:0;transform:scale(.6) translateY(-6px);pointer-events:none;transition:opacity .2s,transform .3s var(--spring);display:flex;flex-direction:column;gap:2px;text-align:left;line-height:1.25}
.bubble::before{content:'';position:absolute;top:-8px;right:18px;border:8px solid transparent;border-top:0;border-bottom-color:var(--fg)}
.bubble.on{opacity:1;transform:none}
.bubble b{font:800 italic 16px/1.1 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.bubble span{font-size:13px}
@media (min-width:960px){.bubble{top:auto;bottom:calc(100% + 12px);right:0;transform-origin:bottom right}.bubble::before{top:auto;bottom:-8px;border-top:8px solid var(--fg);border-bottom:0}}
.aim{position:fixed;left:0;top:0;z-index:39;pointer-events:none;border:2px dashed var(--yellow);border-radius:6px;opacity:0;
  transition:transform .2s var(--ease),width .2s var(--ease),height .2s var(--ease),opacity .15s,border-color .15s}
.aim.on{opacity:.55}
.aim.real{opacity:1;border-style:solid;border-width:3px;box-shadow:0 0 0 2px rgba(8,9,15,.85),0 0 22px rgba(255,216,79,.7)}
.aim::after{content:attr(data-label);position:absolute;top:-17px;left:-3px;padding:2px 6px;font:800 italic 11px/1 var(--f-d);letter-spacing:.1em;background:var(--yellow);color:var(--ink);transform:skewX(var(--sk))}
.aim.lock{animation:aimlock .3s var(--spring)}
@keyframes aimlock{50%{box-shadow:0 0 0 2px rgba(8,9,15,.85),0 0 0 9px rgba(255,216,79,.35),0 0 30px rgba(255,216,79,.8)}}

/* ---------- account ---------- */
.acctp{max-width:560px}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:6px 6px 0 rgba(255,79,216,.35)}
.acard .lead{margin:0;color:var(--muted)}
.amode{margin:0}
.aform{display:flex;flex-direction:column;gap:6px}
.aform label{font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.aform .btn{margin-top:8px}
.aform.busy{opacity:.6;pointer-events:none}
/* Mit Discord anmelden: Discord's blurple, the divider to the name form, the name picker after coming back */
.btn.dc{background:#5865F2;border-color:#5865F2;color:#fff;box-shadow:5px 6px 0 var(--yellow)}
.btn.dc:active{transform:skewX(var(--sk)) translate(4px,5px);box-shadow:1px 1px 0 var(--yellow)}
.btn.dc.busy{opacity:.6;pointer-events:none}
.aor{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;margin:-2px 0}
.aor::before,.aor::after{content:'';flex:1;height:1px;background:var(--line)}
.dcoffer{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid #5865F2;border-radius:10px;background:rgba(88,101,242,.1)}
.dcoffer>b{font-size:17px}
.dcoffer .link{align-self:center;color:var(--muted);font-size:13.5px}
.inp{width:100%;height:46px;padding:0 14px;border-radius:6px;border:1px solid var(--line2);background:var(--ink2);color:var(--fg);font:500 16px/1 var(--f-b);transition:border-color .15s,box-shadow .15s}
textarea.inp{height:auto;padding:10px 14px;line-height:1.4;resize:vertical}
.inp:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,79,216,.2)}
.inp::placeholder{color:var(--dim)}
.aerr{margin:0;min-height:1.2em;color:var(--bad);font-size:14px}
.aerr.big{padding:10px 14px;border:1px solid var(--bad);border-radius:8px;background:rgba(255,93,115,.08)}
.fine{margin:0;font-size:12.5px;color:var(--dim)}
.muted{color:var(--muted)}
.acctp .me{gap:16px}
.ahead{display:flex;align-items:center;gap:14px}
.ahead>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.ahead b{font:800 italic 30px/1 var(--f-d);text-transform:uppercase}
.ahead small{flex-basis:100%;color:var(--muted);font-size:13px}
.abig{width:58px;height:58px;flex:none;display:grid;place-items:center;background:var(--pink);color:var(--ink);font:800 italic 24px/1 var(--f-d);transform:skewX(var(--sk));box-shadow:4px 4px 0 var(--yellow)}
.rtag{font:700 italic 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;transform:skewX(var(--sk));background:var(--panel3);color:var(--muted)}
.rtag.owner{background:var(--yellow);color:var(--ink)} .rtag.admin{background:var(--pink);color:var(--ink)} .rtag.mod{background:var(--good);color:var(--ink)} .rtag.dev{background:var(--cyan);color:var(--ink)}
.rtag.bad{background:rgba(255,93,115,.18);color:var(--bad)}
.sync{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.sync i{width:9px;height:9px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 8px var(--good)}
.sync.sync i{background:var(--yellow);box-shadow:0 0 8px var(--yellow);animation:dotp 1s ease-in-out infinite} .sync.bad i{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.sync span{flex:1;min-width:0}
.arow{display:flex;gap:10px;flex-wrap:wrap}
.arow.wrap{gap:6px}
.abox{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--ink2)}
.abox .inp{flex:1 1 200px}
.abox .aerr{flex-basis:100%}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.sm.danger:hover{background:rgba(255,93,115,.1)}
.top .acct{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border:1px solid var(--line);background:var(--panel);transform:skewX(var(--sk));font:700 italic 15px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:border-color .15s,color .15s}
.top .acct svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.top .acct:hover{border-color:var(--line2);color:var(--fg)}}
.top .acct.in{color:var(--fg);border-color:color-mix(in srgb,var(--pink) 50%,var(--line))}
.top .acct.in svg{color:var(--pink)}
@media (max-width:520px){.top .acct span{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top .acct{padding:0 10px}}

/* ---------- admin ---------- */
.admin{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.abody{display:flex;flex-direction:column;gap:14px}
.kpi small{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.apanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.apanel h3{margin:0 0 6px;font:800 italic 18px/1 var(--f-d);text-transform:uppercase;display:flex;align-items:baseline;gap:8px}
.apanel h3 small{font-size:13px;color:var(--pink)}
.aline{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.aline:last-of-type{border-bottom:0}
.aline span{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.aline small{color:var(--dim);font-size:12px;white-space:nowrap}
.aline.log{align-items:baseline}
.aline.log span{white-space:normal}
.link{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.link:hover{text-decoration-color:var(--pink)}
.astat{display:grid;grid-template-columns:minmax(0,9em) 1fr auto;align-items:center;gap:10px;font-size:13px;padding:3px 0}
.astat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.astat i{height:8px;background:var(--panel3);position:relative;transform:skewX(-20deg)}
.astat i::after{content:'';position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--pink),var(--yellow))}
.astat b{font-variant-numeric:tabular-nums}
.asearch{display:flex;gap:8px}
.pcard-a{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pcard-a>.pa-top,.pcard-a>.pa-info,.pcard-a>.pa-note,.pcard-a>.arow{padding-inline:16px}
.pa-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:14px}
.pa-top b{font:800 italic 22px/1 var(--f-d);text-transform:uppercase}
.adot{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.pcard-a.on .adot{background:var(--good);box-shadow:0 0 8px var(--good)}
.pa-info{font-size:13px;color:var(--muted);padding-top:6px}
.pa-info .good{color:var(--good)}
.pa-note{font-size:13px;margin-top:8px;padding:8px 12px!important;background:var(--ink2);border-left:3px solid var(--yellow)}
.pa-note.bad{border-left-color:var(--bad)}
.pcard-a>.arow{padding-block:12px 14px}
.pw{position:relative}
.abox .pw{flex:1 1 200px}
.pw .inp{padding-right:50px}
.pw .eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:42px;height:40px;display:grid;place-items:center;color:var(--dim);border-radius:4px;transition:color .15s}
.pw .eye:hover{color:var(--fg)}
.pw .eye svg{width:20px;height:20px}
input::-ms-reveal,input::-ms-clear{display:none}

/* ---------- online: friends, invitations, rankings ---------- */
.online{display:flex;flex-direction:column;gap:18px}
.ogrid{display:grid;gap:16px}
@media (min-width:960px){.ogrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.ocol{display:flex;flex-direction:column;gap:12px;min-width:0}
.apanel h4{margin:12px 0 4px;font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.apanel .asearch{margin-bottom:6px}
.fline{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.fline:last-child{border-bottom:0}
.fline b{font:700 italic 17px/1 var(--f-d);text-transform:uppercase}
.fline small{flex:1;min-width:0;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fline .adot,.mrow .adot{flex:none}
.fline.on .adot{background:var(--good);box-shadow:0 0 8px var(--good)}
.fline.req{background:rgba(255,216,79,.06);margin:0 -16px;padding-inline:16px}
.iconbtn.sm{width:34px;height:34px}
.iconbtn.sm svg{width:16px;height:16px}
.obanner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:10px;background:linear-gradient(100deg,rgba(255,79,216,.18),var(--panel) 70%);border:1px solid var(--pink);box-shadow:4px 4px 0 var(--yellow)}
.obanner.inv{background:linear-gradient(100deg,rgba(255,216,79,.16),var(--panel) 70%);border-color:var(--yellow);box-shadow:4px 4px 0 var(--pink)}
.obanner small{display:block;font:700 italic 11px/1.4 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.obanner b{font:800 italic 19px/1.1 var(--f-d);text-transform:uppercase}
.chips.mini{display:flex;gap:6px;margin:0;width:auto;padding:2px 2px 8px}
.chips.mini button{height:30px;padding:0 11px;font-size:13px}
.brow{display:grid;grid-template-columns:2.4em minmax(0,1fr) 4em 4.4em 4em;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;font-size:14px}
.brow.head{font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.brow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.brow .pos{font:800 italic 18px/1 var(--f-d);color:var(--muted)}
.brow:nth-child(2) .pos{color:var(--yellow)} .brow:nth-child(3) .pos{color:#cfd2f0} .brow:nth-child(4) .pos{color:#e0a55a}
.brow .w{font-weight:700;color:var(--fg);text-align:right} .brow .p,.brow .q{text-align:right;color:var(--muted)}
.brow.me{background:rgba(255,79,216,.1);border-left:3px solid var(--pink);padding-left:6px}
.brow.gap{display:block;text-align:center;color:var(--dim);border:0;padding:2px}
.gpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:4px 0 8px}
.gpick button{--acc:var(--pink);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);transition:border-color .15s,transform .12s}
@media (hover:hover) and (pointer:fine){.gpick button:hover{border-color:var(--acc);transform:translateY(-2px)}}
.gpick .ic{width:40px;height:40px}
.gpick b{font:700 italic 14px/1.1 var(--f-d);text-transform:uppercase}
.gp-online{margin:14px 18px 0;display:flex;flex-direction:column;gap:2px}
.gp-online .hint{margin:0 0 6px}
.tabs .nb{position:absolute;top:2px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--pink);color:var(--ink);font:800 11px/17px var(--f-d);font-style:normal;text-align:center}
.tabs.desk .nb{top:-7px;right:-4px;transform:skewX(10deg)}
.tabs button{position:relative}
.wait{align-items:center}
.spin{width:64px;height:64px;position:relative;margin:4px auto 6px}
.spin i{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--pink);animation:spin1 .9s linear infinite}
.spin i+i{inset:10px;border-top-color:var(--yellow);animation-duration:1.3s;animation-direction:reverse}
@keyframes spin1{to{transform:rotate(360deg)}}
.icard{position:fixed;z-index:85;left:50%;bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(calc(100vw - 24px),460px);display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--yellow);border-radius:10px;box-shadow:6px 6px 0 var(--pink),0 20px 50px rgba(0,0,0,.6);animation:icIn .45s var(--spring);transition:opacity .25s,transform .25s}
.icard.out{opacity:0;transform:translate(-50%,20px)}
@media (min-width:960px){.icard{left:auto;right:24px;bottom:24px;transform:none}.icard.out{transform:translateY(20px)}}
@keyframes icIn{from{opacity:0;transform:translate(-50%,40px) scale(.9)}}
@media (min-width:960px){@keyframes icIn{from{opacity:0;transform:translateY(40px) scale(.9)}}}
.icard .ic-ico{width:44px;height:44px;flex:none}
.icard .ic-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.icard small{font:700 italic 11px/1.3 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.icard b{font:800 italic 20px/1.05 var(--f-d);text-transform:uppercase}
.icard span{font-size:13px;color:var(--muted)}
.icard .ic-act{display:flex;flex-direction:column;gap:6px}
.pcard.off{opacity:.55}
.pcard.off .nm small::after{content:' · offline';color:var(--bad)}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.mrow.live{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.mrow .m-g{width:40px;height:40px;flex:none}
.mrow .m-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mrow .m-t b{font:700 italic 17px/1.15 var(--f-d);text-transform:uppercase}
.mrow .m-t b i{font-style:normal;color:var(--dim);font-size:13px;text-transform:none}
.mrow .m-t small{color:var(--muted);font-size:12.5px}
.mrow .m-r{font-size:13px;color:var(--muted)}
.mrow .m-r .good{color:var(--good)}
.mrow .m-a{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
@media (max-width:620px){.mrow{flex-wrap:wrap}.mrow .m-a{flex-direction:row;width:100%;justify-content:flex-end}}
.rtag.live{background:var(--good);color:var(--ink)}
.obanner.open{background:linear-gradient(100deg,rgba(98,240,255,.14),var(--panel) 70%);border-color:var(--cyan);box-shadow:4px 4px 0 var(--pink)}
.icard.open{border-color:var(--cyan)}
.icard.open small{color:var(--cyan)}
.gp-online .btn.big{margin-top:8px}

/* ---------- rankings ---------- */
.rgames{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 10px;margin:0 -2px}
.rgames::-webkit-scrollbar{display:none}
.rgames button{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:8px 4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--muted);transition:border-color .15s,color .15s,background .15s}
.rgames .ic{width:28px;height:28px;display:grid;place-items:center}
.rgames .ic.all svg{width:22px;height:22px;color:var(--yellow)}
.rgames small{font:700 italic 11px/1.1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.rgames button:hover{color:var(--fg);border-color:var(--line2)}}
.rgames button.on{color:var(--fg);border-color:var(--pink);background:rgba(255,79,216,.12);box-shadow:0 0 0 1px var(--pink) inset}
#oboard{display:flex;flex-direction:column;gap:10px;transition:opacity .15s}
#oboard.loading{opacity:.45}
.rmine{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:linear-gradient(100deg,rgba(255,79,216,.16),var(--panel2) 70%);border:1px solid color-mix(in srgb,var(--pink) 50%,var(--line))}
.rmine.none{background:var(--panel2);border-color:var(--line)}
.rmine .rp{font:800 italic 38px/1 var(--f-d);color:var(--pink);min-width:2.2em;text-align:center}
.rmine small{display:block;font:700 italic 11px/1.4 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rmine b{display:block;font:800 italic 22px/1.1 var(--f-d);text-transform:uppercase}
.rmine span{font-size:12.5px;color:var(--muted)}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;padding-top:8px}
.pod{--pc:var(--yellow);display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.pod.p2{--pc:#cfd2f0} .pod.p3{--pc:#e0a55a}
.pod .medal{width:34px;height:34px;display:grid;place-items:center;background:var(--pc);color:var(--ink);font:800 italic 18px/1 var(--f-d);transform:skewX(var(--sk));box-shadow:3px 3px 0 rgba(0,0,0,.4)}
.pod b{font:800 italic 17px/1.1 var(--f-d);text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.pod em{font:800 italic 30px/1 var(--f-d);font-style:italic;color:var(--pc)}
.pod small{font-size:11.5px;color:var(--muted)}
.pod .step{display:block;width:100%;margin-top:6px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 35%,var(--panel2)),var(--panel2));border:1px solid color-mix(in srgb,var(--pc) 45%,var(--line));border-bottom:0}
.pod.p1 .step{height:64px} .pod.p2 .step{height:44px} .pod.p3 .step{height:30px}
.pod.me b{color:var(--pink)}
.rhead,.rrow{display:grid;grid-template-columns:2.2em minmax(0,1fr) minmax(70px,30%) 3em;align-items:center;gap:10px}
.rhead{font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:0 8px}
.rhead span:last-child{text-align:right}
.rrow{padding:8px;border-radius:8px;background:var(--panel2);border:1px solid transparent}
.rrow.me{border-color:var(--pink);background:rgba(255,79,216,.1)}
.rrow .pos{font:800 italic 18px/1 var(--f-d);color:var(--muted);text-align:center}
.rrow .who{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.rrow .who b{font:700 italic 16px/1.1 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rrow .who small{flex-basis:100%;font-size:11.5px;color:var(--dim)}
.rrow .rate{display:flex;flex-direction:column;gap:3px}
.rrow .rate i{display:block;height:6px;background:var(--panel3);position:relative;transform:skewX(-20deg)}
.rrow .rate i::after{content:'';position:absolute;inset:0;width:var(--w);background:linear-gradient(90deg,var(--pink),var(--yellow))}
.rrow .rate small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rrow .w{font:800 italic 22px/1 var(--f-d);text-align:right;font-variant-numeric:tabular-nums}
.rgap{text-align:center;color:var(--dim)}
.empty.small{padding:22px 16px}

/* ---------- guests ---------- */
.tile.locked .art{filter:saturate(.35) brightness(.75)}
.tile.locked .lk{position:absolute;right:10px;bottom:8px;width:28px;height:28px;display:grid;place-items:center;background:var(--ink);border:1px solid var(--line2);border-radius:6px;color:var(--yellow)}
.tile.locked .lk svg{width:16px;height:16px}
.tile .meta em.lock{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 45%,var(--line))}
.gp-lock{display:flex;gap:14px;align-items:flex-start;margin:16px 18px 0;padding:14px;border-radius:14px;background:rgba(255,216,79,.07);border:1px dashed color-mix(in srgb,var(--yellow) 55%,var(--line))}
.gp-lock .lki{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--yellow);color:var(--ink);transform:skewX(var(--sk))}
.gp-lock .lki svg{width:22px;height:22px}
.gp-lock b{font:800 italic 19px/1.1 var(--f-d);text-transform:uppercase}
.gp-lock p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.top .acct em{font-style:normal;font-size:12px;color:var(--pink);margin-left:2px}
.top .acct.guest{border-color:color-mix(in srgb,var(--pink) 40%,var(--line))}
@media (max-width:520px){.top .acct em{display:none}}
.ogrid.solo{grid-template-columns:minmax(0,720px)}

/* ---------- settings (extended) ---------- */
.opts{max-width:1040px}
.ogroups{display:grid;gap:20px}
@media (min-width:960px){.ogroups{grid-template-columns:1fr 1fr;align-items:start;gap:22px 28px}}
.oh{font:700 italic 13px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 2px}
.opt.off{opacity:.45} .opt.off input{pointer-events:none}
div.opt:hover{background:transparent}
.ovol span{gap:6px}
.ovol em{font:700 italic 15px/1 var(--f-d);color:var(--fg);min-width:46px;text-align:right;font-style:normal}
.ovol input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;touch-action:pan-y}
.ovol input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--pink) var(--p,80%),var(--panel3) var(--p,80%));border-radius:3px}
.ovol input[type=range]::-moz-range-track{height:6px;background:var(--panel3);border-radius:3px}
.ovol input[type=range]::-moz-range-progress{height:6px;background:var(--pink);border-radius:3px}
.ovol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background:var(--fg);border:0;transform:skewX(var(--sk));box-shadow:3px 3px 0 var(--pink)}
.ovol input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--fg);border:0;border-radius:0;box-shadow:3px 3px 0 var(--pink)}
.orow{flex-wrap:wrap}
.oseg{display:flex;background:var(--panel3);padding:3px;gap:3px;transform:skewX(var(--sk));flex:none}
.oseg button{padding:7px 11px;font:700 italic 13px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:background .15s,color .15s}
.oseg button.on{background:var(--pink);color:var(--ink)}
@media (max-width:420px){.orow .oseg{width:calc(100% - 36px);margin-left:36px} .orow .oseg button{flex:1}}

/* ---------- install card, install help, update bar ---------- */
.instc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:linear-gradient(100deg,color-mix(in srgb,var(--cy) 14%,var(--panel)),var(--panel));border:1px solid var(--line);border-left:4px solid var(--cy);animation:instIn .4s var(--ease)}
@keyframes instIn{from{opacity:0;transform:translateY(8px)}}
.instc[hidden]{display:none}
.instc .ic{width:38px;height:38px;display:grid;place-items:center;color:var(--cy);flex:none} .instc .ic svg{width:24px;height:24px}
.instc .it{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.instc b{font:700 italic 17px/1.1 var(--f-d);text-transform:uppercase}
.instc small{font-size:12.5px;color:var(--muted)}
.instc .x,.upbar .x{width:34px;height:34px;display:grid;place-items:center;color:var(--muted);flex:none} .instc .x svg,.upbar .x svg{width:16px;height:16px}
.isteps{list-style:none;padding:0;margin:4px 0 12px;display:flex;flex-direction:column;gap:10px;text-align:left}
.isteps li{display:flex;align-items:center;gap:12px}
.isteps li>b{width:30px;height:30px;display:grid;place-items:center;flex:none;background:var(--pink);color:var(--ink);font:800 italic 16px/1 var(--f-d);transform:skewX(var(--sk))}
.isteps em{font-style:normal;font-weight:700;color:var(--fg)}
.isteps svg{width:18px;height:18px;vertical-align:-3px;color:var(--cy)}
.upbar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;width:min(460px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;background:var(--panel2);border:1px solid var(--line2);border-left:4px solid var(--cy);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:upInB .35s var(--spring);transition:opacity .25s,transform .25s}
.upbar>svg{width:22px;height:22px;color:var(--cy);flex:none}
.upbar span{flex:1;display:flex;flex-direction:column;line-height:1.25} .upbar small{font-size:12.5px;color:var(--muted)}
.upbar.out{opacity:0;transform:translate(-50%,20px)}
.hint.dch{border-left:3px solid #5865f2;padding:6px 10px;background:rgba(88,101,242,.1);border-radius:6px;color:var(--fg,#e8e9f3)}
.upbar.dc{border-left-color:#5865f2} .upbar .dcic{width:34px;height:34px;flex:none;display:block} .upbar .dcic svg{width:100%;height:100%;display:block} .upbar .dn{font-style:normal;color:var(--pink)}
/* the update note sits above the tab bar and waits while a match is running */
@media (max-width:959px){.upbar{bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom,0px))}}
body:has(.view.play) .upbar{display:none}
@keyframes upInB{from{opacity:0;transform:translate(-50%,24px)}}
@keyframes upIn{from{opacity:0;transform:translate(-50%,-24px)}}

/* ---------- display settings ---------- */
.nocoords .chess .co{display:none}
.nohints .chess .dot::after,.nohints .chess .ring::after,.nohints .ck .can .pc::after,.nohints .ck .nx::after,.nohints .rv .sq.ok::after,.nohints .mill .tg{display:none}

/* ---------- installed app ---------- */
.standalone body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.standalone input,.standalone textarea{-webkit-user-select:text;user-select:text}
html,body{-webkit-tap-highlight-color:transparent}
.instc .btn{flex:none} .instc .it b{white-space:nowrap}
.ovib{display:flex;align-items:center;gap:8px;flex:none}
.ohint{margin:0;padding:12px 16px 14px 52px;font-size:13px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line);background:color-mix(in srgb,var(--cy) 6%,transparent)}
.ohint b{color:var(--fg)}
@media (max-width:420px){.orow .ovib{width:calc(100% - 36px);margin-left:36px} .orow .ovib .oseg{flex:1;width:auto;margin-left:0}}
.ospc{width:22px;flex:none}

/* ---------- weekly ranking ---------- */
.rtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rtop h3{margin:0}
.rper button{padding:6px 10px;font-size:12px}
.rweek{margin:2px 0 10px;font-size:13px;color:var(--muted)}
.rweek b{color:var(--fg)} .rweek em{font-style:normal;font-weight:700;color:var(--cy)}
.rlast{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:0 0 12px;border-radius:8px;background:var(--panel2);border:1px dashed var(--line2)}
.rlast>svg{width:22px;height:22px;color:var(--yellow);flex:none}
.rlast span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rlast small{width:100%;font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rlast b{font-weight:700;font-size:14px} .rlast b.l1{color:var(--yellow)}

/* ---------- loading and offline ---------- */
.skel{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.skel i{display:block;height:44px;border-radius:8px;background:linear-gradient(90deg,var(--panel2) 20%,var(--panel3) 50%,var(--panel2) 80%);background-size:250% 100%;animation:skel 1.3s linear infinite}
.skel i:nth-child(2){opacity:.7} .skel i:nth-child(3){opacity:.45} .skel i:nth-child(n+4){opacity:.3}
@keyframes skel{from{background-position:100% 0}to{background-position:-150% 0}}
.lowfx .skel i{animation:none}
.offpill{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:8px;padding:7px 14px;max-width:calc(100% - 24px);border-radius:999px;background:var(--panel2);border:1px solid var(--warn);font-size:12.5px;color:var(--muted);box-shadow:0 8px 24px rgba(0,0,0,.45);animation:upIn .3s var(--ease);transition:opacity .25s;pointer-events:none}
.offpill svg{width:16px;height:16px;color:var(--warn);flex:none}
.offpill b{color:var(--fg)} .offpill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.offpill.out{opacity:0}
.lv .lon{color:var(--cy);font-weight:600}

/* ---------- first-start welcome ---------- */
.wicons{display:grid;grid-template-columns:repeat(3,56px);gap:12px}
.wicons i{display:block;width:56px;height:56px;animation:wpop .5s var(--spring) backwards;animation-delay:calc(var(--k) * 70ms)}
.wicons svg{width:100%;height:100%}
@keyframes wpop{from{transform:scale(.3) rotate(-12deg);opacity:0}}
.wmodes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.wmode{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);text-align:center;animation:wpop .45s var(--spring) backwards}
.wmode:nth-child(2){animation-delay:.08s} .wmode:nth-child(3){animation-delay:.16s}
.wmode svg{width:26px;height:26px;color:var(--pink)}
.wmode b{font:800 italic 15px/1.1 var(--f-d);text-transform:uppercase}
.wmode small{font-size:11.5px;color:var(--muted)}
.lowfx .wicons i,.lowfx .wmode{animation:none}
/* first start: quick start "Wer spielt?" -> one tap into a match */
.modal.qsm{max-width:500px}
.qs{display:flex;flex-direction:column;gap:14px}
.qs-k{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:700 italic 13px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.qs-k b{font:600 11.5px/1.2 var(--f-b,inherit);letter-spacing:0;text-transform:none;color:var(--muted);text-align:right}
.qs h3{font:800 italic clamp(34px,9vw,44px)/.95 var(--f-d);text-transform:uppercase;margin:0;background:linear-gradient(100deg,var(--fg) 40%,var(--pink) 75%,var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.qs-who{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px}
.qs-who button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 6px 12px;border-radius:10px;background:var(--panel2);border:1.5px solid var(--line);color:var(--fg);cursor:var(--cur-p,pointer);text-align:center;transition:transform .2s var(--spring),border-color .2s,background .2s;animation:wpop .45s var(--spring) backwards}
.qs-who button:nth-child(2){animation-delay:.07s}.qs-who button:nth-child(3){animation-delay:.14s}
.qs-who svg{width:28px;height:28px;color:var(--dim);transition:color .2s,transform .3s var(--spring)}
.qs-who b{font:800 italic 15px/1.1 var(--f-d);text-transform:uppercase}
.qs-who small{font-size:11.5px;color:var(--muted)}
.qs-who button:hover{border-color:var(--line2)}
.qs-who button.on{border-color:var(--pink);background:linear-gradient(180deg,rgba(255,79,216,.18),rgba(255,79,216,.04));box-shadow:0 0 0 3px rgba(255,79,216,.15),0 8px 24px -10px rgba(255,79,216,.6)}
.qs-who button.on svg{color:var(--pink);transform:scale(1.12)}
.qs-who button.on::after{content:"";position:absolute;bottom:-8px;left:50%;width:12px;height:12px;background:var(--panel);border-right:1.5px solid var(--pink);border-bottom:1.5px solid var(--pink);transform:translateX(-50%) rotate(45deg) scale(.0);animation:qsTip .25s .05s var(--spring) forwards}
@keyframes qsTip{to{transform:translateX(-50%) rotate(45deg) scale(1)}}
.qs-list{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;background:var(--ink2);border:1px solid var(--line)}
.qs-hint{margin:0 2px 2px;font-size:13px;color:var(--muted);line-height:1.4}
.qs-games{display:flex;flex-direction:column;gap:8px}
.qs-g{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);cursor:var(--cur-p,pointer);text-align:left;transition:transform .15s var(--ease),border-color .15s,background .15s;animation:qsIn .35s var(--spring) backwards;animation-delay:calc(var(--k) * 60ms)}
@keyframes qsIn{from{opacity:0;transform:translateY(8px)}}
.qs-g .ic{flex:none;width:46px;height:46px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 14%,transparent)}
.qs-g .ic svg{width:36px;height:36px}
.qs-gt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qs-gt b{font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.qs-gt small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-play{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:#140a18;box-shadow:0 4px 16px -4px var(--pink);transition:transform .2s var(--spring)}
.qs-play svg{width:18px;height:18px}
.qs-g:hover,.qs-g:focus-visible{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 9%,var(--panel2))}
.qs-g:hover .qs-play,.qs-g:focus-visible .qs-play{transform:scale(1.12)}
.qs-g:active{transform:scale(.98)}
.qs-g:first-child .qs-play{animation:qsPulse 1.8s 1s ease-out infinite}
@keyframes qsPulse{0%{box-shadow:0 0 0 0 rgba(255,79,216,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,79,216,0)}}
.qs-skip{align-self:center;background:none;border:0;padding:6px 10px;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:var(--cur-p,pointer)}
.qs-skip:hover{color:var(--fg)}
.lowfx .qs-who button,.lowfx .qs-g,.lowfx .qs-g:first-child .qs-play,.lowfx .qs-who button.on::after{animation:none}
.lowfx .qs-who button.on::after{transform:translateX(-50%) rotate(45deg)}


/* ---------- chess clock ---------- */
.pcard .clk{margin-left:auto;flex:none;padding:5px 9px;min-width:62px;text-align:center;font:800 italic 20px/1 var(--f-d);font-variant-numeric:tabular-nums;background:var(--panel2);border:1px solid var(--line);color:var(--muted);transform:skewX(var(--sk));transition:background .2s,color .2s}
.pcard-r .clk{margin-left:0;margin-right:auto}
.pcard .clk.run{background:var(--sc);color:var(--ink);border-color:var(--sc)}
.pcard .clk.low{color:var(--bad)} .pcard .clk.run.low{background:var(--bad);color:#fff;border-color:var(--bad);animation:clkp 1s steps(2) infinite}
@keyframes clkp{50%{filter:brightness(1.3)}}

/* ---------- reactions ---------- */
.pbar{position:relative}
.emopick{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;grid-template-columns:repeat(4,46px);gap:6px;padding:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.5);animation:pop .22s var(--spring)}
.emopick button{height:46px;border-radius:8px;font-size:24px;line-height:1;background:var(--panel)}
@media (hover:hover) and (pointer:fine){.emopick button:hover{background:var(--panel3)}}
.emopick button[data-e=gg],.kquick button[data-emo=gg]{font:800 italic 17px/1 var(--f-d);color:var(--yellow)}
.pcard .emo{position:absolute;z-index:5;left:50%;top:-6px;font-size:34px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:emoUp 2.6s var(--ease) forwards}
.pcard .emo.txt{font:800 italic 26px/1 var(--f-d);color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}
@keyframes emoUp{0%{transform:translate(-50%,10px) scale(.3);opacity:0}12%{transform:translate(-50%,-26px) scale(1.15);opacity:1}25%{transform:translate(-50%,-30px) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-60px) scale(.9);opacity:0}}
.lowfx .pcard .emo{animation:none;transform:translate(-50%,-30px)}
.kquick{display:flex;justify-content:center;gap:8px;margin:2px 0 12px}
.kquick button{width:46px;height:40px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-size:21px;line-height:1;transition:transform .15s var(--spring)}
.kquick button:active{transform:scale(.88)}
.kemo{position:relative;height:0}
.kemo-i{position:absolute;left:50%;bottom:6px;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:emoUp 2.6s var(--ease) forwards}
.kemo-i b{font-size:40px;line-height:1} .kemo-i small{font:700 italic 12px/1.3 var(--f-d);text-transform:uppercase;color:var(--muted)}
.ko .btn.pulse{animation:rpulse 1s ease-in-out infinite}
@keyframes rpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--pink) 35%,transparent)}}
.ko .btn.waiting{opacity:.8}

/* ---------- player profile ---------- */
.plink{cursor:var(--cur-p,pointer);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.plink:hover{text-decoration-color:currentColor}
.modal.profm{width:min(100%,560px)}
.prof h4{margin:16px 0 8px;font:700 italic 13px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.phead{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.phead>div{flex:1;min-width:0;display:flex;flex-direction:column}
.phead b{font:800 italic 26px/1.05 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.phead small{color:var(--muted);font-size:13px}
.phead .good{color:var(--good)}
.kpis.pk{grid-template-columns:repeat(4,1fr);gap:8px}
.kpis.pk .kpi{padding:10px 8px} .kpis.pk .kpi b{font-size:24px}
@media (max-width:420px){.kpis.pk{grid-template-columns:repeat(2,1fr)}}
.pstreak{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--warn) 14%,var(--panel2));color:var(--warn)}
.pstreak svg{width:18px;height:18px}
.pvs{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;padding:10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.pvs b{font:800 italic 26px/1 var(--f-d);display:flex;gap:6px} .pvs b .me{color:var(--pink)} .pvs b i{color:var(--dim)}
.pvs small{color:var(--muted);font-size:12px}
.pgames{display:flex;flex-direction:column;gap:6px}
.pgame{display:grid;grid-template-columns:30px minmax(0,1fr) 30% auto;align-items:center;gap:10px}
.pgame .ic,.prec .ic{width:30px;height:30px} .pgame .ic svg,.prec .ic svg{width:100%;height:100%}
.pg-n{display:flex;flex-direction:column;line-height:1.2;min-width:0} .pg-n b{font-size:14px} .pg-n small{color:var(--muted);font-size:12px} .pg-n small b.pg-elo{font-size:12px;color:var(--yellow)}
.pg-bar{display:flex;height:6px;gap:2px;overflow:hidden;background:var(--panel3);transform:skewX(-20deg)}
.pg-bar .w{background:var(--good)} .pg-bar .d{background:var(--dim)} .pg-bar .l{background:var(--bad)}
.pgame em{font:700 italic 15px/1 var(--f-d);font-style:normal;font-variant-numeric:tabular-nums}
.precs{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto}
.prec{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:var(--panel2)}
.pr-r{width:26px;height:26px;flex:none;display:grid;place-items:center;font:800 italic 14px/1 var(--f-d);transform:skewX(var(--sk));background:var(--panel3);color:var(--muted)}
.prec.win .pr-r{background:var(--good);color:var(--ink)} .prec.loss .pr-r{background:var(--bad);color:#fff} .prec.draw .pr-r{background:var(--dim);color:var(--ink)}
.pr-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .pr-t b{font-size:14px} .pr-t small{font-size:12px;color:var(--muted)}
.pr-t .link{font-size:12px}
.pr-d{font-size:12px;color:var(--dim);flex:none}
.prof .actions{margin-top:16px}
.pchoose{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:12px}
.pchoose[hidden]{display:none}
.pchoose button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
@media (hover:hover) and (pointer:fine){.pchoose button:hover{border-color:var(--pink)}}
.pchoose .ic{width:36px;height:36px} .pchoose .ic svg{width:100%;height:100%}
.pchoose small{font-size:11px;color:var(--muted);text-align:center;line-height:1.2}
.phead small b{font:inherit;text-transform:none}

/* ---------- party games: 2-4 players (cards 1+3 left, 2+4 right; colours pink, yellow, cyan, green) ---------- */
:root{--p3:var(--cyan);--p4:var(--good);--p3hi:#c4f9ff;--p4hi:#c6ffdb}
.c3{color:var(--p3);font-weight:600} .c4{color:var(--p4);font-weight:600}
.duel.party{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"l r" "c c"}
.pcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.pcol-l{grid-area:l} .pcol-r{grid-area:r}
.pcol .pcard{grid-area:auto}
.pcard.ps1{--sc:var(--pink)} .pcard.ps2{--sc:var(--yellow)} .pcard.ps3{--sc:var(--p3)} .pcard.ps4{--sc:var(--p4)}
.duel.party .pcard{padding:5px 8px;gap:8px}
.duel.party .pcard .av{width:28px;height:28px;font-size:12px}
.duel.party .pcard .av svg{width:16px;height:16px}
.duel.party .pcard .nm b{font-size:15px}
.duel.party .pcard .nm small{font-size:11px}
.duel.party .pcard .wins{display:flex;align-items:baseline;gap:3px;margin-left:auto}
.duel.party .pcard-r .wins{margin-left:0;margin-right:auto}
.duel.party .pcard .wins b{font:800 italic 20px/1 var(--f-d);color:var(--sc);font-variant-numeric:tabular-nums}
.duel.party .pcard .wins small{display:none}
.duel.party .pcard .tdots{display:none!important}
@media (min-width:960px){
  .duel.party{grid-template-columns:210px minmax(0,1fr) 210px;grid-template-areas:"l c r"}
  .pcol{gap:14px;margin-top:44px}
  .duel.party .pcard{margin-top:0;padding:14px 16px;gap:8px}
  .duel.party .pcard .av{width:44px;height:44px;font-size:16px}
  .duel.party .pcard .av svg{width:24px;height:24px}
  .duel.party .pcard .nm b{font-size:22px}
  .duel.party .pcard .wins{margin:0;width:100%;padding-top:8px}
  .duel.party .pcard-r .wins{margin:0}
  .duel.party .pcard .wins b{font-size:30px}
  .duel.party .pcard .wins small{display:inline}
}
.ko.w1{--bc:var(--pink)} .ko.w2{--bc:var(--yellow)} .ko.w3{--bc:var(--cyan)} .ko.w4{--bc:var(--good)}
.eparty{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.eparty .ep{display:flex;flex-direction:column;align-items:center;gap:4px}
.eparty .ep b{font:800 italic 34px/1 var(--f-d);font-variant-numeric:tabular-nums}
.eparty .ep small{font:700 italic 13px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* corner touch pads for action games with up to 4 players at one device (rotated for players on the far side) */
.pads{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;user-select:none;-webkit-user-select:none;touch-action:none}
.pads.one{grid-template-columns:1fr}
.pads.far{transform:rotate(180deg)}
.pad{--pc:var(--pink);display:flex;gap:6px;min-height:58px;padding:5px;border-radius:12px;border:2px solid color-mix(in srgb,var(--pc) 55%,transparent);background:color-mix(in srgb,var(--pc) 10%,var(--panel));position:relative}
.pad.dead{opacity:.35}
.pad button{flex:1;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--pc) 18%,var(--panel2));color:var(--pc);touch-action:none;transition:transform .06s,background .06s}
.pad button svg{width:26px;height:26px}
.pad button.dn{transform:scale(.94);background:color-mix(in srgb,var(--pc) 45%,var(--panel2));color:var(--ink)}
.pad .pk{position:absolute;top:-8px;left:10px;font:800 italic 11px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;background:var(--pc);color:var(--ink);transform:skewX(var(--sk))}
.pad.p1{--pc:var(--pink)} .pad.p2{--pc:var(--yellow)} .pad.p3{--pc:var(--cyan)} .pad.p4{--pc:var(--good)}
.pad.empty{visibility:hidden}
@media (hover:hover) and (pointer:fine){.pads.kb-hide{display:none}}

/* ---------- friends ---------- */
.rtag.good{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.fhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.fhead h3{margin:0}
.fhead h3 small{color:var(--muted);font-size:12px;letter-spacing:.06em}
.fav{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--panel3);color:var(--fg);font:800 italic 14px/1 var(--f-d);transform:skewX(var(--sk))}
.fav i{position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;border-radius:50%;background:var(--dim);border:2px solid var(--panel);transform:skewX(10deg)}
.frow.on .fav{background:color-mix(in srgb,var(--good) 22%,var(--panel3))}
.frow.on .fav i{background:var(--good);box-shadow:0 0 8px var(--good)}
.frow{display:flex;align-items:center;gap:12px;padding:9px 8px;margin:0 -8px;border-radius:8px;cursor:var(--cur-p,pointer);transition:background .15s;min-width:0}
@media (hover:hover) and (pointer:fine){.frow:hover{background:var(--panel2)}}
.frow .ft{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.frow .ft b{font:700 italic 17px/1.1 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .ft small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow.on .ft small{color:var(--good)}
.frow .btn,.frow .iconbtn,.frow .rtag{flex:none}
.flist{display:flex;flex-direction:column}
.freqs{margin:0 -8px 8px;padding:4px 8px 6px;border-radius:10px;background:color-mix(in srgb,var(--yellow) 8%,transparent);border:1px solid color-mix(in srgb,var(--yellow) 30%,transparent)}
.freqs h4{color:var(--yellow);margin:6px 0 2px}
.frow.req .fav{background:color-mix(in srgb,var(--yellow) 25%,var(--panel3))}
.fout{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.fout small{font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.fchip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:13px;font-weight:600}
.fchip button{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--muted)} .fchip button:hover{background:var(--panel3);color:var(--fg)}
.fchip svg{width:12px;height:12px}
.fempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 8px 8px}
.fempty>svg{width:40px;height:40px;color:var(--pink)}
.fempty b{font:800 italic 20px/1.1 var(--f-d);text-transform:uppercase}
.fempty p{margin:0 0 6px;color:var(--muted);font-size:13.5px;max-width:34ch}
.fhint{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
/* add-friend dialog */
.modal.faddm{width:min(100%,520px)}
.fadd{display:flex;flex-direction:column;gap:12px}
.fadd-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fadd-h h3{margin:0;font:800 italic 24px/1.1 var(--f-d);text-transform:uppercase}
.fseg{width:100%} .fseg button{flex:1;padding:9px 6px}
.inp.big{font-size:17px;padding:13px 14px}
.fres{display:flex;flex-direction:column;min-height:120px}
.fres .fhint{padding:14px 2px}
.fcode{display:flex;gap:18px;align-items:center}
.fqr{width:184px;flex:none;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#fff;display:grid;place-items:center;box-shadow:5px 5px 0 var(--pink)}
.fqr svg{width:100%;height:100%;display:block}
.fqr .fhint{color:#555;padding:12px;text-align:center}
.fqr-load{width:80%}
.fcode-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.fcode-t small{font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fcode-t>b{font:800 italic 40px/1 var(--f-d);letter-spacing:.08em;color:var(--yellow);font-variant-numeric:tabular-nums}
.fcode-t p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
.fnew{align-self:flex-start;font-size:12.5px;color:var(--muted);font-weight:500}
@media (max-width:520px){.fcode{flex-direction:column;text-align:center}.fqr{width:min(70vw,240px)}.fcode-t{align-items:center}.fcode-t .arow{justify-content:center}.fnew{align-self:center}}
.fenter{display:flex;flex-direction:column;gap:10px}
.inp.code{font:800 italic 34px/1 var(--f-d);letter-spacing:.2em;text-align:center;text-transform:uppercase;padding:14px}
.fenter.busy{opacity:.6;pointer-events:none}
.fnewf{text-align:center;display:flex;flex-direction:column;align-items:center}
.fnewf .abig{margin-bottom:8px;animation:wpop .5s var(--spring)}
.icard.fcard{border-color:var(--yellow)}
.icard.fcard .fav{width:44px;height:44px;font-size:17px;background:color-mix(in srgb,var(--yellow) 25%,var(--panel3))}
.ko .efr{margin:0 auto 12px;display:flex}

/* ---------- board games: wood board, 3D die, pawns ---------- */
.wood{background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.18),transparent 60%),repeating-linear-gradient(97deg,rgba(90,52,20,.0) 0 14px,rgba(90,52,20,.10) 15px 17px,rgba(90,52,20,0) 18px 34px),linear-gradient(135deg,#e2bb83,#c9965a 55%,#b07d45);border:7px solid #5d3a1c;box-shadow:inset 0 0 0 2px rgba(255,235,200,.35),inset 0 0 30px rgba(70,35,8,.45),0 18px 40px -14px rgba(0,0,0,.8),0 0 0 1px #2c1a0a}
.die3w{--dc:var(--pink);--ds:44px;width:var(--ds);height:var(--ds);display:grid;place-items:center;cursor:var(--cur-p,pointer);position:relative;border-radius:10px}
.die3w::after{content:'';position:absolute;inset:-7px;border-radius:14px;border:3px solid var(--dc);opacity:0;transition:opacity .2s}
.die3w.wait::after{opacity:1;animation:dwait 1.1s ease-in-out infinite}
@keyframes dwait{50%{transform:scale(1.08);box-shadow:0 0 22px var(--dc)}}
.die3w.off{cursor:default}
.die3p{display:block;width:var(--ds);height:var(--ds);perspective:calc(var(--ds) * 6);pointer-events:none}
.die3{display:block;position:relative;width:var(--ds);height:var(--ds);transform-style:preserve-3d;will-change:transform;transition:transform .6s cubic-bezier(.2,.9,.25,1.05)}
.die3.rolling{transition-duration:.6s}
.die3 .df{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:16%;border-radius:18%;background:radial-gradient(circle at 30% 25%,#fff,#ece7dc 70%,#d6cfbf);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 -3px 6px rgba(0,0,0,.12);backface-visibility:hidden}
.die3 .dcore{position:absolute;inset:2%;background:#d9d2c3}
.die3 .c2{transform:rotateX(90deg)} .die3 .c3{transform:rotateY(90deg)}
.die3 .df b{width:72%;height:72%;border-radius:50%;place-self:center;visibility:hidden;background:radial-gradient(circle at 40% 35%,#3a3f5c,#0b0c15)}
.die3 .df b.on{visibility:visible}
.die3 .f1{transform:translateZ(calc(var(--ds) / 2))} .die3 .f6{transform:rotateY(180deg) translateZ(calc(var(--ds) / 2))}
.die3 .f2{transform:rotateY(90deg) translateZ(calc(var(--ds) / 2))} .die3 .f5{transform:rotateY(-90deg) translateZ(calc(var(--ds) / 2))}
.die3 .f3{transform:rotateX(90deg) translateZ(calc(var(--ds) / 2))} .die3 .f4{transform:rotateX(-90deg) translateZ(calc(var(--ds) / 2))}
.lowfx .die3{transition:none}
.pawn{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}

/* ---------- online tables (lobby) ---------- */
.lobby{display:flex;flex-direction:column;gap:14px;width:min(100%,480px)}
.lobby .fadd-h{display:flex;align-items:center;gap:12px}
.lobby .lb-ic{width:44px;height:44px;flex:none} .lobby .lb-ic svg{width:100%;height:100%}
.lobby .lb-t{flex:1;min-width:0} .lobby .lb-t small{font:700 italic 12px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lobby .lb-t h3{margin:2px 0 0}
.lb-seats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lb-seat{--sc:var(--pink);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--sc) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--sc) 50%,transparent)}
.lb-seat.s2{--sc:var(--yellow)} .lb-seat.s3{--sc:var(--cyan)} .lb-seat.s4{--sc:var(--good)}
.lb-seat .lb-dot{grid-row:1/3;width:12px;height:12px;border-radius:50%;background:var(--sc);box-shadow:0 0 10px var(--sc)}
.lb-seat b{font:800 italic 18px/1.1 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-seat small{grid-column:2;color:var(--muted);font-size:12px}
.lb-seat em{grid-row:1/3;grid-column:3;font:700 italic 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--sc)}
.lb-seat.free{background:var(--panel);border-style:dashed;opacity:.75} .lb-seat.free .lb-dot{background:transparent;border:2px solid var(--sc);box-shadow:none}
.lb-seat.free b{color:var(--muted)}
.lb-code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2)}
.lb-code small{display:block;font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lb-code b{font:800 italic 30px/1.1 var(--f-d);letter-spacing:.14em;color:var(--cyan)}
.lobby h4{margin:6px 0 2px;font:700 italic 13px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lobby #lbf{max-height:220px;overflow-y:auto;overflow-x:hidden}
.lobby .btn:disabled{opacity:.5;cursor:default;box-shadow:none;filter:saturate(.5)}
.lobby .actions{margin-top:2px}
.lb-wait{display:flex;align-items:center;gap:10px;justify-content:center}
.lb-wait .spin{position:relative;width:22px;height:22px}
.tcode{display:flex;gap:8px;margin-top:10px}
.tcode .inp{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.14em}
@media (max-width:420px){.lb-seats{grid-template-columns:1fr}}
.lb-wait .spin{margin:0;flex:none} .lb-wait .spin i{border-width:3px} .lb-wait .spin i+i{inset:5px}
/* laptop: the thinking dots sit in the card's corner instead of adding a row */
@media (min-width:960px){.pcard .tdots{position:absolute;top:16px;right:16px;margin:0} .pcard-r .tdots{right:auto;left:16px}}

/* ---------- playing cards ---------- */
.card{--cw:64px;width:var(--cw);aspect-ratio:5/7;flex:none;position:relative;border-radius:calc(var(--cw) * .1);background:linear-gradient(160deg,#fff,#f1eee6);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 3px 8px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25);color:#15172a;user-select:none;transition:transform .18s var(--ease),box-shadow .18s}
.card.red{color:#d62b4d}
.card .tl,.card .br{position:absolute;display:flex;flex-direction:column;align-items:center;font:800 calc(var(--cw) * .26)/1 var(--f-d);letter-spacing:-.03em}
.card .tl{left:7%;top:5%} .card .br{right:7%;bottom:5%;transform:rotate(180deg)}
.card small{font-size:.8em;line-height:.9}
.card em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:calc(var(--cw) * .48);line-height:1}
.card em.fc{font:800 italic calc(var(--cw) * .5)/1 var(--f-d);background:radial-gradient(circle,rgba(0,0,0,.06) 40%,transparent 41%)}
.card.back{background:repeating-linear-gradient(45deg,#ff4fd8 0 6px,#c93aac 6px 12px);box-shadow:0 3px 8px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35)}
.card.back i{position:absolute;inset:8%;border-radius:calc(var(--cw) * .07);border:2px solid rgba(255,255,255,.75);background:radial-gradient(circle,#ffd84f 0 18%,transparent 19%)}
.card.can{cursor:var(--cur-p,pointer)}
@media (hover:hover) and (pointer:fine){.card.can:hover{transform:translateY(-6px)}}
.card.no{filter:brightness(.62) saturate(.6)}
.card.sel{transform:translateY(-12px);box-shadow:0 0 0 3px var(--cyan),0 8px 16px rgba(0,0,0,.5)}
.card.deal{animation:cdeal .32s var(--ease) backwards}
@keyframes cdeal{from{transform:translate(var(--fx,0),var(--fy,-60px)) rotate(-8deg) scale(.6);opacity:0}}
.felt{background:radial-gradient(120% 90% at 50% 40%,#22704a,#164a31 70%,#0f3522);border:6px solid #5d3a1c;box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 18px 40px -14px rgba(0,0,0,.8)}

/* ---------- hand the device to the next person ---------- */
.handoff{position:absolute;inset:-6px;z-index:20;display:grid;place-items:center;background:rgba(8,9,15,.94);border-radius:14px;backdrop-filter:blur(6px);animation:fadein .2s}
.handoff .ho-in{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px;max-width:320px}
.handoff .ho-av{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;border:3px solid currentColor;font:800 italic 24px/1 var(--f-d)}
.handoff h3{margin:0;font:800 italic 26px/1.1 var(--f-d);text-transform:uppercase}
.handoff p{margin:0;color:var(--muted)}
@keyframes fadein{from{opacity:0}}

/* ---------- quick match, guests, reports, recovery ---------- */
.qcard{gap:10px;margin-bottom:14px;border-color:color-mix(in srgb,var(--yellow) 40%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--yellow) 8%,var(--panel)),var(--panel) 60%)}
.qc-h{display:flex;gap:12px;align-items:center}
.qc-h h3{margin:0}
.qc-h small{color:var(--muted);font-size:13px}
.qc-ic{width:38px;height:38px;display:grid;place-items:center;flex:none;background:var(--yellow);color:var(--ink);transform:skewX(var(--sk))}
.qc-ic svg{width:20px;height:20px}
.qgames button{position:relative}
.qgames button.lockd{opacity:.45}
.qgames .ql{position:absolute;top:4px;right:4px;width:13px;height:13px;color:var(--yellow)}
.qgames .ql svg{width:100%;height:100%;display:block}
.qcard .fine{margin:0}
.quickw .qw-g{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:700 italic 18px/1 var(--f-d);text-transform:uppercase;color:var(--fg)}
.quickw .qw-g .ic{width:26px;height:26px;display:inline-grid}
.quickw .qw-t{min-height:2.9em}
.psafe{display:flex;justify-content:center;gap:18px;margin-top:4px;font-size:13px}
.psafe .link{color:var(--muted);font-weight:500}
.psafe .link.bad{color:var(--bad)}
.erep{align-self:center;color:var(--dim);font-size:12.5px;font-weight:500}
.repf{display:flex;flex-direction:column;gap:12px}
.repr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.repr button{min-height:44px;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);color:var(--muted);font-weight:600;font-size:14px;text-align:left;transition:all .15s}
.repr button.on{color:var(--fg);border-color:var(--pink);background:rgba(255,79,216,.12)}
.repf textarea.inp{height:auto;padding:10px 14px;line-height:1.4;resize:vertical}
.repb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.repb input{width:18px;height:18px;accent-color:var(--pink)}
.rcode{margin:4px 0 8px;padding:14px;border:1px dashed var(--yellow);border-radius:8px;font:800 italic 30px/1 var(--f-d);letter-spacing:.12em;text-align:center;color:var(--yellow);user-select:all;word-break:break-all}
.aforgot{align-self:center;margin-top:2px;font-size:13.5px;color:var(--muted);font-weight:500}
.acard .ahead .abig svg{width:26px;height:26px}
#atabs .nb{display:inline-block;min-width:17px;height:17px;margin-left:4px;padding:0 4px;border-radius:99px;background:var(--bad);color:var(--ink);font:800 11px/17px var(--f-d);text-align:center}
.mrow.rep .m-t b{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tsbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:300}
.tsbox:empty{display:none}
/* ---------- game list: rows per category (phone), counts, guest box ---------- */
.chips button small{margin-left:7px;font-size:12px;opacity:.55;letter-spacing:.02em}
#glist{display:flex;flex-direction:column;gap:18px}
.grow{display:flex;flex-direction:column;gap:6px}
.gh{display:flex;align-items:baseline;gap:8px;margin:0;font:800 italic 20px/1 var(--f-d);text-transform:uppercase;letter-spacing:.04em}
.gh small{font:700 italic 13px/1 var(--f-d);color:var(--dim)}
.tiles.row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:10px;margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none;overscroll-behavior-x:contain}
.tiles.row::-webkit-scrollbar{display:none}
.tiles.row .tile{flex:none;width:clamp(138px,40vw,170px);scroll-snap-align:start}
.lockc{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px dashed var(--line2);border-radius:10px;background:var(--panel)}
.lk-h{display:flex;gap:12px;align-items:center}
.lk-h .lki{width:38px;height:38px;display:grid;place-items:center;flex:none;background:var(--panel2);border:1px solid var(--line2);color:var(--yellow);transform:skewX(var(--sk))}
.lk-h .lki svg{width:18px;height:18px}
.lk-h>div{display:flex;flex-direction:column;line-height:1.3}
.lk-h b{font:700 italic 18px/1.15 var(--f-d);text-transform:uppercase}
.lk-h small{color:var(--muted);font-size:13px}
.lk-ics{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.lkg{--acc:var(--pink);display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 3px 7px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);opacity:.78;transition:opacity .15s,border-color .15s,transform .15s var(--ease);min-width:0}
.lkg:hover,.lkg:focus-visible,.lkg.sel{opacity:1;border-color:var(--acc);outline:none}
.lkg:active{transform:scale(.95)}
.lkg .ic{width:30px;height:30px;display:block;filter:saturate(.6)}
.lkg .ic svg{width:100%;height:100%;display:block}
.lkg small{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lockc>.btn{align-self:flex-start}

/* ---------- play: board in the free space (phone), facing seats for two at one device ---------- */
@media (max-width:959px){
  #app:has(.view.play){padding-bottom:4px}
  .view.play{min-height:calc(100svh - max(12px,env(safe-area-inset-top,0px)) - 4px)}
  .play .duel{flex:1;grid-template-rows:auto 1fr}
  .play .center{align-self:stretch}
  .play .stage{margin-top:auto;margin-bottom:max(10px,4vh)}
  .facing .duel{grid-template-columns:minmax(0,1fr);grid-template-areas:"r" "c" "l";grid-template-rows:auto 1fr auto}
  .facing .score{display:none}
  .facing .pcard-r{rotate:180deg}
  .facing.turn-r .status{rotate:180deg}
  .facing .pcard .wins{display:flex;align-items:baseline;gap:4px;margin-left:auto}
  .facing .pcard-r .wins{margin-left:0;margin-right:auto;flex-direction:row-reverse}
  .facing .pcard .wins b{font:800 italic 22px/1 var(--f-d);color:var(--sc);font-variant-numeric:tabular-nums}
  .facing .pcard .wins small{font:700 italic 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .facing .pcard.on .tag{opacity:1}
  /* the board sits in the middle, the same distance from both; boards with an up and down (g.turnBoard) turn to whoever is on the move */
  .facing .stage{margin-block:auto;transition:rotate .45s var(--ease)}
  .facing.rotboard.turn-r .stage{rotate:180deg}
  .lowfx .facing .stage{transition:none}
}
.ko .eshare{margin:0 auto 12px;display:flex}

/* ---------- game list: search, compact tiles (laptop), favourites ---------- */
.gfind{display:flex;flex-direction:column;gap:10px}
.gsearch{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:text;transition:border-color .15s,box-shadow .15s}
.gsearch:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(98,240,255,.15)}
.gsearch>svg{width:18px;height:18px;color:var(--muted);flex:none}
.gsearch input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--fg);font:500 16px/1 var(--f-b)}
.gsearch input::placeholder{color:var(--dim)}
.gsearch input::-webkit-search-cancel-button{filter:invert(1) opacity(.55)}
.gsearch:focus-within kbd{display:none!important}
@media (min-width:960px){
  .gfind{flex-direction:row;align-items:center;gap:12px}
  .gsearch{width:210px;flex:none;height:40px}
  /* on the laptop the chips wrap to a second line instead of being cut off */
  .gfind .chips{flex:1;min-width:0;flex-wrap:wrap;overflow:visible;row-gap:8px;padding-left:6px}
}
.gh svg{width:17px;height:17px;color:var(--yellow);fill:var(--yellow);align-self:center}
.tiles.cmp{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tiles.cmp .tile{flex-direction:row;align-items:stretch;min-height:70px}
.tiles.cmp .tile .art{height:auto;width:70px;flex:none;border-bottom:0;border-right:1px solid var(--line)}
.tiles.cmp .tile .art .ic{width:40px;height:40px}
.tiles.cmp .tile .art .lk{transform:scale(.75);transform-origin:top right}
.tiles.cmp .tile .tx{padding:10px 12px;flex:1;min-width:0;justify-content:center}
.tiles.cmp .tile:has(.meta em.new) .tx{padding-right:38px}
.tiles.cmp .tile b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles.cmp .tile small{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tiles.cmp .tile .meta{position:absolute;right:6px;bottom:6px;padding:0}
.tiles.cmp .tile .meta em:not(.new):not(.maint){display:none}
.tiles.cmp .tile .meta em.new,.tiles.cmp .tile .meta em.maint{font-size:9px;padding:2px 5px}
.tiles.cmp .tile.sel::after{border-width:9px}
.gp{position:relative}
.gp .fav{position:absolute;top:12px;right:12px;z-index:2;background:rgba(10,11,19,.7)}
.fav.on{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 50%,transparent)}
.fav.on svg{fill:var(--yellow)}
.gnone svg{color:var(--muted)}
/* screens where you type (Galgenmännchen, Stadt Land Fluss) stay at the top: the phone keyboard would cover a low input and scroll the page */
@media (max-width:959px){.play .stage:has(input.inp){margin-top:0;margin-bottom:0}}

/* ---------- offline countdown, watchers, reactions from watching friends ---------- */
.offnote{display:flex;align-items:center;gap:8px;max-width:min(520px,100%);padding:6px 12px;border-radius:6px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 10%,var(--panel));color:var(--fg);font-size:13.5px;line-height:1.35;animation:fadein .25s}
.offnote svg{width:18px;height:18px;flex:none;color:var(--warn)}
.watchn{display:inline-flex;align-items:center;gap:4px;padding:0 8px;height:30px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font:700 italic 14px/1 var(--f-d)}
.watchn[hidden]{display:none}
.watchn svg{width:16px;height:16px;color:var(--cy)}
.center{position:relative}
.emo-w{position:absolute;z-index:6;left:var(--x,50%);top:40%;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;transform:translateX(-50%);animation:emoW 2.6s var(--ease) forwards}
.emo-w b{font-size:34px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.emo-w small{padding:2px 7px;border-radius:99px;background:rgba(8,9,15,.8);color:var(--cy);font:700 italic 12px/1.2 var(--f-d);letter-spacing:.04em}
@keyframes emoW{0%{opacity:0;transform:translate(-50%,20px) scale(.6)}12%{opacity:1;transform:translate(-50%,0) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(1)}}
.rtag.badge{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--yellow) 20%,transparent);color:var(--yellow)}
.rtag.badge svg{width:13px;height:13px}
a.opt{color:inherit;text-decoration:none}
.about a{color:var(--muted)}

/* ===================================================================================================
   App feel (v38): tokens in :root, press states, phone shell (profile head, floating tab bar, sheets),
   home carousel, game sheet, match view with turn banner and stage glow. Laptop layout stays as it was.
   =================================================================================================== */
@keyframes shine{0%,62%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes popIn{0%{transform:scale(.2);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@keyframes ringOut{from{transform:scale(.4);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes drop{0%{transform:translateY(var(--dy))}62%{transform:translateY(0)}80%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes winPulse{50%{box-shadow:0 0 0 3px #fff,0 0 26px 6px rgba(255,255,255,.7)}}
@keyframes turnBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) skewX(-10deg)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.08) skewX(-10deg)}26%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) skewX(-10deg)}100%{opacity:0;transform:translate(-50%,-80%) skewX(-10deg)}}
@keyframes vsShake{20%{transform:translate(-9px,4px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes radar{from{transform:scale(.25);opacity:.9}to{transform:scale(2.6);opacity:0}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(93,255,157,.7)}100%{box-shadow:0 0 0 7px rgba(93,255,157,0)}}
@keyframes blobA{50%{transform:translate(40px,60px) scale(1.2)}} @keyframes blobB{50%{transform:translate(-50px,-40px) scale(1.15)}}
@keyframes burst2{to{transform:translate(var(--dx),var(--dy)) rotate(560deg) scale(.3);opacity:0}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes radarSpin{to{transform:rotate(360deg)}}

/* app mode in the phone browser too: no text selection on buttons, no rubber band, no scrollbars in rows */
body{overscroll-behavior:none}
button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* background: two slow colour clouds behind everything */
.bgfx .blob{position:absolute;border-radius:50%;will-change:transform}
.bgfx .blob.a{width:420px;height:420px;left:-200px;top:-120px;background:radial-gradient(closest-side,rgba(255,79,216,.28),transparent);animation:blobA 14s ease-in-out infinite}
.bgfx .blob.b{width:460px;height:460px;right:-240px;top:260px;background:radial-gradient(closest-side,rgba(255,216,79,.18),transparent);animation:blobB 17s ease-in-out infinite}
.lowfx .bgfx .blob{display:none}

/* ---------- profile head (phone) ---------- */
.ahd{display:none}
.fade-t,.fade-b{display:none}
@media (max-width:959px){
  .home>.top{display:none}
  .ahd{display:flex;align-items:center;gap:12px;padding:8px 2px 0;margin-bottom:18px;position:relative;z-index:2}
  .ah-av{width:48px;height:48px;flex:none;display:grid;place-items:center;background:var(--pink);color:var(--ink);transform:skewX(var(--sk));box-shadow:4px 4px 0 var(--yellow);font:800 italic 24px/1 var(--f-d);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
  .ah-av>span{transform:skewX(10deg)}
  .ah-av.guest{background:var(--panel3);color:var(--fg);box-shadow:4px 4px 0 var(--line2);font-size:28px}
  .ah-av:active{transform:skewX(var(--sk)) translate(3px,3px) scale(.95);box-shadow:1px 1px 0 var(--yellow)}
  .ah-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
  .ah-t b{font:800 italic 23px/1 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ah-c{display:flex;gap:6px;min-height:0}
  .ah-c:empty{display:none}
  .chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;font:700 italic 11.5px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;transform:skewX(var(--sk));white-space:nowrap}
  .chip svg{width:12px;height:12px}
  .chip.y{color:var(--yellow);background:rgba(255,216,79,.12)} .chip.c{color:var(--cyan);background:rgba(98,240,255,.12)}
  .chip.c svg{fill:currentColor;stroke:none}
  /* soft edges where the content runs under the top of the screen and under the bar */
  .home .fade-t{display:block;position:fixed;left:0;right:0;top:0;height:calc(28px + env(safe-area-inset-top,0px));z-index:25;pointer-events:none;background:linear-gradient(#08090f 30%,transparent);opacity:0;transition:opacity .2s}
  .scrolled .home .fade-t{opacity:1}
  .home .fade-b{display:block;position:fixed;left:0;right:0;bottom:0;height:150px;z-index:20;pointer-events:none;background:linear-gradient(transparent,rgba(8,9,15,.92) 60%)}
  .toast{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  body:has(.view.play) .toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* ---------- home (phone): hero carousel ---------- */
.hero{margin:0 -16px 22px;padding:0 18px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hero-tr{--i:0;--dx:0px;display:flex;gap:12px;transform:translateX(calc(var(--i) * -1 * (100% + 12px) + var(--dx)));transition:transform .6s var(--spring-soft)}
.hero.drag .hero-tr{transition:none}
.hcard{--acc:var(--pink);flex:0 0 100%;height:214px;position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--acc);color:var(--ink);text-align:left;
  box-shadow:0 22px 40px -18px var(--acc);opacity:.55;transform:scale(.92);transition:opacity .5s var(--ease),transform .6s var(--spring-soft)}
.hcard.on{opacity:1;transform:none}
.hcard:active{transform:scale(.97)}
.hcard>i{position:absolute;inset:0;pointer-events:none}
.hcard .hc-st{background:repeating-linear-gradient(-60deg,rgba(8,9,15,.09) 0 9px,transparent 9px 20px)}
.hcard .hc-dk{background:linear-gradient(112deg,transparent 57%,rgba(8,9,15,.94) 57.3%)}
.hcard .hc-gl{background:radial-gradient(60% 80% at 82% 55%,color-mix(in srgb,var(--acc) 33%,transparent),transparent 70%)}
.hcard .hc-sh{right:auto;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 5s 1s ease-in-out infinite}
.hc-ic{position:absolute;right:18px;top:38px;width:136px;height:136px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6));animation:floaty 3.8s ease-in-out infinite}
.hc-ic svg{width:100%;height:100%;display:block}
.hcard[data-do] .hc-ic{color:var(--cyan);padding:18px}
.hc-tx{position:absolute;left:20px;top:22px;bottom:20px;width:min(200px,55%);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hc-k{font:700 italic 12px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;padding:5px 9px;background:var(--ink);color:var(--acc);transform:skewX(var(--sk));white-space:nowrap}
.hc-tx b{max-width:100%;font:800 italic 44px/.86 var(--f-d);text-transform:uppercase;margin-top:6px;overflow-wrap:anywhere}
.hc-tx b.mid{font-size:38px} .hc-tx b.long{font-size:32px}
.hc-tx small{font-size:13px;font-weight:600;opacity:.75;line-height:1.3}
.hc-go{margin-top:auto;display:flex;align-items:center;gap:12px;font:800 italic 17px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase}
.hc-go i{width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:var(--acc);transform:skewX(var(--sk));box-shadow:3px 3px 0 rgba(255,255,255,.55)}
.hc-go svg{width:18px;height:18px;transform:skewX(10deg)}
.hero-dots{display:flex;justify-content:center;gap:5px;margin-top:14px}
.hero-dots i{height:6px;width:12px;background:var(--line2);transform:skewX(-30deg);transition:width .35s var(--ease),background .35s}
.hero-dots i.on{width:28px;background:var(--pink)}
.lowfx .hcard .hc-sh,.lowfx .hc-ic{animation:none}

/* quick buttons under the carousel */
.qtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.qtile{--c:var(--cyan);position:relative;height:88px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line);box-shadow:var(--depth);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.qtile.y{--c:var(--yellow)} .qtile.p{--c:var(--pink)}
.qtile:active{transform:translateY(var(--press-y)) scale(.97);box-shadow:var(--depth-press)}
.qt-ic{width:36px;height:36px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);transform:skewX(var(--sk))}
.qt-ic svg{width:19px;height:19px;transform:skewX(10deg)}
.qtile b{font:800 italic 15px/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.qtile .live{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--good)}
/* the pulse is a ring that grows and fades (transform and opacity only): an animated box-shadow made the phone repaint the whole page every frame while scrolling */
.qtile .live::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(93,255,157,.7);animation:liveRing 1.4s ease-out infinite;will-change:transform,opacity}
@keyframes liveRing{from{transform:scale(1);opacity:1}to{transform:scale(2.75);opacity:0}}
.lowfx .qtile .live::after{animation:none;display:none}

/* search with a round clear button instead of the native cross */
.gclear{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--panel3);color:var(--muted);transition:transform var(--t-fast)}
.gclear[hidden]{display:none}
.gclear:active{transform:scale(.88)}
.gclear svg{width:14px;height:14px}
.gsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
@media (max-width:959px){
  .gsearch{height:48px;border-radius:16px;background:rgba(19,22,37,.85);padding:0 10px 0 14px}
  #glist{gap:0}
  .grow{margin-top:24px;gap:8px}
  .gh{font-size:22px}
  .gall{margin-left:auto;display:flex;align-items:center;gap:4px;font:700 italic 13px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 0 6px 10px}
  .gall i{font-style:normal;font-size:16px;line-height:.6}
  .gall:active{color:var(--fg)}
  .tiles.row{gap:12px;margin:0 -16px;padding:4px 18px 10px;scroll-padding-inline:18px}
  .tiles.row .tile{width:150px}
  #glist>.tiles{margin-top:18px;gap:12px}
  /* tile: rounded card with a key edge, a glowing picture and badges for "2–4" and online */
  .tiles:not(.cmp) .tile{border-radius:20px;box-shadow:var(--depth);animation:tileIn .5s var(--ease) backwards;animation-delay:calc(min(var(--i),5) * 45ms);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
  .tiles:not(.cmp) .tile:active{transform:scale(.94) translateY(3px);box-shadow:var(--depth-press)}
  .tiles:not(.cmp) .tile .art{height:116px;border-bottom:0;background:repeating-linear-gradient(-60deg,color-mix(in srgb,var(--acc) 11%,transparent) 0 8px,transparent 8px 17px),radial-gradient(90% 100% at 50% 100%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%),linear-gradient(160deg,#22263d,#151829)}
  .tiles:not(.cmp) .tile .art .ic{width:66px;height:66px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
  .tiles:not(.cmp) .tile .tx{padding:12px 14px 0;gap:3px}
  .tiles:not(.cmp) .tile b{font-size:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
  .tiles:not(.cmp) .tile small{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tiles:not(.cmp) .tile .meta{padding:8px 14px 12px;min-height:12px}
  .tiles:not(.cmp) .tile .meta:empty{padding:0 0 12px}
}
.tile .bdg{position:absolute;top:8px;display:flex;align-items:center;gap:4px;font:700 italic 11.5px/1 var(--f-d);letter-spacing:.06em;font-style:normal}
.tile .bdg svg{width:12px;height:12px}
.tile .bdg.n{left:8px;padding:4px 7px;background:var(--ink);color:var(--acc);transform:skewX(var(--sk))}
.tile .bdg.on{right:8px;width:24px;height:24px;justify-content:center;border-radius:50%;background:rgba(8,9,15,.75);color:var(--good)}
.tile .bdg.on svg{width:14px;height:14px}
.tiles.cmp .tile .bdg{display:none}
.tiles.cmp .tile{border-radius:14px}
.tiles.cmp .tile:active{transform:scale(.97)}
.tile.locked .lk{border-radius:9px}
/* guests on the phone: one banner for a free account */
.lockb{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 12px 12px 14px;border-radius:var(--r-m);background:linear-gradient(100deg,rgba(255,216,79,.12),var(--panel) 70%);border:1px solid color-mix(in srgb,var(--yellow) 35%,var(--line))}
.lockb .lki{width:36px;height:36px;flex:none;display:grid;place-items:center;background:var(--yellow);color:var(--ink);transform:skewX(var(--sk))}
.lockb .lki svg{width:18px;height:18px}
.lb-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.lb-t b{font:800 italic 17px/1.1 var(--f-d);text-transform:uppercase}
.lb-t small{font-size:12px;color:var(--muted)}
.lockb .btn{flex:none;padding:0 12px}
@media (max-width:380px){.lockb{flex-wrap:wrap}.lockb .btn{width:100%}}

/* ---------- game panel: tags, head buttons; as a sheet on the phone ---------- */
.gp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.gp-tags em{font:700 italic 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;font-style:normal;padding:5px 8px;border:1px solid var(--line2);color:var(--muted);transform:skewX(var(--sk))}
.gp .gpx{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:13px;background:rgba(8,9,15,.6)}
.gp .gpx~.fav{right:60px}
.gp .fav{width:40px;height:40px;border-radius:13px}
.modal.gpm{padding:0 0 calc(24px + env(safe-area-inset-bottom,0px));overflow-x:hidden}
.modal.gpm::before{z-index:3}
.modal.gpm .gp{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.modal.gpm .gp-art{height:196px;background:repeating-linear-gradient(-60deg,color-mix(in srgb,var(--acc) 11%,transparent) 0 9px,transparent 9px 19px),radial-gradient(80% 120% at 50% 100%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 70%),linear-gradient(160deg,#22263d,#151829)}
.modal.gpm .gp-art .cat{top:30px;left:18px}
.modal.gpm .gp .gpx,.modal.gpm .gp .fav{top:24px}
.modal.gpm .gp-art .ic{width:124px;height:124px;animation:popIn .55s .12s var(--spring) backwards,floaty 3.6s .7s ease-in-out infinite}
.modal.gpm .gp-txt{padding:18px 20px 0}
.modal.gpm .gp-txt h2{font-size:40px;line-height:.92}
.modal.gpm .gp-txt>*{animation:riseIn .4s var(--ease) backwards}
.modal.gpm .gp-txt p{animation-delay:40ms} .modal.gpm .gp-tags{animation-delay:80ms}
.modal.gpm .gp-mode,.modal.gpm .gp-lvl,.modal.gpm .gp-more,.modal.gpm .gp-online,.modal.gpm .gp-lock,.modal.gpm .hint.local{margin-left:20px;margin-right:20px}
.modal.gpm .gp-go{padding:22px 20px 0;flex-wrap:wrap}
.modal.gpm .gp-go .btn.primary{flex:1 1 100%}
.modal.gpm .gp-go .btn.ghost{flex:1 1 100%;height:42px}
.modal.gpm .gp-go kbd{display:none}
.lowfx .modal.gpm .gp-art .ic,.lowfx .modal.gpm .gp-txt>*{animation:none}

/* ---------- match view ---------- */
/* a piece lands: a ring runs out of it */
.kring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--c);pointer-events:none;animation:ringOut .55s ease-out forwards}
.ttt .kring{border-radius:14px}
/* turn banner over the board */
.tbanner{position:absolute;left:50%;top:50%;z-index:12;pointer-events:none;white-space:nowrap;padding:10px 22px;background:var(--c);color:var(--ink);font:800 italic 34px/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;
  box-shadow:6px 6px 0 var(--ink),0 0 40px var(--c);animation:turnBanner 1.15s var(--ease) forwards}
.lowfx .tbanner{animation:none;transform:translate(-50%,-50%) skewX(-10deg)}
/* the status line only carries rule hints and the last move of the other side */
.status{background:none;border:0;padding:4px 12px;font-size:14px;min-height:28px;color:var(--muted)}
.status b,.status .c1,.status .c2{color:inherit}
.status .c1{color:var(--p1)} .status .c2{color:var(--p2)}
/* the board springs in at the start */
.view.play.enter .stage{animation:boardIn .5s .08s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes boardIn{from{transform:scale(.7);opacity:0}}
.lowfx .view.play .stage{animation:none}
/* glow behind the side on the move */
.sglow{display:none}
/* pass screen (hidden fleets and cards): full screen in the colour of the next player */
.pass{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;cursor:var(--cur-p,pointer);
  background:var(--hc);color:var(--ink);border:0;border-radius:var(--r-l);animation:none}
/* fully opaque from the first frame: only the text fades in, so nothing underneath ever shows */
.pass>*{animation:fadeIn .25s backwards}
.pass .ps-k{font:700 italic 14px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.pass h3{margin:0;font:800 italic 40px/1 var(--f-d);text-transform:uppercase;color:var(--ink)}
.pass p{margin:0;color:rgba(8,9,15,.75);max-width:34ch;font-weight:600}
.pass .ps-tap{margin-top:14px;font:800 italic 15px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;animation:tapPulse 1.6s ease-in-out infinite}
@keyframes tapPulse{50%{opacity:.4}}
.lowfx .pass .ps-tap{animation:none}
.handoff{position:absolute;inset:-6px;z-index:20;display:block;background:none;backdrop-filter:none;border-radius:var(--r-l)}
.passcard{position:relative;min-height:340px;width:min(100%,520px)}
/* KO: the new score pulses, wins burst out of the middle, bigger buttons */
.eseries b.bump{animation:popIn .45s var(--spring)}
.fx-w{position:absolute;margin:-5px;animation:burst2 1s cubic-bezier(.15,.7,.3,1) both}
.ko .actions .btn{height:56px}
.vsi{animation:vsShake .35s .3s}
.vsi.quick{animation-delay:.14s}
.bubble b{font-size:17px}
.bubble.on{animation:bubIn .3s var(--spring)}
@keyframes bubIn{from{opacity:0;transform:scale(.5) translateY(-8px)}}
.pbar .iconbtn#pr:active svg{transform:rotate(-120deg);transition:transform .3s var(--spring)}

@media (max-width:959px){
  /* column: bar, opponent, board, you; the score sits in the cards */
  .play{gap:12px;padding-inline:0}
  .play .duel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"r" "c" "l";grid-template-rows:auto 1fr auto;gap:12px}
  .play .duel .score{display:none}
  .play .center{grid-area:c;justify-content:center}
  .play .stage{margin:auto 0}
  .pcard{height:74px;padding:12px 16px 12px 14px;gap:12px;border-radius:20px;background:rgba(19,22,37,.9);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.35)}
  .pcard-r{flex-direction:row;text-align:left}
  .pcard .av{width:50px;height:50px;font-size:24px;background:color-mix(in srgb,var(--sc) 14%,var(--panel2));border-color:color-mix(in srgb,var(--sc) 50%,transparent)}
  .pcard .av svg{width:26px;height:26px}
  .pcard.me .av{background:var(--sc);color:var(--ink);border-color:var(--sc)}
  .pcard .nm{flex:1}
  .pcard .nm b{font-size:22px}
  .pcard .nm small{font-size:12px}
  .pcard .wins{display:flex;align-items:center;margin-left:0}
  .pcard .wins b{font:800 italic 40px/1 var(--f-d);color:var(--sc);font-variant-numeric:tabular-nums}
  .pcard .wins small{display:none}
  .pcard .tdots{margin:0}
  .pcard .clk{margin-left:0}
  .pcard .tag{top:-9px;left:14px;right:auto}
  .pcard.on,.pcard-r.on{border-color:var(--sc);box-shadow:0 0 0 1px var(--sc),0 12px 36px -8px color-mix(in srgb,var(--sc) 60%,transparent)}
  .pcard.on .tag{transition:opacity .2s,transform .35s var(--spring)}
  .bubble{top:calc(100% + 8px);right:12px}
  /* party: four small cards with a colour bar on top, the active one lifts */
  .play .duel.party{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"l r" "c c";grid-template-rows:auto 1fr}
  .duel.party .pcard{height:auto;min-height:58px;padding:9px 10px 8px;gap:8px;overflow:visible;border-top:3px solid var(--sc)}
  .duel.party .pcard .av{width:34px;height:34px;font-size:15px}
  .duel.party .pcard .av svg{width:18px;height:18px}
  .duel.party .pcard .nm b{font-size:16px}
  .duel.party .pcard .wins b{font-size:22px}
  .duel.party .pcard.on{transform:scale(1.04)}
  /* stage glow: the side on the move lights up (opponent at the top, you at the bottom) */
  .sglow{display:block;position:fixed;left:-20%;right:-20%;height:560px;z-index:0;pointer-events:none;opacity:.2;transition:opacity .6s var(--ease)}
  .sglow.t{top:-300px;background:radial-gradient(closest-side,rgba(255,216,79,.32),transparent)}
  .sglow.b{bottom:-300px;background:radial-gradient(closest-side,rgba(255,79,216,.36),transparent)}
  .turn-r .sglow.t,.turn-l .sglow.b{opacity:1}
  .play .duel{position:relative;z-index:1}
  .play.party-v .sglow,.duel.party~.sglow{display:none}
  .facing .pcard-r{rotate:180deg}
}

/* ---------- online tab ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;font:700 italic 11.5px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;transform:skewX(var(--sk));white-space:nowrap;vertical-align:middle}
.chip[hidden]{display:none}
.chip.c{color:var(--cyan);background:rgba(98,240,255,.12)} .chip.y{color:var(--yellow);background:rgba(255,216,79,.12)}
.online .title span{font-size:15px;letter-spacing:.24em}
@media (max-width:959px){.online .title{font-size:44px}}
/* sections without a box (the admin panel keeps its boxes) */
.online .apanel.osec{background:none;border:0;padding:0;border-radius:0}
.online .apanel.osec h3{font-size:22px}
.online .rtop h3{display:flex;align-items:center;gap:10px}
/* quick match: a big split card */
.qhero{position:relative;overflow:hidden;width:100%;height:150px;border-radius:var(--r-l);text-align:left;color:var(--ink);
  background:linear-gradient(105deg,var(--pink) 0 50%,var(--yellow) 50% 100%);box-shadow:0 22px 40px -18px rgba(255,79,216,.7);transition:transform var(--t-fast) var(--ease)}
.qhero:active{transform:scale(.97)}
.qhero::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 49.6%,#fff 49.8%,#fff 50.2%,transparent 50.4%)}
.qhero>i{position:absolute;inset:0;pointer-events:none}
.qhero .qh-st{background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 9px,transparent 9px 20px)}
.qhero .qh-sh{right:auto;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 5s 1s ease-in-out infinite}
.qh-t{position:absolute;left:20px;top:20px;right:100px;display:flex;flex-direction:column;gap:4px}
.qh-t small{font:700 italic 12px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase}
.qh-t b{font:800 italic 40px/.9 var(--f-d);text-transform:uppercase}
.qh-t em{font-style:normal;font-size:12.5px;font-weight:600;opacity:.75}
.qh-go{position:absolute;right:20px;bottom:20px;width:62px;height:62px;display:grid;place-items:center;background:var(--ink);color:var(--yellow);transform:skewX(var(--sk));box-shadow:4px 4px 0 #fff}
.qh-go svg{width:28px;height:28px;transform:skewX(10deg)}
.lowfx .qhero .qh-sh{animation:none}
.qsheet{display:flex;flex-direction:column;gap:12px}
.qsheet h3{margin:0;font:800 italic 30px/1 var(--f-d);text-transform:uppercase}
.qsheet .qgames{flex-wrap:wrap;overflow:visible}
.qsheet .actions .btn{flex:1 1 100%}
.qsheet>.btn.ghost{align-self:center}
/* search screen: radar, seconds, the opponent springs in */
.modal-back.mb-radarm{padding:0;place-items:stretch;background:var(--ink)}
.modal.radarm{width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;display:grid;place-items:center;animation:fadeIn .3s;
  background:linear-gradient(105deg,rgba(255,79,216,.12),rgba(255,79,216,.02) 49.9%,rgba(255,216,79,.02) 50.1%,rgba(255,216,79,.1)),var(--ink);padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.modal.radarm::before{display:none}
.modal-back.out .modal.radarm{animation:none}
.radar-v{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;width:min(100%,420px)}
.radar{position:relative;width:240px;height:240px;margin-bottom:18px;display:grid;place-items:center}
.radar .rr{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(98,240,255,.6);animation:radar 2.4s ease-out infinite}
.radar .rr:nth-child(2){animation-delay:.8s} .radar .rr:nth-child(3){animation-delay:1.6s}
.radar .rc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(98,240,255,.35),transparent 25%);animation:radarSpin 1.6s linear infinite}
.r-av{position:relative;width:84px;height:84px;display:grid;place-items:center;background:var(--pink);color:var(--ink);font:800 italic 36px/1 var(--f-d);transform:skewX(var(--sk));box-shadow:5px 5px 0 var(--yellow)}
.radar-v h3{margin:0;font:800 italic 34px/1 var(--f-d);text-transform:uppercase}
.radar-v .qw-g{display:flex;align-items:center;gap:8px;margin:0;font:700 italic 17px/1 var(--f-d);text-transform:uppercase;color:var(--muted)}
.radar-v .qw-g .ic{width:24px;height:24px;display:inline-grid}
.radar-v .qw-t{margin:0;color:var(--muted);min-height:3em}
.radar-v .actions{width:100%}
.radarm.found h3{color:var(--good)}
.radarm.found .rr,.radarm.found .rc{animation-play-state:paused;opacity:.3}
.qw-n{display:block;font:800 italic 44px/1 var(--f-d);text-transform:uppercase;color:var(--yellow);animation:popIn .5s var(--spring)}
.lowfx .radar .rr,.lowfx .radar .rc{animation:none}
/* friends online now: a row of avatar cards */
.fon{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:4px 16px 8px}
.fon::-webkit-scrollbar{display:none}
.fcard{--fc:var(--pink);flex:none;width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line);box-shadow:var(--depth);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.fcard:active{transform:translateY(var(--press-y)) scale(.97);box-shadow:var(--depth-press)}
.fcard .fav{width:48px;height:48px;font-size:20px;background:var(--fc);color:var(--ink);margin-bottom:4px}
.fcard .fav i{width:12px;height:12px;background:var(--good);box-shadow:0 0 8px var(--good)}
.fcard b{font:700 italic 14px/1.1 var(--f-d);text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard small{font-size:11px;color:var(--good);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fav{width:44px;height:44px;border-radius:0}
.frow{border-radius:14px}
.freqs,.obanner{border-radius:var(--r-m)}
.mrow{border-radius:14px}
.mrow.live .m-g{position:relative}
/* podium: steps 92 / 124 / 74 px, places in yellow, cyan and pink, avatars bob */
.podium{gap:10px;padding-top:16px}
.pod.p1{--pc:var(--yellow)} .pod.p2{--pc:var(--cyan)} .pod.p3{--pc:var(--pink)}
.pod .pav{width:50px;height:50px;display:grid;place-items:center;background:var(--pc);color:var(--ink);font:800 italic 22px/1 var(--f-d);transform:skewX(var(--sk));box-shadow:3px 3px 0 rgba(0,0,0,.4);cursor:var(--cur-p,pointer);animation:bob 3s ease-in-out infinite}
.pod.p1 .pav{width:60px;height:60px;font-size:26px}
.pod.p2 .pav{animation-delay:.5s} .pod.p3 .pav{animation-delay:1s}
.pod .step{position:relative;display:grid;place-items:center;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 33%,var(--panel2)),var(--panel2));border-color:color-mix(in srgb,var(--pc) 45%,var(--line))}
.pod.p1 .step{height:124px} .pod.p2 .step{height:92px} .pod.p3 .step{height:74px}
.pod .step .medal{width:auto;height:auto;background:none;box-shadow:none;transform:none;color:var(--pc);font:800 italic 44px/1 var(--f-d)}
.lowfx .pod .pav{animation:none}
.rrow{border-radius:14px}

/* ---------- stats, account, options ---------- */
.kpi{border-top:0;border-radius:var(--r-m)}
.kpi b{color:var(--pink)} .kpi:nth-child(even) b{color:var(--yellow)}
.admin .kpi b{color:inherit}
.srow{border-left:1px solid var(--line);border-radius:14px}
.acard{box-shadow:none;border-radius:var(--r-m)}
.inp{height:50px;border-radius:12px}
textarea.inp{height:auto}
.optlist{border-radius:var(--r-m)}
.oh{font:800 italic 22px/1 var(--f-d);letter-spacing:.02em;color:var(--fg);margin:0 0 10px 2px}
.empty{border:0;padding:30px 16px}
.empty svg{width:48px;height:48px}
.empty .btn{border-radius:var(--r-pill);transform:none}
.empty .btn.primary{box-shadow:0 6px 0 #05060c}
.empty .btn.primary:active{transform:translateY(4px);box-shadow:var(--depth-press)}
.gp-lock{border-radius:14px}
/* phone: a player profile is its own full screen that slides in from the right */
@media (max-width:959px){
  .modal-back.mb-profm{padding:0;place-items:stretch;background:var(--ink);backdrop-filter:none}
  .modal.profm{width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;animation:profIn .35s var(--ease);padding:max(16px,env(safe-area-inset-top,0px)) 18px calc(30px + env(safe-area-inset-bottom,0px))}
  .modal.profm::before{display:none}
  .modal-back.out .modal.profm{animation:profOut .28s var(--sheet-out) forwards}
  .lowfx .modal.profm,.lowfx .modal-back.out .modal.profm{animation:fadeIn .2s}
  .prof .phead{flex-wrap:nowrap}
  .prof .phead #pc{order:-1}
  .prof .abig{width:64px;height:64px;font-size:26px}
}
@keyframes profIn{from{transform:translateX(100%)}} @keyframes profOut{to{transform:translateX(100%)}}

/* ---------- polish ---------- */
.upbar{border-radius:var(--r-pill);border-left:1px solid var(--line2);padding:8px 8px 8px 18px}
.upbar .btn{flex:none}
.tabs .nb{animation:popIn .4s var(--spring)}
.lowfx .tabs .nb{animation:none}
.tut .dots i{width:12px;height:6px} .tut .dots i.on{width:28px}
.tut .demo{border-radius:var(--r-m)}

/* ---------- phone: matches that do not fit get smaller player cards ---------- */
@media (max-width:959px){
  .play.tight,.play.tight .duel{gap:8px}
  .tight .pcard{height:56px;padding:7px 12px 7px 10px;gap:10px;border-radius:16px}
  .tight .pcard .av{width:38px;height:38px;font-size:18px}
  .tight .pcard .av svg{width:20px;height:20px}
  .tight .pcard .nm b{font-size:18px}
  .tight .pcard .wins b{font-size:30px}
  .tight .status{min-height:22px;padding-block:2px}
  .tight2 .pcard{height:46px;padding-block:4px}
  .tight2 .pcard .av{width:32px;height:32px}
  .tight2 .pcard .nm small{display:none}
  .tight2 .pbar .iconbtn{width:40px;height:40px}
  .tight .duel.party .pcard{height:auto;min-height:0;padding:5px 8px}
  .tight .duel.party .pcard .av{width:28px;height:28px}
  /* the reaction duel fills the room between the cards */
  .stage .rx{height:max(320px,calc(100svh - 290px));min-height:0}
}
/* hand-over screen: over the whole screen, so nothing of the hidden cards or fleet shows */
.pass{position:fixed;inset:0;z-index:45;border-radius:0;padding:max(24px,env(safe-area-inset-top,0px)) 24px max(24px,env(safe-area-inset-bottom,0px))}
.handoff{position:static}
.passcard{min-height:0}
@media (max-width:959px){
  .tight2 .stage .pkt{margin:20px 0 2px}
  .tight2 .stage .pk{gap:5px}
  .tight2 .stage .bsside{gap:6px}
  .tight2 .stage .bs{gap:10px}
}
@media (max-width:959px){.tight3 .duel.party .pcol{display:none}}

/* ---------- hold a tile to play, surprise me ---------- */
.tile.hold{transform:scale(.94);transition:transform .45s var(--ease)}
.tile.hold .art .ic{transform:scale(1.12);transition:transform .45s var(--ease)}
.gsrow{display:flex;gap:10px;align-items:center}
.gsrow .gsearch{flex:1;min-width:0}
.gsurp{flex:none}
.gsurp:active svg{transform:rotate(90deg);transition:transform .2s}
@media (max-width:959px){.gsurp{width:48px;height:48px;border-radius:16px}}
@media (min-width:960px){.gfind .gsrow .gsearch{width:210px;flex:none}}

/* ---------- coin toss ---------- */
.coin{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:auto;background:rgba(5,6,12,.45);animation:fadeIn .2s;transition:opacity .3s}
.coin.out{opacity:0}
.coin-c{position:relative;width:110px;height:110px;transform-style:preserve-3d;animation:coinFlip 1s cubic-bezier(.3,.7,.3,1) forwards}
.coin-c.ai{animation-name:coinFlipB}
.coin .cf{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;font:800 italic 34px/1 var(--f-d);color:var(--ink);backface-visibility:hidden;box-shadow:inset 0 0 0 6px rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.5)}
.coin .cf.me{background:var(--pink)} .coin .cf.ki{background:var(--yellow);transform:rotateY(180deg)}
.coin span{font:800 italic 28px/1 var(--f-d);text-transform:uppercase;opacity:0;animation:fadeIn .3s .95s forwards}
@keyframes coinFlip{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-90px) rotateY(900deg)}100%{transform:translateY(0) rotateY(1800deg)}}
@keyframes coinFlipB{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-90px) rotateY(900deg)}100%{transform:translateY(0) rotateY(1980deg)}}

/* ---------- first match: where to tap ---------- */
.guide{position:fixed;z-index:46;width:0;height:0;pointer-events:none;animation:fadeIn .3s}
.guide.out{opacity:0;transition:opacity .25s}
.guide .gr{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:3px solid var(--cyan);box-shadow:0 0 18px var(--cyan);animation:guidePulse 1.2s ease-out infinite}
.guide .gh-i{position:absolute;left:4px;top:6px;width:44px;height:44px;color:#fff;filter:drop-shadow(0 4px 6px rgba(0,0,0,.7));animation:guideTap 1.2s ease-in-out infinite}
.guide .gh-i svg{width:100%;height:100%}
.guide b{position:absolute;left:-60px;top:48px;width:120px;text-align:center;font:800 italic 15px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--cyan);padding:5px 0;transform:skewX(var(--sk))}
@keyframes guidePulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.4);opacity:0}}
@keyframes guideTap{50%{transform:translate(-4px,-6px)}}
.lowfx .guide .gr,.lowfx .guide .gh-i{animation:none}

/* ---------- KO: a tip after a loss against the AI ---------- */
.ktip{display:flex;gap:12px;align-items:flex-start;width:min(100%,520px);padding:12px 14px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line2);text-align:left}
.ktip>svg{width:22px;height:22px;flex:none;color:var(--yellow)}
.ktip b{font:800 italic 15px/1.2 var(--f-d);letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)}
.ktip p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.4;max-height:5.6em;overflow:auto}
.toast.long{max-width:calc(100vw - 32px);white-space:normal;text-align:center;line-height:1.25}
/* buttons that already started something */
.btn.busy{opacity:.7;pointer-events:none}
.btn.busy>span::after{content:'';width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:radarSpin .7s linear infinite}
/* thumb reach: Würfelblock dice and the roll button below the score sheet on the phone */
@media (max-width:959px){.yz .yz-tray{order:2}}

/* ---------- colour-blind mode: pink pieces striped, yellow dotted (follows the swap against the AI), pawns numbered ---------- */
:root{--cbpink:repeating-linear-gradient(45deg,rgba(8,9,15,.4) 0 3px,transparent 3px 8px);--cbyel:radial-gradient(circle,rgba(8,9,15,.55) 0 1.8px,transparent 2.4px) 0 0/8px 8px;--pat1:var(--cbpink);--pat2:var(--cbyel)}
:root.swap{--pat1:var(--cbyel);--pat2:var(--cbpink)}
.cb .rv .st,.cb .ck .pc{position:relative}
/* 3D Tic Tac Toe: the same patterns on its stones */
.cb .t3-c.p1 i,.cb .t3-c.p2 i{position:relative;overflow:hidden}
.cb .t3-c.p1 i::before,.cb .t3-c.p2 i::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--pat1)}
.cb .t3-c.p2 i::before{background:var(--pat2)}
.cb .c4b .disc.p1::before,.cb .c4ghost .p1::before,.cb .gmk .st.p1::before,.cb .rv .st.s1::before,.cb .ck .pc.s1::before,
.cb .c4b .disc.p2::before,.cb .c4ghost .p2::before,.cb .gmk .st.p2::before,.cb .rv .st.s2::before,.cb .ck .pc.s2::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:var(--pat1)}
.cb .c4b .disc.p2::before,.cb .c4ghost .p2::before,.cb .gmk .st.p2::before,.cb .rv .st.s2::before,.cb .ck .pc.s2::before{background:var(--pat2)}
.cb .ludo .pc::after,.cb .ladb .tok::after{content:attr(data-p);position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:rgba(8,9,15,.85);color:#fff;font:800 11px/15px var(--f-d);text-align:center;pointer-events:none}

/* ---------- game link, matches over days ---------- */
.linkw{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.linkw h3{margin:0;font:800 italic 30px/1 var(--f-d);text-transform:uppercase}
.linkw .fqr{width:min(64vw,220px)}
.linkw .arow{justify-content:center}
.linkw .lb-wait{margin:0;color:var(--muted);font-size:13.5px}
.linkw .actions{width:100%}
.plinkr{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.alist{display:flex;flex-direction:column;gap:8px}
.mrow .good{color:var(--good);font-weight:600}

/* ---------- admin: site page, 14-day chart, notes; team announcement bar ---------- */
.mrow.rep{flex-wrap:wrap} .mrow>.abox{flex-basis:100%;margin:4px -14px -12px;border-radius:0 0 10px 10px}
.abox>.arow,.abox>.fine{flex-basis:100%}
.apanel>.opt{padding:12px 0;background:none} .apanel>.opt>svg{color:var(--cyan)}
.apanel>.chips.mini{flex-wrap:wrap;overflow:visible}
.apanel textarea.inp{width:100%;resize:vertical;margin-bottom:6px}
.anote{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:10px;padding:10px 14px;background:rgba(255,214,10,.08);border:1px solid var(--yellow);border-radius:8px;text-align:left;font-weight:600}
.anote svg{width:18px;height:18px;color:var(--yellow);flex:none}
.anote.bad{background:rgba(255,93,115,.1);border-color:var(--bad)} .anote.bad svg{color:var(--bad)}
.achart{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;height:120px;align-items:end;margin:4px 0 6px}
.acol{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:16px}
.acol i{width:42%;height:var(--h);min-height:2px;transform:skewX(-8deg)}
.acol i.g,.lg.g{background:var(--cyan)} .acol i.n,.lg.n{background:var(--pink)}
.acol small{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.lg{display:inline-block;width:10px;height:10px;vertical-align:-1px;transform:skewX(-12deg)}
.upbar.note{border-left-color:var(--yellow)} .upbar.note>svg{color:var(--yellow)}
.upbar.note.warn{border-left-color:var(--bad)} .upbar.note.warn>svg{color:var(--bad)}
.upbar.note b{font-weight:600;line-height:1.35;white-space:pre-line}
@media (max-width:760px){.upbar.note{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
.abig.bad{background:var(--bad)}

.dcom{margin-top:18px}
.dcom .opt>svg{color:var(--cyan)}

/* colour-blind mode, SVG boards (Mühle, Backgammon, Hex): the yellow side gets a dashed dark ring */
.cb:not(.swap) .mill .stn.s2,.cb.swap .mill .stn.s1,.cb:not(.swap) .bg .ck.s2,.cb.swap .bg .ck.s1{stroke:rgba(8,9,15,.85);stroke-width:.09;stroke-dasharray:.13 .09}
.cb:not(.swap) .bg .ck.s2,.cb.swap .bg .ck.s1{stroke-width:.07;stroke-dasharray:.1 .07}
.cb:not(.swap) .hx .cl.p2,.cb.swap .hx .cl.p1{stroke:rgba(8,9,15,.9);stroke-width:.16;stroke-dasharray:.12 .08}
.cb:not(.swap) .hx .ed2,.cb.swap .hx .ed1{stroke:rgba(8,9,15,.9);stroke-width:.08;stroke-dasharray:.09 .07}
/* player cards: a shape next to the name (circle, triangle, square, diamond) so seats differ without colour */
.cb .pcard .nm b::before{display:inline-block;margin-right:6px;font-size:.8em;vertical-align:.08em;color:var(--sc,currentColor)}
.cb .pcard.ps1 .nm b::before{content:'●'}.cb .pcard.ps2 .nm b::before{content:'▲'}.cb .pcard.ps3 .nm b::before{content:'■'}.cb .pcard.ps4 .nm b::before{content:'◆'}

/* ---------- connection bar in online games ---------- */
.connbar{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:9px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--fg);box-shadow:0 10px 30px rgba(0,0,0,.45);animation:fadein .25s}
.connbar span{display:flex;flex-direction:column;gap:2px;min-width:0}
.connbar b{font-size:14px}
.connbar small{font-size:12.5px;color:var(--muted)}
.connbar .cspin{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--warn);border-right-color:transparent;animation:radarSpin .8s linear infinite}
.connbar svg{width:18px;height:18px;flex:none;color:var(--good,#4ade80)}
.connbar.back{border-color:color-mix(in srgb,var(--good,#4ade80) 55%,var(--line));background:color-mix(in srgb,var(--good,#4ade80) 12%,var(--panel))}
.connbar.out{opacity:0;transition:opacity .25s}

/* ---------- feedback ---------- */
.fbf .repr{grid-template-columns:repeat(3,1fr)}
.fbf .repr button{text-align:center}
.mrow .fbtxt{white-space:pre-wrap;word-break:break-word;color:var(--fg)}

/* ---------- game night ---------- */
.night-on{border-color:color-mix(in srgb,var(--yellow,#ffd84f) 45%,var(--line))}
.night-on svg{color:var(--yellow,#ffd84f)}
.night .nt-list{display:flex;flex-direction:column;gap:8px}
.night .nt-in{display:flex;gap:6px;align-items:center}
.night .nt-in .inp{flex:1;min-width:0}
.night .nt-tab{display:flex;flex-direction:column;gap:6px}
.night .nt-row{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);overflow:hidden}
.night .nt-row.lead{border-color:color-mix(in srgb,var(--yellow,#ffd84f) 60%,var(--line))}
.night .nt-rk{width:18px;text-align:center;color:var(--muted);font:800 italic 16px/1 var(--f-d)}
.night .nt-row.lead .nt-rk{color:var(--yellow,#ffd84f)}
.night .nt-nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:1}
.night .nt-bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:color-mix(in srgb,var(--yellow,#ffd84f) 12%,transparent);transition:width .4s var(--ease)}
.night .nt-pt{font:800 italic 22px/1 var(--f-d);z-index:1}
.night .nt-h{margin:4px 0 0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.night .nt-log{display:flex;flex-direction:column;gap:4px;font-size:14px}
.night .nt-log div{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.night .nt-log b{color:var(--fg)}
.night .nt-btns{display:flex;flex-wrap:wrap;gap:8px}
.night .nt-pick{display:flex;flex-wrap:wrap;gap:8px}
.night.fin{align-items:center;text-align:center}
.night.fin .nt-tab{width:100%}
.night .nt-crown svg{width:54px;height:54px;color:var(--yellow,#ffd84f);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--yellow,#ffd84f) 60%,transparent))}
.nt-end{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 4px}
.nt-end .nt-k{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.nt-end .nt-k svg{width:15px;height:15px;color:var(--yellow,#ffd84f)}
.nt-end .nt-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.nt-end .nt-pick button{min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:18px;background:var(--panel2);color:var(--fg);font-weight:700;font-size:14px;transition:all .15s}
.nt-end .nt-pick button.on{color:var(--ink);background:var(--yellow,#ffd84f);border-color:var(--yellow,#ffd84f)}
.night .nt-how{margin:0;padding:0;list-style:none;counter-reset:nt;display:flex;flex-direction:column;gap:10px}
.night .nt-how li{counter-increment:nt;display:grid;grid-template-columns:28px 1fr;column-gap:10px;align-items:start}
.night .nt-how li::before{content:counter(nt);grid-row:span 2;width:28px;height:28px;display:grid;place-items:center;transform:skewX(var(--sk));background:var(--pink);color:var(--ink);font:800 italic 16px/1 var(--f-d)}
.night .nt-how b{font-size:15px}
.night .nt-how span{color:var(--muted);font-size:13.5px;line-height:1.4}

/* ---------- laptop shell (>= 960 px): fixed sidebar, main area that scrolls by itself, app bar ---------- */
:root{--side-w:248px;--side-rail-w:72px;--abar-h:72px}
.side{display:none}
@media (min-width:960px){
  html.side-rail{--side-w:var(--side-rail-w)}
  html,body{height:100%}
  body{padding:0;overflow:hidden}
  #app{position:fixed;top:0;right:0;bottom:0;left:var(--side-w);max-width:none;margin:0;padding:0 28px 40px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  #app::-webkit-scrollbar,.side::-webkit-scrollbar{width:10px}
  #app::-webkit-scrollbar-thumb,.side::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid var(--ink)}
  #app::-webkit-scrollbar-track,.side::-webkit-scrollbar-track{background:transparent}
  /* views without the app bar keep the old top spacing */
  #app>.view:not(.home){padding-top:max(12px,env(safe-area-inset-top,0px))}
  .connbar{left:calc(50% + var(--side-w) / 2)}

  /* sidebar */
  .side{display:flex;flex-direction:column;gap:14px;position:fixed;z-index:20;left:0;top:0;bottom:0;width:var(--side-w);padding:20px 14px 14px;
    background:var(--ink2);border-right:1px solid var(--line);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .sd-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px}
  .sd-logo{display:inline-flex;align-items:center;gap:6px;font:800 italic 30px/1 var(--f-d);letter-spacing:.04em;padding:4px 2px}
  .sd-logo .l1{color:var(--pink)} .sd-logo .l2{color:var(--yellow)}
  .sd-logo .slash{width:5px;height:26px;background:linear-gradient(var(--pink),var(--yellow));transform:skewX(-18deg);border-radius:1px}
  .sd-logo .sd-vs{display:none;font-weight:800;background:linear-gradient(90deg,var(--pink) 50%,var(--yellow) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sd-tog,.sd-gear{width:36px;height:36px;border-radius:10px}
  .sd-tog svg,.sd-gear svg{width:18px;height:18px}
  .sd-tog:disabled{opacity:.35;pointer-events:none}
  .sd-quick{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;height:50px;border-radius:14px;background:var(--pink);color:var(--ink);
    font:800 italic 17px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 5px 0 var(--pink-lo);margin-bottom:6px;
    transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
  .sd-quick svg{width:20px;height:20px;flex:none}
  .sd-quick:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--pink-lo)}
  .sd-quick:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pink-lo)}
  .sd-nav{display:flex;flex-direction:column;gap:2px}
  .sd-item{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border-radius:11px;color:var(--muted);font-weight:600;font-size:14.5px;position:relative;
    transition:background var(--t-fast),color var(--t-fast)}
  .sd-item svg{width:19px;height:19px;flex:none}
  .sd-item>span{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sd-item>small{color:var(--dim);font:700 12px/1 var(--f-d)}
  .sd-item:hover{background:var(--panel2);color:var(--fg)}
  .sd-item.on{background:var(--panel2);color:var(--fg)}
  .sd-item.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--pink);box-shadow:0 0 10px var(--pink)}
  .sd-item.on svg{color:var(--pink)}
  .side .nb{position:static;transform:none;margin-left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--pink);color:var(--ink);font:800 11px/20px var(--f-d);font-style:normal;text-align:center}
  .sd-sec{display:flex;flex-direction:column;gap:2px;min-width:0}
  .sd-sec h4{display:flex;align-items:center;justify-content:space-between;margin:4px 12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .sd-sec h4 em{font-style:normal;color:var(--good);letter-spacing:.02em;text-transform:none;font-size:12px}
  .sd-game{display:flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 10px;border-radius:11px;color:var(--fg);font-size:14px;font-weight:600;transition:background var(--t-fast)}
  .sd-game:hover{background:var(--panel2)}
  .sd-game .ic{width:30px;height:30px;flex:none;display:grid;place-items:center}
  .sd-game .ic svg,.sd-game .ic img{width:30px;height:30px}
  .sd-game .nm{flex:1;min-width:0;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .sd-game small{color:var(--muted);font:700 12px/1 var(--f-d)}
  .sd-hint{margin:0 12px;color:var(--dim);font-size:13px;line-height:1.45}
  .sd-hint kbd{min-width:18px;height:18px;font-size:11px}
  .sd-fr{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 10px;border-radius:11px}
  .sd-fr:hover{background:var(--panel2)}
  .sd-fav{position:relative;width:32px;height:32px;flex:none;border-radius:10px;background:var(--panel3);display:grid;place-items:center;font:800 italic 13px/1 var(--f-d);color:var(--fg)}
  .sd-fav i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--dim);box-shadow:0 0 0 2px var(--ink2)}
  .sd-fr.on .sd-fav i{background:var(--good)}
  .sd-ft{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .sd-ft b{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .sd-ft small{color:var(--muted);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .sd-mini{height:28px;padding:0 10px;flex:none;border-radius:8px;border:1px solid var(--line2);font-size:12px;font-weight:700;color:var(--fg);transition:border-color var(--t-fast)}
  .sd-mini:hover{border-color:var(--cyan)}
  .sd-bot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:6px}
  .sd-me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
  .sd-av{width:40px;height:40px;flex:none;display:grid;place-items:center;transform:skewX(var(--sk));background:var(--pink);color:var(--ink);font:800 italic 18px/1 var(--f-d)}
  .sd-av span{transform:skewX(10deg)}
  .sd-av.guest{background:var(--panel3);color:var(--fg)}
  .sd-mt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
  .sd-mt b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sd-mt small{color:var(--muted);font-size:12px}
  .sd-login{color:var(--pink);font-size:12.5px;font-weight:700}
  .sd-login:hover{text-decoration:underline}

  /* collapsed: a strip of icons (the titles show as tooltips) */
  .side-rail .side{padding:16px 10px;align-items:center}
  .side-rail .sd-top{flex-direction:column;gap:10px}
  .side-rail .sd-logo{font-size:24px}
  .side-rail .sd-logo .l1,.side-rail .sd-logo .l2,.side-rail .sd-logo .slash{display:none}
  .side-rail .sd-logo .sd-vs{display:block}
  .side-rail .sd-quick{width:48px;height:48px;padding:0}
  .side-rail .sd-quick span,.side-rail .sd-item>span,.side-rail .sd-item>small,.side-rail .sd-sec,.side-rail .sd-mt,.side-rail .sd-gear{display:none}
  .side-rail .sd-nav,.side-rail .sd-bot{align-items:center}
  .side-rail .sd-item{width:48px;height:44px;padding:0;justify-content:center}
  .side-rail .side .nb{position:absolute;top:2px;right:2px;margin:0;min-width:17px;height:17px;line-height:17px;padding:0 4px}
  .side-rail .sd-me{padding:0;background:none;border:0}

  /* app bar at the top of the main area */
  .abar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:var(--abar-h);margin:0 -28px 18px;padding:14px 28px;
    background:color-mix(in srgb,var(--ink) 84%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid transparent;transition:border-color var(--t-base)}
  html.scrolled .abar{border-bottom-color:var(--line)}
  .ab-nav{display:flex;gap:6px}
  .ab-nav .iconbtn{width:36px;height:36px;border-radius:10px}
  .ab-nav .iconbtn svg{width:18px;height:18px}
  .ab-nav .iconbtn:disabled{opacity:.35;pointer-events:none}
  .ab-search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--dim);cursor:text;
    transition:border-color var(--t-fast),box-shadow var(--t-fast)}
  .ab-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
  .ab-search>svg{width:18px;height:18px;flex:none}
  .ab-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--fg);font:500 15px/1 var(--f-b)}
  .ab-search input::placeholder{color:var(--dim)}
  .ab-search input::-webkit-search-cancel-button{display:none}
  .ab-search kbd{flex:none}
  .ab-search input:not(:placeholder-shown)~kbd{display:none}
  .abar .top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
  .ab-lobby{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--fg);
    font:700 italic 15px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;transition:border-color var(--t-fast)}
  .ab-lobby:hover{border-color:var(--good)}
  .ab-lobby .ldot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
  #hbell{position:relative}
  #hbell .pdot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px var(--panel2)}
  #hbell .pdot[hidden]{display:none}
  .sel-panel{top:calc(var(--abar-h) + 18px)}
}
@media (min-width:960px) and (max-width:1279px){
  .ab-lobby span{display:none}.ab-lobby{padding:0 14px}
  .select{grid-template-columns:minmax(0,1fr) 320px;gap:24px}
}
@media (min-width:960px){.ab-search{min-width:150px}.abar .top-r{flex:none}}

/* ---------- laptop home: hero, mode tiles, "Weiterspielen", library cards, game panel ---------- */
.tile .pc{display:none}
#gtop[hidden]{display:none}
@media (min-width:960px){
  /* wide hero: pink on the left, the panel colour on the right, the game picture turned a little */
  .hero.hwide{margin:0 0 18px;padding:0;border-radius:var(--r-l);outline:none}
  .hero.hwide:focus-visible{box-shadow:0 0 0 2px var(--cyan)}
  .hero.hwide .hero-tr{gap:16px;transform:translateX(calc(var(--i) * -1 * (100% + 16px) + var(--dx)))}
  .hcard.hw{flex:0 0 100%;height:auto;min-height:270px;border-radius:var(--r-l);color:var(--ink);opacity:.5;transform:scale(.96);
    background:linear-gradient(105deg,var(--acc) 0 57%,var(--panel) 57.2%);box-shadow:var(--depth),0 26px 50px -24px var(--acc)}
  .hcard.hw.on{opacity:1;transform:none}
  .hcard.hw:active{transform:none}
  .hcard.hw .hc-st{background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 10px,transparent 10px 22px)}
  .hcard.hw .hc-tx{position:relative;left:auto;top:auto;bottom:auto;width:52%;padding:30px 34px;gap:10px;min-height:270px}
  .hcard.hw .hc-tx b{font-size:64px;line-height:.86;margin-top:8px}
  .hcard.hw .hc-tx small{font-size:15px;max-width:42ch;opacity:.8}
  .hc-btns{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;padding-top:10px}
  .hc-btns button{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;transform:skewX(var(--sk));font:800 italic 16px/1 var(--f-d);letter-spacing:.07em;text-transform:uppercase;
    transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
  .hc-btns button>*{transform:skewX(10deg)}
  .hc-btns svg{width:17px;height:17px}
  .hb-play{background:var(--ink);color:var(--fg);box-shadow:4px 4px 0 rgba(255,255,255,.5)}
  .hb-play kbd{background:var(--panel2);height:19px;font-size:11px}
  .hb-on{border:2px solid var(--ink);color:var(--ink)}
  .hc-btns button:hover{transform:skewX(var(--sk)) translate(-2px,-2px)}
  .hc-btns button:active{transform:skewX(var(--sk)) translate(2px,2px)}
  .hc-btns button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
  .hcard.hw .hc-ic{right:7%;top:50%;width:210px;height:210px;margin-top:-105px;transform:rotate(-6deg);animation:none;filter:drop-shadow(0 22px 26px rgba(0,0,0,.6))}
  .hero.hwide .hero-dots{justify-content:flex-end;margin:-26px 26px 0 0;position:relative;z-index:2;gap:6px}
  .hero.hwide .hero-dots button{height:6px;width:14px;background:var(--line2);transform:skewX(-30deg);transition:width .35s var(--ease),background .35s}
  .hero.hwide .hero-dots button.on{width:34px;background:var(--pink)}
  .hero.hwide{padding-bottom:6px}

  /* mode tiles */
  .mtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0 26px}
  .mtile{--c:var(--cyan);display:flex;align-items:center;gap:14px;min-height:84px;padding:14px 16px;text-align:left;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line);
    box-shadow:var(--depth);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast)}
  .mtile.y{--c:var(--yellow)} .mtile.p{--c:var(--pink)} .mtile.g{--c:var(--good)}
  .mtile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:0 7px 0 #05060c}
  .mtile:active{transform:translateY(var(--press-y));box-shadow:var(--depth-press)}
  .mt-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;transform:skewX(var(--sk));background:var(--c);color:var(--ink)}
  .mt-ic svg{width:21px;height:21px;transform:skewX(10deg)}
  .mt-tx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
  .mt-tx b{font:800 italic 18px/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
  .mt-tx small{color:var(--muted);font-size:13px;margin-top:3px}

  /* Weiterspielen */
  .cont-w{margin-bottom:26px}
  .crow-w{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
  .ccard{--acc:var(--pink);display:flex;align-items:center;gap:14px;padding:12px 14px;text-align:left;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line);
    box-shadow:var(--depth);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast)}
  .ccard:hover{transform:translateY(-2px);border-color:var(--line2)}
  .ccard.turn{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
  .cc-ic{width:54px;height:54px;flex:none}
  .cc-ic svg{width:100%;height:100%}
  .cc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .cc-tx b{font:800 italic 18px/1.05 var(--f-d);text-transform:uppercase;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .cc-tx b i{font-style:normal;font-family:var(--f-b);font-weight:600;font-size:13px;text-transform:none;color:var(--muted)}
  .cc-tx small{color:var(--muted);font-size:12.5px}
  .ccard.turn .cc-tx small{color:var(--good)}
  .cc-bar{display:block;height:4px;border-radius:2px;background:var(--panel3);overflow:hidden;margin-top:4px}
  .cc-bar i{display:block;height:100%;width:var(--w);background:var(--acc)}

  /* library head: title, view switch; the chips row keeps the dice */
  .lhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 10px}
  .lh{font:800 italic 30px/1 var(--f-d);text-transform:uppercase;margin:0;display:flex;align-items:baseline;gap:10px}
  .lh small{font-size:15px;color:var(--dim)}
  .lview{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
  .lview button{width:36px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--dim);transition:background var(--t-fast),color var(--t-fast)}
  .lview button svg{width:17px;height:17px}
  .lview button:hover{color:var(--fg)}
  .lview button.on{background:var(--panel3);color:var(--fg)}
  .gfind .chips button.on{color:var(--ink);background:var(--fg);border-color:var(--fg)}

  /* library cards */
  .tiles.cards{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
  .tiles.cards .tile{border-radius:18px;overflow:hidden;transition:transform var(--t-base) var(--spring-soft),box-shadow var(--t-base),border-color var(--t-fast)}
  .tiles.cards .tile .art{height:118px;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.03) 0 9px,transparent 9px 20px),
    radial-gradient(70% 90% at 50% 60%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),var(--panel2)}
  .tiles.cards .tile .art .ic{width:84px;height:84px;transition:transform .35s var(--spring)}
  .tiles.cards .tile .tx{padding:10px 12px 12px}
  .tiles.cards .tile b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tiles.cards .tile .tx>small:not(.pc){display:none}
  .tiles.cards .tile .pc{display:block;font-size:12.5px}
  .tiles.cards .tile .meta{position:absolute;top:8px;left:8px;padding:0}
  .tiles.cards .tile .meta em:not(.new):not(.maint){display:none}
  .tiles.cards .tile .bdg.n{top:auto;bottom:8px;left:8px}
  .tiles.cards .tile .meta:has(em.new)~.art .bdg.n,.tiles.cards .tile:has(.meta em.new) .bdg.n{display:none}
  .tiles.cards .tile .meta em.new,.tiles.cards .tile .meta em.maint{font-size:10px;padding:3px 6px}
  .tiles.cards .tile:hover{transform:translateY(-4px)}
  .tiles.cards .tile:hover .art .ic{transform:scale(1.08) rotate(-3deg)}
  .tiles.cards .tile.sel{border:2px solid var(--pink);box-shadow:6px 6px 0 color-mix(in srgb,var(--pink) 35%,transparent);transform:translateY(-4px)}
  .tiles.cards .tile.sel::after{display:none}
  .tiles.cards .tile:focus-visible{border-color:var(--cyan);box-shadow:6px 6px 0 color-mix(in srgb,var(--cyan) 35%,transparent)}
  .lockc .tiles.cards{margin-top:2px}

  /* game panel: its own scroll area next to the library, the play button stays at the bottom */
  .sel-panel{max-height:calc(100dvh - var(--abar-h) - 36px);overflow-y:auto;overflow-x:hidden;border-radius:var(--r-l);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .sel-panel .gp{border-radius:var(--r-l);min-height:100%}
  .sel-panel .gp-art{height:210px;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.035) 0 10px,transparent 10px 22px),
    radial-gradient(70% 90% at 50% 60%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%),var(--panel2)}
  .sel-panel .gp-art .ic{width:140px;height:140px}
  .sel-panel .gp-art .cat{top:16px;left:0;padding:6px 12px 6px 16px;background:var(--pink);color:var(--ink);transform:none;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
  .sel-panel .gp-txt h2{font-size:36px}
  .sel-panel .gp-mode .seg-ind{box-shadow:inset 0 -3px 0 var(--pink)}
  .sel-panel .gp-lvl .lv-top b{color:var(--cyan)}
  .sel-panel .gp-go{position:sticky;bottom:0;z-index:2;margin-top:auto;background:linear-gradient(transparent,var(--panel) 22%);padding-top:26px}
  .sel-panel .gp-go .btn.primary.big{height:56px}
  .gp-keys{display:flex!important;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:-6px 18px 16px;color:var(--dim);font-size:12px}
  .gp-keys span{display:inline-flex;align-items:center;gap:5px}
  .gp-keys kbd{height:19px;min-width:19px;font-size:11px}
  /* the parts of the panel fade in, not .gp-body itself: a transform there would make it the box the star and the close
     button are placed in, so they jumped from the middle to the top for a moment */
  .gp.gp-sw .gp-body>:not(.fav):not(.gpx){animation:gpfade .15s var(--ease)}
  @keyframes gpfade{from{opacity:0;transform:translateY(6px)}}
}
.lowfx .tiles.cards .tile,.lowfx .tiles.cards .tile .art .ic,.lowfx .mtile,.lowfx .ccard{transition:none}
.lowfx .tiles.cards .tile:hover,.lowfx .tiles.cards .tile:hover .art .ic,.lowfx .mtile:hover,.lowfx .ccard:hover{transform:none}
.lowfx .gp.gp-sw .gp-body>*{animation:none}

/* ---------- match: game bar, turn pill (laptop) and the pause menu ---------- */
.tpill{display:none}
.pbar .iconbtn{position:relative}
@media (min-width:960px){
  /* the game bar: a strip over the whole main area with the tools and their keys */
  .view.play>.pbar{position:sticky;top:0;z-index:12;margin:calc(-1 * max(12px,env(safe-area-inset-top,0px))) -28px 14px;padding:10px 28px;min-height:64px;
    background:color-mix(in srgb,var(--ink2) 85%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
  .view.play>.pbar .ttl{flex:1;text-align:left;align-items:flex-start;padding-left:6px}
  .view.play>.pbar .ttl b{font-size:24px}
  .pbar .iconbtn:disabled{opacity:.35}
  /* the player whose turn it is glows, the other one waits */
  .duel:has(.pcard.on) .pcard:not(.on){opacity:.62}
  .pcard{transition:opacity var(--t-base),box-shadow var(--t-base),border-color var(--t-base)}
  .pcard.on{border-width:2px;box-shadow:6px 6px 0 var(--sc),0 0 30px -6px var(--sc)}
  /* under the board: whose turn it is and the main keys of the game */
  .tpill{display:flex;align-items:center;gap:10px;align-self:center;margin-top:12px;padding:8px 16px 8px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);font-size:13.5px;max-width:100%}
  .tpill[hidden]{display:none}
  .tpill>i{width:12px;height:12px;flex:none;border-radius:50%;background:var(--c,var(--pink));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--pink)) 25%,transparent)}
  .tpill b{font:800 italic 15px/1 var(--f-d);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
  .tpill small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tpill kbd{height:19px;min-width:19px;font-size:11px}
  .center{display:flex;flex-direction:column;align-items:center}
}

/* pause menu: two columns on the laptop, a sheet on the phone */
.modal.pausem{width:min(100%,760px);padding:0;overflow:hidden;border-radius:var(--r-xl)}
.mb-pausem{background:linear-gradient(105deg,rgba(255,79,216,.16),rgba(8,9,15,.7) 50%,rgba(255,216,79,.14));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pause{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.pz-l{display:flex;flex-direction:column;gap:10px;padding:26px}
.pz-k{font:700 italic 12px/1 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.pz-l h2{margin:0;font:800 italic 52px/.9 var(--f-d);text-transform:uppercase}
.pz-info{margin:0 0 6px;color:var(--muted);font-size:13.5px}
.pz-l .btn.big{width:100%;height:58px}
.pz-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.pz-row{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border-radius:11px;color:var(--fg);font-weight:600;font-size:15px;text-align:left;transition:background var(--t-fast)}
.pz-row:hover{background:var(--panel2)}
.pz-row svg{width:19px;height:19px;flex:none;color:var(--muted)}
.pz-row span{flex:1}
.pz-row kbd{height:20px;font-size:11px}
.pz-leave{display:flex;align-items:center;gap:12px;margin-top:auto;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--bad) 45%,var(--line));color:var(--bad);text-align:left;transition:background var(--t-fast)}
.pz-leave:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pz-leave svg{width:18px;height:18px;flex:none}
.pz-leave span{display:flex;flex-direction:column;line-height:1.25}
.pz-leave small{color:var(--muted);font-size:12px}
.pz-r{display:flex;flex-direction:column;gap:8px;padding:26px 22px;background:var(--ink2);border-left:1px solid var(--line)}
.pz-r h3{margin:0 0 4px;font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.pz-sl{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.pz-sl.off{opacity:.45}
.pz-sl input{width:100%;accent-color:var(--pink)}
.pz-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 4px;font-size:14.5px;font-weight:600;text-align:left}
.pz-opts{margin-top:auto;color:var(--cyan)}
.pz-opts svg{color:var(--cyan)}
@media (max-width:959px){
  .pause{grid-template-columns:1fr}
  .pz-l{padding:22px 18px 10px}
  .pz-l h2{font-size:40px}
  .pz-r{border-left:0;border-top:1px solid var(--line);padding:16px 18px max(18px,env(safe-area-inset-bottom,0px))}
}
.lowfx .pcard{transition:none}
@media (max-width:959px){.pbar #pz{display:none}}
/* dialogs on the laptop: one look (big radius, light edge, deep shadow) */
@media (min-width:960px){
  .modal{border-radius:var(--r-xl);border-color:var(--line2);box-shadow:0 34px 80px rgba(0,0,0,.6),var(--depth)}
  .modal-back{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
@media (max-width:959px){.modal.pausem{overflow-y:auto}}

/* ---------- areas: Online lobby, Bilanz, Konto, Optionen, Admin ---------- */
/* Online */
.ohead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ostat{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;margin-bottom:6px;border-radius:var(--r-pill);font-style:normal;font-size:12.5px;font-weight:700;background:var(--panel);border:1px solid var(--line)}
.ostat i{width:8px;height:8px;border-radius:50%;background:var(--good)} .ostat.wait i{background:var(--yellow)} .ostat.off i{background:var(--bad)}
.ocode{display:flex;gap:8px;margin-left:auto}
.ocode .inp{width:200px;height:40px;text-transform:uppercase;letter-spacing:.12em}
.ocode .inp::placeholder{text-transform:none;letter-spacing:0}
.obanners:empty{display:none}
.rsel{display:flex;align-items:center;gap:10px;margin:8px 0}
.rsel svg{width:18px;height:18px;flex:none;color:var(--yellow)}
.rsel select{flex:1;height:40px;min-width:0}
.oacc b{font:800 italic 20px/1.1 var(--f-d);text-transform:uppercase}
.ooff{margin-top:6vh}
.ooff svg{width:46px;height:46px;color:var(--warn)}
@media (max-width:959px){.ocode{margin-left:0;width:100%}.ocode .inp{flex:1;width:auto}}
@media (min-width:960px){
  .online .ogrid,.online .ogrid.solo{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:22px}
  .obanners{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
}

/* Bilanz */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kpi small.up{color:var(--good);font-weight:700}
.sgrid{display:grid;gap:16px;margin-top:16px}
.scol{display:flex;flex-direction:column;gap:16px;min-width:0}
.schart h3,.smiles h3{margin:0 0 10px;font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.sbars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end;height:150px}
.sb{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.sb i{display:block;height:var(--h);min-height:0;border-radius:3px 3px 0 0}
.sb i.w{background:var(--pink);order:2;border-radius:0 0 3px 3px} .sb i.n{background:var(--line2);order:1}
.sb small{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--dim)}
.schart .fine{margin-top:26px}
.lg{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.lg.w{background:var(--pink)} .lg.n{background:var(--line2)}
.stable{padding:8px;gap:2px}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px 40px 120px 92px;align-items:center;gap:8px;width:100%;min-height:46px;padding:4px 8px;border-radius:9px;text-align:left;font-variant-numeric:tabular-nums}
.st-row:not(.st-head):hover{background:var(--panel2)}
.stable:has(.st-head :nth-child(5):last-child) .st-row{grid-template-columns:minmax(0,1fr) 40px 40px 40px 120px}
.st-head{min-height:34px;border-bottom:1px solid var(--line);border-radius:0}
.st-h{font:700 italic 12px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left}
.st-h.on{color:var(--fg)}
.st-g{display:flex;align-items:center;gap:10px;min-width:0}
.st-g .ic{width:32px;height:32px;flex:none} .st-g .ic svg{width:100%;height:100%}
.st-g b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.st-row .good{color:var(--good)} .st-row .bad{color:var(--bad)} .st-row .dim{color:var(--dim)}
.st-q{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.qbar{flex:1;height:6px;border-radius:3px;background:var(--panel3);overflow:hidden}
.qbar i{display:block;height:100%;width:var(--w);background:var(--acc)}
.lvt{font:700 italic 11px/1 var(--f-d);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px;color:var(--ink)}
.lvt.l0{background:var(--good)} .lvt.l1{background:var(--cyan)} .lvt.l2{background:var(--yellow)} .lvt.l3{background:var(--pink)}
.st-none{padding:12px}
.smiles{gap:14px}
.mst{display:flex;flex-direction:column;gap:6px}
.mst>div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mst b{font-size:14px} .mst small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.mbar{display:block;height:8px;border-radius:4px;background:var(--panel3);overflow:hidden}
.mbar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--pink),var(--yellow))}
.sempty{margin-top:8vh}
@media (max-width:959px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-row{grid-template-columns:minmax(0,1fr) 30px 30px 30px 64px;gap:6px}
  .st-row>:nth-child(6){display:none}
  .st-q .qbar{display:none}
  .sb small{font-size:9px}
}
@media (min-width:960px){.sgrid{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}

/* Konto */
.akpis:empty{display:none}
.agrid2{display:grid;gap:16px}
.arecent{gap:8px}
.arecent .fhead{display:flex;align-items:center;justify-content:space-between}
.arecent h3,.ash{margin:0;font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.ash{margin:4px 0 10px 2px}
.arecent .prec .ic{width:30px;height:30px;flex:none} .arecent .prec .ic svg{width:100%;height:100%}
.asplit{display:grid;gap:16px}
.apromo{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:22px;border-radius:var(--r-m);color:var(--ink);
  background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 10px,transparent 10px 22px),linear-gradient(110deg,var(--cyan) 0 62%,var(--panel) 62.3%)}
.apromo b{font:800 italic 34px/.95 var(--f-d);text-transform:uppercase;max-width:12ch}
.apromo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-weight:700}
.apromo li{display:flex;align-items:center;gap:10px}
.apromo li svg{width:20px;height:20px;flex:none}
@media (min-width:960px){
  .acctp{max-width:none}
  .acctp .acard.me{background:repeating-linear-gradient(-60deg,rgba(255,255,255,.025) 0 10px,transparent 10px 22px),linear-gradient(110deg,color-mix(in srgb,var(--cyan) 22%,var(--panel)) 0 45%,var(--panel) 45.3%)}
  .acctp .ahead .abig{width:84px;height:84px;font-size:34px;transform:skewX(var(--sk))}
  .acctp .ahead b{font-size:44px}
  .agrid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .asplit{grid-template-columns:1fr 1fr;max-width:880px;margin:0 auto;align-items:stretch}
  .asplit .acard{box-shadow:none}
  .acctp:has(.asplit)>.title{max-width:880px;margin:0 auto 18px;width:100%}
}

/* Optionen: categories */
.onav .osearch{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--dim)}
.onav .osearch:focus-within{border-color:var(--cyan)}
.onav .osearch svg{width:17px;height:17px;flex:none}
.onav .osearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--fg);font:500 15px/1 var(--f-b)}
.onav-l{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.onav-l button{flex:none;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}
.onav-l button.on{color:var(--fg);border-color:var(--pink)}
.onav-v{display:none}
.onow{display:none}
.oh-b{font:inherit;color:inherit;text-align:left;width:100%}
.ohide{display:none!important}
.onone{color:var(--muted)}
.ogroup .krow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line)}
.ogroup .krow p{margin:0;color:var(--muted);font-size:14px;text-align:right}
.ogroup .kh{margin:12px 14px 4px;font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ogroup .optlist .fine{padding:8px 14px}
.bprev{display:none}
@media (max-width:959px){
  /* no box of its own: on the page the background shows through (the page scrolls in body, so the bar scrolls along
     anyway); in the options dialog it gets the dialog's colour, see .optpop below */
  .oset .onav{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;gap:10px;padding:8px 0}
  .oset .onav .title{margin-bottom:4px}
  .oh-b::after{content:'›';float:right;transform:rotate(90deg);transition:transform var(--t-base);color:var(--dim)}
  .ogroup.shut .oh-b::after{transform:none}
  .ogroup.shut .optlist{display:none}
  .oset .ogroups{margin-top:10px}
}
@media (min-width:960px){
  .oset{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
  .onav{position:sticky;top:calc(var(--abar-h) + 18px);display:flex;flex-direction:column;gap:14px}
  .onav .title{font-size:44px}
  .onav-l{flex-direction:column;overflow:visible}
  .onav-l button{height:40px;text-align:left;border:0;background:none;border-radius:11px}
  .onav-l button:hover{background:var(--panel2);color:var(--fg)}
  .onav-l button.on{background:var(--panel2);color:var(--fg);box-shadow:inset 3px 0 0 var(--pink)}
  .onav-v{display:block;margin:6px 4px 0;color:var(--dim);font-size:12.5px;line-height:1.7}
  .onav-v a{color:var(--muted)}
  .onow{display:block;margin:0 0 12px;color:var(--dim);font-size:13px}
  .oset .ogroups{grid-template-columns:minmax(0,1fr);max-width:760px}
  .oset:not(.osearching) .ogroup{display:none}
  .oset[data-cat="sound"]:not(.osearching) [data-oc="sound"],.oset[data-cat="look"]:not(.osearching) [data-oc="look"],.oset[data-cat="game"]:not(.osearching) [data-oc="game"],
  .oset[data-cat="keys"]:not(.osearching) [data-oc="keys"],.oset[data-cat="net"]:not(.osearching) [data-oc="net"],.oset[data-cat="app"]:not(.osearching) [data-oc="app"],
  .oset[data-cat="data"]:not(.osearching) [data-oc="data"]{display:block}
  .oset .oh{font-size:28px;margin-bottom:12px}
  .oset .about{display:none}
  /* board previews under the board choice */
  .bprev{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 14px 16px}
  .bp{display:flex;flex-direction:column;gap:8px;align-items:center;padding:10px;border-radius:14px;border:2px solid var(--line);background:var(--panel2);color:var(--muted);font-weight:600;font-size:13px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
  .bp i{display:block;width:100%;aspect-ratio:1;border-radius:6px;background:conic-gradient(var(--b1) 25%,var(--b2) 0 50%,var(--b1) 0 75%,var(--b2) 0) 0 0/25% 25%}
  .bp-std{--b1:#e9e3d2;--b2:#6d7fa6} .bp-neon{--b1:#1b1f45;--b2:#ff4fd8} .bp-wood{--b1:#e7c595;--b2:#9a6337}
  .bp.on{border-color:var(--pink);color:var(--fg);box-shadow:5px 5px 0 color-mix(in srgb,var(--pink) 35%,transparent)}
}

/* Admin panel on the laptop: the sections as a list on the left */
@media (min-width:960px){
  .view.admin{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-areas:"bar bar" "nav body";gap:16px 24px;align-items:start}
  .view.admin>.sbar{grid-area:bar}
  .view.admin>#atabs{grid-area:nav;flex-direction:column;overflow:visible;position:sticky;top:12px;padding:0}
  .view.admin>#atabs button{transform:none;text-align:left;justify-content:flex-start;border:0;background:none;border-radius:11px;height:42px}
  .view.admin>#atabs button.on{background:var(--panel2);color:var(--fg);box-shadow:inset 3px 0 0 var(--pink)}
  .view.admin>.abody{grid-area:body;min-width:0}
}
@media (min-width:960px){.stats.sx,.opts.oset,.online,.acctp:not(:has(.asplit)){max-width:none;margin-inline:0}}
.apromo{--acc:var(--cyan)}
.asplit .amode button{font-size:13px;gap:5px;letter-spacing:.02em}
.oset .onav,.oset .omain,.onav-l{min-width:0;max-width:100%}

/* ---------- phone polish (< 960 px) ---------- */
.ah-big,.ccard-p,.frs,.grow.fy,.lv-big{display:none}
@media (max-width:959px){
  /* head: greeting over the name, stays at the top and gets a background once the page scrolls */
  .ahd{position:sticky;top:0;z-index:26;margin:0 -16px 10px;padding:max(8px,env(safe-area-inset-top,0px)) 16px 8px;transition:background var(--t-base),box-shadow var(--t-base)}
  .scrolled .ahd{background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 1px 0 var(--line)}
  .ah-av{width:44px;height:44px}
  .ah-g{font-size:12.5px;color:var(--muted);line-height:1;font-weight:600}
  .ah-t{gap:3px}
  .ah-t b{font-size:20px}
  .ahd .iconbtn{width:42px;height:42px}
  .ah-big{display:block;margin:0 0 16px;font:800 italic 40px/.9 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
  /* the open match: diagonal yellow and dark */
  .ccard-p{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:112px;margin-bottom:16px;padding:16px 18px;text-align:left;
    border-radius:var(--r-l);color:var(--ink);overflow:hidden;box-shadow:var(--depth);
    background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 9px,transparent 9px 20px),linear-gradient(110deg,var(--yellow) 0 58%,var(--panel) 58.3%)}
  .ccard-p:active{transform:translateY(var(--press-y));box-shadow:var(--depth-press)}
  .ccard-p .hc-k{--acc:var(--yellow)}
  .cp-tx{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
  .cp-tx b{font:800 italic 30px/.9 var(--f-d);text-transform:uppercase}
  .cp-tx small{font-size:13px;font-weight:700;opacity:.8}
  .cp-ic{width:86px;height:86px;flex:none;transform:rotate(-6deg);filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
  .cp-ic svg{width:100%;height:100%}
  /* compact quick tiles */
  .qtile{height:76px}
  /* friends as round avatars */
  .frs{display:block;margin-bottom:20px}
  .frs .gh small.good{color:var(--good)}
  .frs-l{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px 6px}
  .frs-l::-webkit-scrollbar{display:none}
  .frs-a{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:6px}
  .frs-a>span{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--fc,var(--line2));font:800 italic 16px/1 var(--f-d)}
  .frs-a:not(.on)>span{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--line2);opacity:.7}
  .frs-a i{position:absolute;right:0;bottom:0;width:13px;height:13px;border-radius:50%;background:var(--good);border:2px solid var(--ink)}
  .frs-a:not(.on) i{display:none}
  .frs-a small{max-width:100%;font-size:11.5px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .frs-a.add>span{background:none;box-shadow:none;border:2px dashed var(--line2);color:var(--muted)}
  .frs-a.add svg{width:20px;height:20px}
  /* "Für dich": two columns, bigger pictures */
  .grow.fy{display:block}
  .tiles.fy{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tiles.fy .tile .art{height:104px}
  .tiles.fy .tile .art .ic{width:64px;height:64px}
  /* game sheet: a pink diagonal head, the AI levels as four big buttons, the actions in thumb reach */
  .sel-panel.solo .gp-art{height:196px;background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 10px,transparent 10px 22px),linear-gradient(110deg,var(--acc) 0 52%,var(--panel2) 52.3%)}
  .sel-panel.solo .gp-art .ic{width:124px;height:124px}
  .sel-panel.solo .gp-mode{height:52px}
  .lv-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
  .lvb{--c:var(--good);display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:58px;padding:10px 14px;transform:skewX(var(--sk));border:1px solid var(--line2);background:var(--panel2);text-align:left;transition:transform var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
  .lvb>*{transform:skewX(10deg)}
  .lvb.l1{--c:var(--cyan)} .lvb.l2{--c:var(--yellow)} .lvb.l3{--c:var(--pink)}
  .lvb b{font:800 italic 17px/1 var(--f-d);text-transform:uppercase;color:var(--c)}
  .lvb small{font-size:12px;color:var(--muted)}
  .lvb.on{background:var(--c);border-color:var(--c)}
  .lvb.on b,.lvb.on small{color:var(--ink)}
  .lvb:active{transform:skewX(var(--sk)) scale(.96)}
  .sel-panel.solo .gp-more{margin:12px 18px 0;padding:12px 14px;border-radius:var(--r-m);background:var(--panel2);border:1px solid var(--line)}
  .sel-panel.solo .gp-go{flex-wrap:wrap}
  .sel-panel.solo .gp-go .btn.primary.big{height:60px;flex:1 1 100%;order:-1}
  .sel-panel.solo .gp-go .finv{flex:1;height:52px}
}
@media (max-width:959px){.sel-panel.solo .gp-go #tut{flex:1 1 0;height:52px}.sel-panel.solo .gp-go .finv{flex:1 1 0}}

/* right-click menu on game cards, view transition of the card picture */
.ctxm{position:fixed;z-index:95;min-width:220px;padding:6px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.55);animation:pop .16s var(--ease)}
.ctxm button{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:600;text-align:left}
.ctxm button:hover,.ctxm button:focus-visible{background:var(--panel3);outline:none}
.ctxm svg{width:17px;height:17px;flex:none;color:var(--muted)}
::view-transition-group(gart){animation-duration:.32s;animation-timing-function:var(--ease)}
html.lowfx::view-transition-group(*),html.lowfx::view-transition-old(*),html.lowfx::view-transition-new(*){animation:none!important}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.sd-inst{color:var(--cyan)}
/* Online on the phone: friends before the ranking (on the laptop the ranking has the wide left column) */
@media (max-width:959px){.online .ogrid{grid-template-columns:minmax(0,1fr)}.online .ogrid>.ocol{display:contents}.online .ogrid>.ocol>*{min-width:0}.online .orank{order:2}}

/* options as a popup during a match */
.modal.optm{width:min(100%,920px);padding:22px;max-height:min(86dvh,760px)}
.optpop{position:relative}
.optpop .opx{position:absolute;top:0;right:0;z-index:6}
/* phone: the dialog scrolls under its sticky bar, so the close button stays up there with it */
@media (max-width:959px){.optpop .opx{position:sticky;top:-16px;float:right;margin-bottom:-44px}}
.optpop .oset{max-width:none;margin:0}
.optpop .onav{position:static;top:auto}
.optpop .onav .title{font-size:38px}
@media (max-width:959px){.optpop .onav{position:sticky;top:-22px;padding-top:4px}.optpop .onav .title{font-size:32px;padding-right:50px}
  /* in the dialog the bar is the dialog's own colour, out to its edges, so it is not a dark box inside it */
  .optpop .oset .onav{margin-inline:-22px;padding-inline:22px;max-width:none;width:calc(100% + 44px);box-sizing:border-box;background:linear-gradient(var(--panel) calc(100% - 8px),transparent)}}
/* laptop match: the view spans the whole main area so the game bar reaches both edges; the arena stays at 1180 px */
@media (min-width:960px){
  .view.play{max-width:none}
  .view.play>.duel{width:100%;max-width:1180px;margin-inline:auto}
  .view.play>.pbar{background:color-mix(in srgb,var(--ink2) 96%,transparent)}
}

@media (min-width:960px){.bprev{max-width:440px}}
/* sidebar: options sit in the profile card (gear); the separate row only in the icon strip */
@media (min-width:960px){html:not(.side-rail) .sd-bot>[data-go="opts"]{display:none}}
/* admin: Discord numbers and tag */
.abar2{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 8px;font-size:13px;color:var(--muted)}
.abar2 b{color:var(--fg);font:800 italic 18px/1 var(--f-d);margin-right:5px}
.rtag.dc{color:#fff;background:#5865f2;border-color:#5865f2}
/* sidebar: the quick match button names its game */
@media (min-width:960px){
  .sd-quick{height:56px}
  .sd-quick span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;min-width:0}
  .sd-quick small{font:600 12px/1.2 var(--f-b);text-transform:none;letter-spacing:0;opacity:.75;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
.apanel h4.dch{margin:8px 0 2px;font:700 italic 12px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------- player profile: banner with avatar and badges, stats in one row, games and latest matches side by side ---------- */
.modal.profm:has(.p2){padding:0}
@media (min-width:960px){.modal.profm:has(.p2){width:min(100%,780px)}}
.p2{display:flex;flex-direction:column}
.p2-top{position:relative;display:flex;align-items:center;gap:18px;padding:26px 26px 22px;overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--pink) 32%,var(--panel)) 0 46%,var(--panel2) 46.3%)}
.p2-st{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.035) 0 10px,transparent 10px 22px)}
.p2-av{position:relative;width:84px;height:84px;flex:none;display:grid;place-items:center;transform:skewX(var(--sk));background:var(--pink);color:var(--ink);
  font:800 italic 34px/1 var(--f-d);box-shadow:6px 6px 0 var(--yellow)}
.p2-id{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.p2-id>b{font:800 italic 40px/.95 var(--f-d);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2-id>small{color:var(--muted);font-size:14px}
.p2-id .good{color:var(--good)}
.p2-tags{display:flex;flex-wrap:wrap;gap:6px}
.p2-tags:empty{display:none}
.p2-b{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;transform:skewX(var(--sk));font:800 italic 12px/1 var(--f-d);font-style:normal;letter-spacing:.1em;text-transform:uppercase;
  background:var(--panel3);color:var(--fg)}
.p2-b svg{width:13px;height:13px}
.p2-b.r-owner{background:var(--yellow);color:var(--ink)} .p2-b.r-admin{background:var(--pink);color:var(--ink)} .p2-b.r-mod{background:var(--good);color:var(--ink)} .p2-b.r-dev{background:var(--cyan);color:var(--ink)}
.p2-b.inv{background:color-mix(in srgb,var(--good) 18%,var(--panel3));color:var(--good)}
.p2-x{position:absolute;top:16px;right:16px}
.p2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:18px 26px 0}
.p2-s{--c:var(--pink);padding:14px 16px;border-radius:var(--r-m);background:var(--panel2);border:1px solid var(--line);border-top:3px solid var(--c)}
.p2-s.y{--c:var(--yellow)} .p2-s.c{--c:var(--cyan)} .p2-s.g{--c:var(--good)}
.p2-s b{display:block;font:800 italic 30px/1 var(--f-d);color:var(--c)}
.p2-s span{display:block;margin-top:6px;font:700 italic 12px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.p2-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 26px 0}
.p2-row>*{flex:1;margin:0}
.p2-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:6px 26px 0}
.p2-cols h4{margin:16px 0 10px}
.p2 .precs{max-height:330px}
.p2-foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 26px 22px}
.p2-foot .actions{margin:0;width:100%}
@media (max-width:959px){
  .p2-top{padding:max(20px,env(safe-area-inset-top,0px)) 18px 18px;gap:14px}
  .p2-av{width:64px;height:64px;font-size:26px}
  .p2-id>b{font-size:30px}
  .p2-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 16px 0}
  .p2-row,.p2-foot{padding-left:16px;padding-right:16px}
  .p2-cols{grid-template-columns:1fr;gap:0;padding:0 16px}
  .p2 .precs{max-height:none}
}

/* laptop game panel, calmer: shorter head, three lines of description, the modes as plain buttons (two rows for four) */
@media (min-width:960px){
  .sel-panel .gp-art{height:150px}
  .sel-panel .gp-art .ic{width:100px;height:100px}
  .sel-panel .gp-txt h2{font-size:32px}
  .sel-panel .gp-txt p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .sel-panel .gp-mode{height:auto;gap:6px}
  .sel-panel .gp-mode[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sel-panel .gp-mode .seg-ind{display:none}
  .sel-panel .gp-mode button{height:42px;font-size:14px;gap:7px;letter-spacing:.02em}
  .sel-panel .gp-mode button.on{background:var(--panel3);box-shadow:inset 0 -3px 0 var(--pink)}
  .sel-panel .gp-mode[style*="--n:4"] button{font-size:14px}
  .sel-panel .gp-mode[style*="--n:4"] button svg{width:17px;height:17px}
  .sel-panel .gp-go{padding-bottom:20px}
}
/* room for the hard offset shadows, so buttons next to each other do not run into each other */
.gp-go{gap:18px}
.hero-dots{margin-top:18px}
@media (min-width:960px){.mtiles{gap:16px}.hc-btns{gap:16px}}
@media (min-width:960px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1360px){.mtiles{grid-template-columns:repeat(4,minmax(0,1fr))}.mtile{padding:14px 12px;gap:12px}}

/* ---------- laptop game panel, redesigned: picture in the game's colour, "Wie spielst du?" as tiles, settings, play ---------- */
@media (min-width:960px){
  .sel-panel .gp-art{height:168px;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.03) 0 10px,transparent 10px 22px),
    radial-gradient(80% 110% at 70% 40%,color-mix(in srgb,var(--acc) 45%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--acc) 22%,var(--panel2)),var(--panel) 90%)}
  .sel-panel .gp-art .ic{width:112px;height:112px}
  .sel-panel .gp-art .cat{background:var(--acc)}
  .sel-panel .gp-txt{padding:14px 20px 0}
  .sel-panel .gp-txt h2{font-size:34px}
  .sel-panel .gp-txt p{-webkit-line-clamp:2;font-size:14.5px;margin-top:6px}
  .sel-panel .gp-tags{margin-top:10px}
  .gp-h{margin:18px 20px 8px;font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
  .gp-modes{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 20px}
  .gp-modes.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-modes button{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 12px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);text-align:left;
    transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
  .gp-modes button:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--line2))}
  .gp-modes button:active{transform:scale(.97)}
  .gp-modes button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,var(--panel2));box-shadow:inset 0 0 0 1px var(--acc)}
  .gp-modes button.lockd{opacity:.45}
  .gm-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--panel3);color:var(--muted);transition:background var(--t-fast),color var(--t-fast)}
  .gm-ic svg{width:18px;height:18px}
  .gp-modes button.on .gm-ic{background:var(--acc);color:var(--ink)}
  .gm-t{min-width:0;display:flex;flex-direction:column;gap:3px}
  .gm-t b{font:800 italic 16px/1.05 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
  .gm-t small{font-size:12px;line-height:1.25;color:var(--muted)}
  .sel-panel .gp-lvl{margin:0 20px;padding:0;border:0;background:none}
  .sel-panel .lv-top{margin-bottom:8px}
  .sel-panel .lv-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .sel-panel .lvb{--c:var(--good);display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:52px;padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);text-align:left;
    transition:background var(--t-fast),border-color var(--t-fast)}
  .sel-panel .lvb.l1{--c:var(--cyan)} .sel-panel .lvb.l2{--c:var(--yellow)} .sel-panel .lvb.l3{--c:var(--pink)}
  .sel-panel .lvb b{font:800 italic 14px/1 var(--f-d);text-transform:uppercase;color:var(--c)}
  .sel-panel .lvb small{font-size:11px;line-height:1.2;color:var(--muted)}
  .sel-panel .lvb:hover{border-color:var(--c)}
  .sel-panel .lvb.on{background:var(--c);border-color:var(--c)}
  .sel-panel .lvb.on b,.sel-panel .lvb.on small{color:var(--ink)}
  .sel-panel .gp-lvl .hint{margin-top:8px}
  .sel-panel .gp-more,.sel-panel .gp-extra{margin:10px 20px 0}
  .sel-panel .hint.local,.sel-panel .hint.dch{margin:10px 20px 0}
  .sel-panel .gp-online{margin:0 20px}
  .sel-panel .gp-go{padding:22px 20px 20px}
}
@media (min-width:960px){.hcard.hw .hc-tx b{font-size:clamp(34px,3.7vw,64px);overflow-wrap:normal;word-break:keep-all}}
@media (min-width:960px) and (max-width:1279px){
  .gm-ic{display:none}
  .gp-modes button{min-height:56px;padding:8px 10px}
  .gm-t b{font-size:15px} .gm-t small{font-size:11.5px}
  .sel-panel .lvb small{display:none}
  .sel-panel .lvb{min-height:38px;justify-content:center}
}
/* the panel scrolls itself (.sel-panel); the card must not clip, or the play button cannot stay at the bottom */
@media (min-width:960px){.sel-panel .gp{overflow:visible}}

/* ---------- finding friends: one page ---------- */
.modal.faddm:has(.fadd2){width:min(100%,560px)}
.fq2{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);color:var(--dim)}
.fq2:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent)}
.fq2 svg{width:19px;height:19px;flex:none}
.fq2 input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--fg);font:500 16px/1 var(--f-b)}
.fadd2 .fres:empty{display:none}
.fadd2 .fres{display:flex;flex-direction:column;gap:6px}
.fcodehit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--yellow) 50%,var(--line));background:color-mix(in srgb,var(--yellow) 8%,var(--panel2))}
.fcodehit b{font:800 italic 18px/1 var(--f-d);letter-spacing:.08em}
.fsec{display:flex;flex-direction:column;gap:6px}
.fsec h4{margin:6px 0 2px;font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fadd2 #fcodebox .fcode{padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line)}
.fadd2 #fcodebox .fqr{width:120px;height:120px;flex:none}

/* ---------- admin: attention strip, player table with a detail panel ---------- */
.aattn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.atn-k{font:700 italic 12px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.atn-k.ok{color:var(--good)}
.atn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--yellow) 50%,var(--line));background:color-mix(in srgb,var(--yellow) 10%,var(--panel));font-size:13px;font-weight:700}
.atn.bad{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 12%,var(--panel))}
.atn svg{width:15px;height:15px}
.pgrid2{display:grid;gap:14px;align-items:start}
.ptable{display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line)}
.prow{display:grid;grid-template-columns:minmax(0,2.2fr) 1fr 1fr .6fr .7fr .9fr;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border-radius:10px;text-align:left;font-size:13.5px;color:var(--muted)}
.prow>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow:not(.ph):hover{background:var(--panel2)}
.prow.on{background:var(--panel2);box-shadow:inset 3px 0 0 var(--pink)}
.prow.ph{min-height:30px;font:700 italic 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);border-radius:0}
.pr-n{display:flex;align-items:center;gap:6px}
.pr-n b{color:var(--fg);font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
.pr-n .rtag{flex:none;font-size:10px;padding:2px 5px}
.prow .adot{width:8px;height:8px;border-radius:50%;background:var(--line2);flex:none}
.prow.live .adot{background:var(--good)}
.pmore{align-self:center;margin:8px 0 4px}
.pdrawer.empty{padding:28px 18px;border-radius:var(--r-m);border:1px dashed var(--line2);text-align:center}
.pdrawer .pcard-a{margin:0}
@media (min-width:1200px){
  .pgrid2{grid-template-columns:minmax(0,1fr) 420px}
  .pdrawer{position:sticky;top:12px;max-height:calc(100dvh - 40px);overflow-y:auto}
}
@media (max-width:1199px){.pdrawer{order:-1}.pdrawer.empty{display:none}}
@media (max-width:700px){
  .prow{grid-template-columns:minmax(0,1fr) auto auto}
  .prow>span:nth-child(2),.prow>span:nth-child(4),.prow>span:nth-child(5){display:none}
  .aattn{margin-left:0;width:100%}
}
@media (min-width:960px){.view.admin{grid-template-columns:180px minmax(0,1fr)}}
@media (min-width:1200px){.pgrid2{grid-template-columns:minmax(0,1fr) 380px}}
@media (max-width:1599px){
  .prow{grid-template-columns:minmax(0,2.4fr) 1fr .7fr .9fr}
  .prow>span:nth-child(2),.prow>span:nth-child(4){display:none}
}
@media (max-width:700px){.prow{grid-template-columns:minmax(0,1fr) auto auto}.prow>span:nth-child(5){display:none}}

/* ---------- profile look: banners in the chosen colour, symbol avatars, the editor ---------- */
.p2-top{--lc:var(--pink)}
.p2-top.lb-x{background:linear-gradient(110deg,color-mix(in srgb,var(--lc) 32%,var(--panel)) 0 46%,var(--panel2) 46.3%)}
.p2-top.lb-s{background:repeating-linear-gradient(-55deg,color-mix(in srgb,var(--lc) 26%,var(--panel)) 0 14px,color-mix(in srgb,var(--lc) 12%,var(--panel2)) 14px 28px)}
.p2-top.lb-d{background:radial-gradient(circle,color-mix(in srgb,var(--lc) 45%,transparent) 0 2.5px,transparent 3px) 0 0/16px 16px,linear-gradient(120deg,color-mix(in srgb,var(--lc) 18%,var(--panel)),var(--panel2))}
.p2-top.lb-g{background:linear-gradient(color-mix(in srgb,var(--lc) 22%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--lc) 22%,transparent) 1px,transparent 1px) 0 0/22px 22px,var(--panel2)}
.p2-top.lb-w{background:radial-gradient(120% 60% at 50% 120%,color-mix(in srgb,var(--lc) 35%,transparent) 0 30%,transparent 31%),radial-gradient(90% 50% at 20% 110%,color-mix(in srgb,var(--lc) 22%,transparent) 0 40%,transparent 41%),var(--panel2)}
.p2-top.lb-p{background:color-mix(in srgb,var(--lc) 14%,var(--panel2))}
.p2-top:is(.lb-s,.lb-d,.lb-g,.lb-w,.lb-p) .p2-st{display:none}
.p2-top .p2-av{box-shadow:6px 6px 0 color-mix(in srgb,var(--lc) 45%,var(--ink))}
.p2-av.sym>*,.p2-av.sym{font-size:40px;font-style:normal}
.p2-m{color:var(--fg)!important;font-style:italic;font-size:14.5px!important}
.p2-fav{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:26px;padding:0 10px 0 4px;border-radius:var(--r-pill);background:rgba(8,9,15,.45);font-size:12.5px;font-weight:700}
.p2-fav .ic{width:20px;height:20px} .p2-fav .ic svg{width:100%;height:100%}
.sd-av.sym span,.ah-av.sym span,.abig.sym,.lav{font-style:normal;font-family:var(--f-b)}
.sd-av.sym span,.ah-av.sym span{font-size:20px}
.abig.sym{font-size:30px}

.modal.lkm{width:min(100%,560px)}
.lk{display:flex;flex-direction:column;gap:8px}
.lk h4{margin:10px 0 2px;font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.lk-prev{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line)}
.lk-prev .p2-top{padding:18px}
.lk-prev .p2-av{width:64px;height:64px;font-size:26px}
.lk-prev .p2-av.sym{font-size:32px}
.lk-prev .p2-id>b{font-size:28px}
.lk-sw{display:flex;flex-wrap:wrap;gap:8px}
.lk-sw button{width:38px;height:38px;border-radius:50%;background:var(--sw);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--line2);transition:transform var(--t-fast)}
.lk-sw button.on{box-shadow:0 0 0 3px var(--fg);transform:scale(1.08)}
.lk-ic{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.lk-ic button{height:42px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);font-size:20px;line-height:1}
.lk-ic button.ini{font:800 italic 16px/1 var(--f-d)}
.lk-ic button.on{background:var(--lc);border-color:var(--lc);color:var(--ink)}
.lk-bn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lk-bn button{position:relative;height:52px;border-radius:10px;border:2px solid var(--line2);overflow:hidden;font-size:12.5px;font-weight:700;color:var(--fg)}
.lk-bn button span{position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.lk-bn button.on{border-color:var(--fg)}
.lk-bn .lb-x{background:linear-gradient(110deg,color-mix(in srgb,var(--lc) 40%,var(--panel)) 0 46%,var(--panel2) 46.3%)}
.lk-bn .lb-s{background:repeating-linear-gradient(-55deg,color-mix(in srgb,var(--lc) 30%,var(--panel)) 0 8px,var(--panel2) 8px 16px)}
.lk-bn .lb-d{background:radial-gradient(circle,color-mix(in srgb,var(--lc) 55%,transparent) 0 2px,transparent 2.5px) 0 0/10px 10px,var(--panel2)}
.lk-bn .lb-g{background:linear-gradient(color-mix(in srgb,var(--lc) 30%,transparent) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,color-mix(in srgb,var(--lc) 30%,transparent) 1px,transparent 1px) 0 0/12px 12px,var(--panel2)}
.lk-bn .lb-w{background:radial-gradient(120% 70% at 50% 130%,color-mix(in srgb,var(--lc) 45%,transparent) 0 40%,transparent 41%),var(--panel2)}
.lk-bn .lb-p{background:color-mix(in srgb,var(--lc) 18%,var(--panel2))}

/* ---------- game panel v3 (notes/PANEL-UMSETZUNG.md): picture, mode bar, what the mode does, a rules line,
   a fixed bar at the bottom; the rules view replaces the lower part. Comes last, so it wins over the older panel rules. ---------- */
.gp{display:flex;flex-direction:column}
.gp .gp-art,.gp .gp-txt{flex:none}
.gp .gp-art .cat{background:var(--acc)}
.gp .gp-txt h2{font-size:36px}
.gp .gp-txt p{font-size:15px;line-height:1.45}
.gp .gp-tags em{font-size:13px}
.gp-body{display:flex;flex-direction:column;flex:1;min-height:0}
.gp-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 20px 12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.gp-main>*{margin:0}
.gp .gp-go{flex:none;position:relative;display:flex;align-items:center;gap:16px;margin:0;padding:14px 20px 18px;border-top:1px solid var(--line);background:var(--panel)}
.gp .gp-go .btn.primary.big{flex:1 1 auto;order:0;min-width:0;height:60px;font-size:24px}
.gp .gp-go .btn.primary.big.long{font-size:20px}
.gp .gp-go .btn.primary.big>span{overflow:hidden;text-overflow:ellipsis}
.gp .gp-go .btn.ghost{flex:none;height:52px;padding:0 18px}
.gp .gp-go :is(.gp-inv,.gp-tut.ico){width:56px;padding:0}
:is(.gp,.rvw) .gp-h{margin:0;font:700 italic 14px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* modes: one bar, the icon over the word, the chosen one lit from below */
.gp-mode2{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:var(--ink2)}
.gp-mode2 button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:58px;min-width:0;padding:0 4px;border-radius:12px;color:var(--muted);
  font:700 italic 15px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease)}
.gp-mode2 button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-mode2 button svg{width:20px;height:20px;flex:none}
.gp-mode2[style*="--n:4"] button{font-size:14px;letter-spacing:0;padding:0 2px}
@media (hover:hover) and (pointer:fine){.gp-mode2 button:not(.on):hover{background:var(--panel2);color:var(--fg)}}
.gp-mode2 button:active{transform:scale(.95)}
.gp-mode2 button.on{background:var(--panel3);color:var(--fg);box-shadow:inset 0 -3px 0 var(--pink)}
.gp-mode2 button.on svg{color:var(--pink)}
.gp-mode2 button.lockd{opacity:.45}
.gp-say{font-size:15px;line-height:1.4;color:var(--muted)}

/* AI strength: four slanted blocks, one sentence below */
.gp .gp-lvl{margin:0;padding:0;border:0;background:none}
.gp .lv-top{margin-bottom:6px}
.gp .lv-top span{font-size:14px;letter-spacing:.14em;color:var(--muted)}
.gp .lv-top b{font-size:21px}
.gp .lv-top b.l0{color:var(--good)} .gp .lv-top b.l1{color:var(--cyan)} .gp .lv-top b.l2{color:var(--yellow)} .gp .lv-top b.l3{color:var(--pink)}
.gp .lv-top em{font-size:14px}
.lv-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 4px}
.lv-row .lvb{--c:var(--good);display:grid;place-items:center;height:48px;min-height:0;padding:0 4px;border-radius:0;transform:skewX(var(--sk));border:1px solid var(--line2);background:var(--panel2);
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.lv-row .lvb>*{transform:skewX(10deg)}
.lv-row .lvb.l1{--c:var(--cyan)} .lv-row .lvb.l2{--c:var(--yellow)} .lv-row .lvb.l3{--c:var(--pink)}
.lv-row .lvb b{font:800 italic 17px/1 var(--f-d);text-transform:uppercase;color:var(--c);max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){.lv-row .lvb:hover{border-color:var(--c)}}
.lv-row .lvb:active{transform:skewX(var(--sk)) scale(.95)}
.lv-row .lvb.on{background:var(--c);border-color:var(--c)}
.lv-row .lvb.on b{color:var(--ink)}
.gp-sub{margin:6px 0 0;font-size:14px;line-height:1.35;color:var(--muted)}
/* "Passend zu dir": the AI plays at your KI-Elo (a switch under the four levels) */
.lv-top b.lfit{color:var(--violet,#b98cff)}
.lv-fit{display:flex;align-items:center;gap:12px;width:calc(100% - 8px);margin:8px 4px 0;padding:9px 16px;border:1px solid var(--line2);background:var(--panel2);text-align:left;color:var(--fg);transform:skewX(var(--sk));transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.lv-fit>*{transform:skewX(10deg)}
.lv-fit:active{transform:skewX(var(--sk)) scale(.97)}
.lv-fit .lf-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lv-fit .lf-t b{font:800 italic 15px/1.1 var(--f-d);text-transform:uppercase}
.lv-fit .lf-t small{font-size:12.5px;color:var(--muted)}
.lv-fit .lf-sw{width:42px;height:24px;flex:none;position:relative;background:var(--panel3);transform:none;transition:background .2s}
.lv-fit .lf-sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#cfd2f0;transition:transform .25s var(--spring),background .2s}
.lv-fit.on{border-color:var(--violet,#b98cff);background:color-mix(in srgb,var(--violet,#b98cff) 12%,var(--panel2))}
.lv-fit.on .lf-sw{background:var(--violet,#b98cff)} .lv-fit.on .lf-sw::after{transform:translateX(18px);background:var(--ink)}
@media (hover:hover) and (pointer:fine){.lv-fit:hover{border-color:var(--violet,#b98cff)}}

/* one setting right in the panel, and "Wer fängt an?" */
.gp-inl{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.gp-inl>span{font-size:16px;color:var(--fg)}
.gp-inl.dash{padding-top:10px;border-top:1px dashed var(--line2)}
.gp .mini-seg,.rvw .mini-seg{flex-wrap:nowrap;gap:6px}
.gp .mini-seg button,.rvw .mini-seg button{height:40px;padding:0 12px;border-radius:10px;font-size:15px;white-space:nowrap}

/* the rules line: what is set, in one line; opens the rules view */
.gp-rules{display:flex;align-items:center;gap:12px;width:100%;height:58px;flex:none;padding:0 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);text-align:left;transition:border-color var(--t-fast),transform var(--t-fast)}
@media (hover:hover) and (pointer:fine){.gp-rules:hover{border-color:var(--line2)}}
.gp-rules:active{transform:scale(.98)}
.gr-ic{display:grid;place-items:center;color:var(--cyan)} .gr-ic svg{width:22px;height:22px}
.gr-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;color:var(--muted)}
.gr-t b{font-size:16px;color:var(--fg)}
.gr-t i{font-style:normal;margin:0 6px;color:var(--dim)}
.gp-rules>svg{width:18px;height:18px;flex:none;color:var(--dim)}

/* online parts: short lists, the main action is the button at the bottom */
.gp .gp-online{margin:0;display:flex;flex-direction:column;gap:4px}
.gp .gp-online .skel i{height:50px}
.gp-note{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.gp-online .link{align-self:flex-start;font-size:15px;color:var(--cyan);text-decoration-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.gp-online .gp-h{margin-top:2px}
.gp-online>.btn.sm{align-self:flex-start}
.pline{display:flex;align-items:center;gap:12px;min-height:50px}
.pav{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,var(--panel3));color:var(--c);font:800 italic 18px/1 var(--f-d)}
.pline.on .pav::after{content:'';position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--good);border:2px solid var(--panel)}
.pl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-t b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-t small{font-size:14px;color:var(--muted)}
.pline.on small{color:var(--good)} .pline.busy small{color:var(--yellow)}
.gp-online .tcode{display:flex;gap:10px;margin-top:4px}
.gp-online .tcode .inp{flex:1;min-width:0;height:44px;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.gp .gp-lock{margin:0}
.gp .gp-lock p{font-size:14px}
.gp .hint.dch{margin:0;font-size:14px}

/* rules view */
.gp.rv-on .gp-art,.gp.rv-on .gp-txt,.gp.rv-on>.gp-body>.fav,.gp.rv-on>.gp-body>.gpx{display:none}
.gp-rv{flex:1;min-height:0;display:flex;flex-direction:column}
.rvw{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.rv-head{flex:none;display:flex;align-items:center;gap:12px;min-height:68px;padding:0 16px 0 14px;border-bottom:1px solid var(--line)}
.rv-t{flex:1;min-width:0}
.rv-t h3{margin:0;font:800 italic 28px/1 var(--f-d);text-transform:uppercase}
.rv-t small{display:block;margin-top:3px;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-head .btn.sm[disabled]{opacity:.4;pointer-events:none}
.rv-pzm{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--pink);color:var(--ink);transform:skewX(var(--sk))}
.rv-pzm svg{width:22px;height:22px}
.rv-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 20px 8px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rv-note{margin:0;padding-left:12px;border-left:3px solid var(--cyan);font-size:14px;line-height:1.45;color:var(--muted)}
.rv-pre{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--ink2)}
.rv-pre button{height:44px;min-width:0;border-radius:10px;color:var(--muted);font:700 italic 15px/1 var(--f-d);letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
@media (hover:hover) and (pointer:fine){.rv-pre button:not(.on):not([aria-disabled]):hover{background:var(--panel2);color:var(--fg)}}
.rv-pre button.on{background:var(--panel3);color:var(--fg);box-shadow:inset 0 -3px 0 var(--pink)}
.rv-pre button[aria-disabled]:not(.on){color:var(--dim);cursor:default}
.rv-g{display:flex;flex-direction:column;gap:8px}
.rv-gh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rv-gr{font-size:14px;color:var(--cyan);text-decoration-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.rv-card{border-radius:14px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.rv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:9px 14px;text-align:left}
.rv-row+.rv-row{border-top:1px solid var(--line)}
.rv-row.wide{flex-direction:column;align-items:stretch;gap:8px;padding:10px 14px}
.rv-row.wide .mini-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.rv-row.wide .mini-seg button{padding:0 6px;overflow:hidden;text-overflow:ellipsis}
.rv-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-l b{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.rv-l small{font-size:14px;line-height:1.35;color:var(--muted)}
.rv-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(98,240,255,.25)}
.rv-sw{cursor:var(--cur-p,pointer);transition:background var(--t-fast)}
@media (hover:hover) and (pointer:fine){.rv-sw:hover{background:var(--panel3)}}
.rv-val{flex:none;font-size:15px;font-weight:700}
.rv-g .lv-row{margin-top:2px}
.rv-multi{display:flex;flex-direction:column;gap:10px}
.rv-multi h5{margin:4px 0 0;font-size:16px;font-weight:600}
.rm-mh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rm-mh .link{font-size:14px;color:var(--cyan)}
.rm-cnt{font-size:14px;color:var(--muted);transition:color var(--t-fast)}
.rm-cnt.warn{color:var(--yellow)}
.rm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rm-tile{display:flex;align-items:center;gap:6px;height:42px;min-width:0;padding:0 8px 0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);font-size:14.5px;color:var(--muted);text-align:left;transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.rm-tile span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-tile>svg{display:none;width:16px;height:16px;flex:none;color:var(--cyan)}
.rm-tile.on{color:var(--fg);border-color:var(--cyan);background:rgba(98,240,255,.1)}
.rm-tile.on>svg{display:block}
@media (hover:hover) and (pointer:fine){.rm-tile:not(.on):hover{color:var(--fg);border-color:var(--line2);background:var(--panel3)}}
.rm-tile i{display:grid;place-items:center;width:24px;height:24px;flex:none;margin-right:-4px;border-radius:6px;opacity:.7}
.rm-tile i:hover{opacity:1;background:rgba(255,93,115,.18)}
.rm-tile i svg{width:14px;height:14px}
.rm-add{display:flex;gap:10px}
.rm-add .inp{flex:1;min-width:0;height:44px}
.rm-limit{margin:0;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--yellow);background:rgba(255,216,79,.07);border:1px dashed color-mix(in srgb,var(--yellow) 55%,var(--line))}
.rm-limit[hidden]{display:none}
.gp .rv-foot,.rvp .rv-foot{flex:none}
.rv-foot .btn.ghost.hot{border-color:var(--pink);color:var(--fg)}
:is(.gp,.rvw) :is(button,input,[role=switch],[role=radio]):focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

/* laptop: the panel fills the height next to the library; only the middle part may scroll */
@media (min-width:960px){
  .sel-panel{height:calc(100dvh - var(--abar-h) - 36px);max-height:none;overflow:hidden}
  .sel-panel .gp{height:100%;min-height:0;overflow:hidden}
  .sel-panel .gp-art{height:140px}
  .sel-panel .gp-art .ic{width:100px;height:100px}
  .sel-panel .gp-txt{padding:14px 20px 0}
  .sel-panel .gp-txt h2{font-size:36px}
  .sel-panel .gp-txt p{-webkit-line-clamp:2;font-size:15px}
  .sel-panel .gp .gp-go{position:relative;padding:14px 20px 18px;background:var(--panel)}
}
/* phone: the sheet holds the panel the same way, the bar at the bottom is in thumb reach */
.modal.gpm{display:flex;flex-direction:column;overflow:hidden;padding:0}
.modal.gpm .sel-panel.solo{flex:1;min-height:0;display:flex;flex-direction:column}
.modal.gpm .gp{flex:1;min-height:0}
.modal.gpm .gp-art{height:168px}
.modal.gpm .gp-art .ic{width:116px;height:116px}
.modal.gpm .gp-txt{padding:16px 20px 0}
.modal.gpm .gp-txt h2{font-size:36px}
.modal.gpm .gp-txt p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.modal.gpm .sel-panel.solo .gp-go{position:relative;flex-wrap:nowrap;gap:12px;padding:12px 20px max(16px,env(safe-area-inset-bottom,0px));background:var(--panel)}
.modal.gpm .sel-panel.solo .gp-go .btn.primary.big{flex:1 1 auto;order:0;height:60px}
.modal.gpm .sel-panel.solo .gp-go .btn.ghost,.modal.gpm .sel-panel.solo .gp-go #tut{flex:none;width:56px;height:56px;padding:0}
.modal.gpm .gp.rv-on .rv-head{padding-top:14px}
@media (max-width:959px){
  .modal.gpm{max-height:calc(100dvh - 24px)}
  .gp-mode2 button{height:56px}
  .lv-row{gap:6px}
}

/* rules of the running match (pause menu) */
.modal.rvm{display:flex;width:min(100%,440px);height:min(700px,calc(100dvh - 40px));padding:0;overflow:hidden;border-color:var(--line2);box-shadow:0 8px 0 #05060c}
.rvp{flex:1;min-height:0;display:flex;width:100%}
.rvp .rv-foot{display:flex;align-items:center;gap:16px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.rvp .rv-foot .btn.primary.big{flex:1;height:60px}
.rvp .rv-foot .btn.ghost{height:52px}
@media (max-width:959px){
  .modal.rvm{width:100%;height:auto;max-height:calc(100dvh - 24px)}
  .modal.rvm .rv-head{padding-top:14px}
  .rvp .rv-foot{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
}
/* low laptop windows: a smaller picture, one line of text, no tags, so the middle part needs no scrolling */
@media (min-width:960px) and (max-height:760px){
  .sel-panel .gp-art{height:100px}
  .sel-panel .gp-art .ic{width:72px;height:72px}
  .sel-panel .gp-txt h2{font-size:30px}
  .sel-panel .gp-txt p{-webkit-line-clamp:1}
  .sel-panel .gp-tags{display:none}
  .sel-panel .gp-mode2 button{height:50px;gap:3px}
}

/* account head card in the own look: the banner pattern of the profile in the chosen colour */
.acctp .acard.me.lkc{--lc:var(--pink)}
.acctp .acard.me.lkc.lb-x{background:repeating-linear-gradient(-60deg,rgba(255,255,255,.025) 0 10px,transparent 10px 22px),linear-gradient(110deg,color-mix(in srgb,var(--lc) 24%,var(--panel)) 0 45%,var(--panel) 45.3%)}
.acctp .acard.me.lkc.lb-s{background:repeating-linear-gradient(-55deg,color-mix(in srgb,var(--lc) 16%,var(--panel)) 0 14px,color-mix(in srgb,var(--lc) 6%,var(--panel)) 14px 28px)}
.acctp .acard.me.lkc.lb-d{background:radial-gradient(circle,color-mix(in srgb,var(--lc) 40%,transparent) 0 2.5px,transparent 3px) 0 0/16px 16px,linear-gradient(120deg,color-mix(in srgb,var(--lc) 14%,var(--panel)),var(--panel))}
.acctp .acard.me.lkc.lb-g{background:linear-gradient(color-mix(in srgb,var(--lc) 18%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--lc) 18%,transparent) 1px,transparent 1px) 0 0/22px 22px,var(--panel)}
.acctp .acard.me.lkc.lb-w{background:radial-gradient(120% 60% at 50% 125%,color-mix(in srgb,var(--lc) 30%,transparent) 0 30%,transparent 31%),radial-gradient(90% 50% at 20% 115%,color-mix(in srgb,var(--lc) 18%,transparent) 0 40%,transparent 41%),var(--panel)}
.acctp .acard.me.lkc.lb-p{background:color-mix(in srgb,var(--lc) 10%,var(--panel))}
.acard.lkc .abig{box-shadow:4px 4px 0 color-mix(in srgb,var(--lc) 45%,var(--ink))}
.acard.lkc .abig.sym{font-size:30px;font-style:normal}
.acard.lkc .ahead small.p2-m{color:var(--fg);font-size:14.5px;font-style:italic}
.acard.lkc .ahead .p2-fav{margin-top:2px}

/* Italic display text leans past its own box, so a clipped box (ellipsis) cuts off the last letter: give it room on the right */
.gp-mode button span,.gp-mode2 button span,.pbar .ttl b,.pcard .nm b,.rgames small,.pod b,.rrow .who b,.phead b,.frow .ft b,.lb-seat b,
.tiles .tile b,.ah-t b,.fcard b,.cc-tx b,.p2-id>b,.lv-row .lvb b,.gp .gp-go .btn.primary.big>span,.sd-mt b{padding-right:.18em}
.rv-pre button,.rv-row.wide .mini-seg button{padding-left:.4em;padding-right:.5em}

/* quick phrases next to the emojis: a list under the emoji grid, speech bubbles on the player cards */
.emopick:has(.phr){grid-template-columns:repeat(4,1fr);width:min(320px,calc(100vw - 24px));max-height:min(70vh,440px);overflow:auto}
.emopick .phr{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.emopick .phr button{height:auto;min-height:40px;padding:6px 10px;font:600 13.5px/1.2 var(--f-b);text-align:left;color:var(--fg)}
.pcard .emo.phr{top:-14px;max-width:min(240px,80vw);padding:7px 12px;border-radius:14px 14px 14px 4px;background:var(--fg);color:var(--ink);font:700 14px/1.2 var(--f-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;filter:none;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.emo-w.phr b,.kemo-i.phr b{font:700 15px/1.2 var(--f-b);white-space:nowrap;padding:6px 12px;border-radius:12px;background:var(--fg);color:var(--ink)}
.kquick{flex-wrap:wrap}
.kquick button.ph{width:auto;padding:0 12px;font:600 13px/1 var(--f-b)}
.pcard .emo.phr,.emo-w.phr,.kemo-i.phr{animation-duration:3.4s}

/* ---------- seasonal looks (js/season.js): decoration behind the content, tinted background lights ---------- */
.season{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.season i{position:absolute;display:block}
/* Halloween: orange and violet lights, a moon, bats, a cobweb, fog at the bottom */
.ss-halloween .bgfx .blob.a{background:radial-gradient(closest-side,rgba(255,122,24,.30),transparent)}
.ss-halloween .bgfx .blob.b{background:radial-gradient(closest-side,rgba(150,70,255,.26),transparent)}
.season.halloween .moon{right:8%;top:70px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff6d8,#ffd27a 55%,#e8a23c);box-shadow:0 0 60px 18px rgba(255,190,90,.22),0 0 140px 40px rgba(255,140,40,.12);opacity:.85}
.season.halloween .moon::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 60%,rgba(170,110,40,.35) 0 9%,transparent 10%),radial-gradient(circle at 45% 72%,rgba(170,110,40,.25) 0 6%,transparent 7%),radial-gradient(circle at 30% 45%,rgba(170,110,40,.22) 0 7%,transparent 8%)}
.season.halloween .web{left:-6px;top:-6px;width:150px;height:150px;color:rgba(220,220,255,.16)}
.season.halloween .web svg,.season.halloween .bat svg{width:100%;height:100%;display:block}
.season.halloween .bat{width:46px;height:20px;fill:#0b0612;filter:drop-shadow(0 0 6px rgba(255,140,40,.35));animation:ssBat 26s linear infinite;offset-rotate:0deg}
.season.halloween .bat svg{animation:ssFlap .32s ease-in-out infinite alternate;transform-origin:50% 40%}
.season.halloween .bat.b0{top:18%;animation-delay:-3s}
.season.halloween .bat.b1{top:34%;width:34px;height:15px;animation-duration:34s;animation-delay:-14s}
.season.halloween .bat.b2{top:12%;width:28px;height:12px;animation-duration:40s;animation-delay:-25s}
.season.halloween .bat.b3{top:56%;width:38px;height:17px;animation-duration:30s;animation-delay:-8s;animation-direction:reverse}
.season.halloween .bat.b4{top:26%;width:24px;height:11px;animation-duration:44s;animation-delay:-33s;animation-direction:reverse}
.season.halloween .fog{left:-10%;right:-10%;bottom:-40px;height:200px;background:radial-gradient(60% 100% at 30% 100%,rgba(150,110,220,.18),transparent 70%),radial-gradient(50% 90% at 75% 100%,rgba(255,140,60,.12),transparent 70%);animation:ssFog 18s ease-in-out infinite alternate}
@keyframes ssBat{0%{transform:translate(-80px,0)}25%{transform:translate(25vw,-30px)}50%{transform:translate(50vw,20px)}75%{transform:translate(75vw,-20px)}100%{transform:translate(calc(100vw + 80px),0)}}
@keyframes ssFlap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes ssFog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
/* a pumpkin on the logo */
.ss-halloween .sd-logo::after{content:'🎃';font-size:.8em;margin-left:.3em}
/* Winter: icy lights, fairy lights on top, snow, a snow drift at the bottom */
.ss-winter .bgfx .blob.a{background:radial-gradient(closest-side,rgba(255,70,90,.24),transparent)}
.ss-winter .bgfx .blob.b{background:radial-gradient(closest-side,rgba(60,200,120,.18),transparent)}
.season.winter .snow{position:absolute;inset:0;width:100%;height:100%}
.season.winter .lights{left:0;right:0;top:-6px;height:34px}
.season.winter .lights::before{content:'';position:absolute;left:-2%;right:-2%;top:0;height:22px;border-bottom:1.5px solid rgba(40,50,70,.9);border-radius:0 0 50% 50%/0 0 100% 100%}
.season.winter .lights b{position:absolute;left:var(--x);top:calc(14px + var(--k) * 1px + (var(--k) - 1.5) * (var(--k) - 1.5) * 1px);width:7px;height:11px;border-radius:50% 50% 45% 45%;background:var(--c);box-shadow:0 0 8px 2px var(--c);animation:ssBulb 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * -.6s)}
.season.winter .lights b:nth-child(4n+1){--c:#ff4f6d} .season.winter .lights b:nth-child(4n+2){--c:#ffd84f} .season.winter .lights b:nth-child(4n+3){--c:#5dff9d} .season.winter .lights b:nth-child(4n){--c:#62c8ff}
.season.winter .drift{left:-5%;right:-5%;bottom:-30px;height:70px;background:radial-gradient(40% 60% at 20% 100%,rgba(235,245,255,.14),transparent 70%),radial-gradient(45% 70% at 70% 100%,rgba(235,245,255,.12),transparent 70%)}
@keyframes ssBulb{0%,100%{opacity:1}50%{opacity:.35;box-shadow:none}}
.ss-winter .sd-logo::after{content:'★';font-size:.75em;margin-left:.3em;color:#ffd84f;text-shadow:0 0 10px rgba(255,216,79,.8)}
/* calmer during a match, still with effects off */
body:has(.view.play) .season{opacity:.45}
body:has(.view.play) .season.halloween .bat{display:none}
.lowfx .season *,.lowfx .season *::before{animation:none!important}
.lowfx .season.halloween .bat{display:none}
.side-rail .sd-logo::after{display:none}
.season.front{position:fixed;inset:0;z-index:35}
.season.halloween .spider{left:calc(100% - 26px);top:0;width:1px;height:150px;background:rgba(220,220,255,.25);transform-origin:top;animation:ssDrop 7s ease-in-out infinite}
.season.halloween .spider b{position:absolute;left:-7px;bottom:-12px;width:15px;height:13px;border-radius:50%;background:#120a18;box-shadow:0 0 0 1px rgba(255,140,40,.35),-6px 2px 0 -5px #120a18,6px 2px 0 -5px #120a18}
.season.halloween .spider b::before,.season.halloween .spider b::after{content:'';position:absolute;top:5px;width:24px;height:1.5px;left:-5px;background:#120a18;box-shadow:0 -3px 0 #120a18,0 3px 0 #120a18}
@keyframes ssDrop{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.season.halloween .spider b{animation:ssDropB 7s ease-in-out infinite}
@keyframes ssDropB{0%,100%{transform:scaleY(1.8)}50%{transform:scaleY(1)}}
/* the big cards get a touch of the season */
.ss-halloween .hcard.hw{box-shadow:0 0 0 1px rgba(255,122,24,.45),0 0 40px -12px rgba(255,122,24,.7)}
.ss-winter .hcard.hw{box-shadow:0 0 0 1px rgba(255,216,79,.5),0 0 40px -12px rgba(255,80,100,.7)}
/* Christmas baubles: a thread from the lights, a shiny ball, swinging gently */
.season.winter .bauble{left:var(--x);top:8px;width:1px;height:var(--h);background:rgba(255,230,160,.45);transform-origin:top;animation:ssSwing 5s ease-in-out infinite}
.season.winter .bauble.k1{animation-delay:-1.6s} .season.winter .bauble.k2{animation-delay:-3.1s}
.season.winter .bauble b{position:absolute;left:-11px;bottom:-22px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85) 0 8%,var(--bc) 30%,color-mix(in srgb,var(--bc) 55%,#000) 100%);box-shadow:0 0 14px -2px var(--bc)}
.season.winter .bauble b::before{content:'';position:absolute;left:7px;top:-4px;width:8px;height:5px;border-radius:2px;background:#d9b44a}
.season.winter .bauble.k0 b{--bc:#e8253f} .season.winter .bauble.k1 b{--bc:#ffc83d} .season.winter .bauble.k2 b{--bc:#24b860}
@keyframes ssSwing{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
body:has(.view.play) .season.winter .bauble{display:none}
@media (max-width:959px){ .season.winter .bauble{top:4px} .season.winter .bauble.k2{display:none} }
body:has(.view.play) .season.front{opacity:.35}
body:has(.view.play) .season.halloween .spider{display:none}
/* phone game bar: rules and restart are in the pause menu (the back arrow), so the game's name has room */
@media (max-width:959px){
  .view.play>.pbar #ph,.view.play:not(.net)>.pbar #pr{display:none}
  .pbar .ttl small{letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.15em}
}

/* Tagesduell: one game a day against the AI, with a series counter (phone home above the quick tiles, laptop under the mode tiles) */
.dch-w{margin:0 0 14px}
.dch{position:relative;width:100%;display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;overflow:hidden;text-align:left;color:var(--fg);
  background:linear-gradient(105deg,color-mix(in srgb,var(--acc) 22%,var(--panel)) 0%,var(--panel) 60%);border:1.5px solid color-mix(in srgb,var(--acc) 60%,var(--line));
  box-shadow:0 10px 30px -18px var(--acc);transition:transform .15s var(--ease),border-color .15s}
.dch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent 0 14px,rgba(255,255,255,.025) 14px 28px);pointer-events:none}
.dch:hover{border-color:var(--acc)}
.dc-main{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0;margin:0;background:none;border:0;color:inherit;text-align:left;cursor:var(--cur-p,pointer);transition:transform .15s var(--ease)}
.dc-main:active{transform:scale(.98)}
.dc-sw{position:relative;flex:none;width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:var(--ink2);border:1px solid var(--line);color:var(--muted);cursor:var(--cur-p,pointer);transition:color .15s,transform .3s var(--spring)}
.dc-sw:hover{color:var(--fg)} .dc-sw:active{transform:rotate(90deg) scale(.92)}
.dc-sw svg{width:20px;height:20px}
.dc-ic{position:relative;flex:none;width:54px;height:54px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,var(--ink2))}
.dc-ic>svg{width:42px;height:42px}
.dc-ok{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:var(--ink);box-shadow:0 0 0 3px var(--panel)}
.dc-ok svg{width:14px;height:14px;stroke-width:3}
.dc-tx{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dc-tx em{font:700 italic 11.5px/1.1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-style:normal}
.dc-tx b{font:800 italic 22px/1 var(--f-d);text-transform:uppercase}
.dc-tx small{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.dc-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-tx small i{font-style:normal}
.dc-st{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;padding:6px 6px 5px;border-radius:9px;background:var(--ink2);border:1px solid var(--line);color:var(--dim)}
.dc-st svg{width:16px;height:16px}
.dc-st b{font:800 italic 20px/1 var(--f-d)}
.dc-st small{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.dc-st.on{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 45%,var(--line));background:color-mix(in srgb,var(--yellow) 10%,var(--ink2))}
.dc-st.on svg{fill:currentColor;animation:dcFlame 1.6s ease-in-out infinite}
@keyframes dcFlame{50%{transform:scale(1.18) rotate(-6deg)}}
.dch.done{opacity:.92} .dch.done .dc-tx b{color:var(--good)}
.lowfx .dc-st.on svg{animation:none}
@media (min-width:900px){ .dch-w{margin:14px 0 22px} .dch{padding:14px 18px} }
/* end screen: the Tagesduell was won */
.ko .kdaily{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--yellow) 14%,var(--panel2));border:1px solid color-mix(in srgb,var(--yellow) 50%,var(--line));color:var(--yellow);animation:qsIn .4s .4s var(--spring) backwards}
.ko .kdaily svg{width:18px;height:18px;fill:currentColor}
/* the Elo after the match (KI-Elo against the AI, Elo online) */
.ko .kelo{display:flex;align-items:baseline;gap:8px;padding:7px 14px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);animation:qsIn .4s .35s var(--spring) backwards}
.ko .kelo[hidden]{display:none}
.ko .kelo span{font:700 italic 12px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ko .kelo b{font:800 italic 20px/1 var(--f-d);font-variant-numeric:tabular-nums}
.ko .kelo em{font-style:normal;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.ko .kelo.up em{color:var(--good)} .ko .kelo.down em{color:var(--bad)}
/* a new rank after the rating rolled over: up glows in the rank colour, down stays quiet */
.ko .krank{--rk:#c98a52;display:flex;align-items:center;gap:12px;padding:9px 18px 9px 14px;transform:skewX(var(--sk));background:linear-gradient(100deg,color-mix(in srgb,var(--rk) 30%,var(--panel2)),var(--panel2) 75%);border:1.5px solid var(--rk);box-shadow:0 0 22px color-mix(in srgb,var(--rk) 45%,transparent);animation:wpop .55s var(--spring) backwards}
.ko .krank>*{transform:skewX(calc(var(--sk) * -1))}
.ko .krank .rk{width:16px;height:16px;background:var(--rk);transform:rotate(45deg);box-shadow:0 0 12px var(--rk)}
.ko .krank span{display:flex;flex-direction:column;gap:3px}
.ko .krank small{font:700 italic 11px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ko .krank b{font:800 italic 24px/1 var(--f-d);text-transform:uppercase;color:var(--rk)}
.ko .krank.down{box-shadow:none;border-color:var(--line2);background:var(--panel2)} .ko .krank.down b{color:var(--fg)}
.ko .krank:has(.r-sil){--rk:#c9d1e6} .ko .krank:has(.r-gold){--rk:var(--yellow)} .ko .krank:has(.r-pla){--rk:var(--cyan)} .ko .krank:has(.r-dia){--rk:#b98cff}
/* the finale: the room darkens around the board while the winning line plays out; a win punches the board once */
.view.play.finale::after{content:'';position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 35%,rgba(4,4,10,.62));opacity:0;animation:finvig 2.6s ease-out both}
.view.play.fwin .stage{animation:finpunch .55s .05s var(--spring)}
/* (the room lights up again by itself, so "Brett ansehen" shows the board as it was) */
@keyframes finvig{0%{opacity:0}18%,70%{opacity:1}100%{opacity:0}}
@keyframes finpunch{35%{transform:scale(1.045)}}
.lowfx .view.play.finale::after,.lowfx .view.play.fwin .stage{animation:none}
.lowfx .view.play.finale::after{display:none}
.ko .kdaily b{font:800 italic 15px/1 var(--f-d);text-transform:uppercase}
.ko .kdaily span{font-size:13px;color:var(--fg)}
.knext.acct .kn-ic svg{width:26px;height:26px}

/* Abzeichen: in Bilanz (instead of the old milestones) and new ones on the end screen */
.sbadges h3{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.sbadges h3 small{font:600 12px/1 var(--f-b);text-transform:none;color:var(--muted)}
.abz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.abz{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:10px;background:var(--ink2);border:1px dashed var(--line2);text-align:center;color:var(--dim)}
.abz .abz-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);filter:grayscale(1);opacity:.6}
.abz .abz-ic svg{width:20px;height:20px}
.abz b{font:800 italic 13px/1.1 var(--f-d);text-transform:uppercase}
.abz small{font-size:11px;line-height:1.25;color:var(--muted)}
.abz.on{border:1px solid color-mix(in srgb,var(--yellow) 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 10%,var(--panel2)),var(--ink2));color:var(--fg)}
.abz.on .abz-ic{filter:none;opacity:1;background:linear-gradient(135deg,var(--yellow),var(--pink));color:var(--ink);box-shadow:0 4px 14px -6px var(--yellow)}
.ko .kbadges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ko .kbdg{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--panel2);border:1px solid color-mix(in srgb,var(--yellow) 50%,var(--line));animation:wpop .5s .6s var(--spring) backwards}
.kbdg .abz-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--yellow),var(--pink));color:var(--ink)}
.kbdg .abz-ic svg{width:16px;height:16px}
.kbdg span:last-child{display:flex;flex-direction:column;text-align:left}
.kbdg small{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow)}
.kbdg b{font:800 italic 14px/1.1 var(--f-d);text-transform:uppercase}
.lowfx .ko .kbdg{animation:none}
.abadges{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.aserie{display:flex;flex-direction:row;align-items:center;gap:12px}
.aserie>div{display:flex;flex-direction:column;gap:2px}
.aserie>div b{font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.aserie>div small{font-size:12.5px;color:var(--muted)}
/* badge tiers: 1 normal (pink-yellow), 2 selten (cyan-violet), 3 legendär (gold, shimmering) */
.abz.on.bt2 .abz-ic,.kbdg.bt2 .abz-ic,.pb.bt2 svg{background:linear-gradient(135deg,var(--cyan),#9b7bff)}
.abz.on.bt3 .abz-ic,.kbdg.bt3 .abz-ic,.pb.bt3 svg{background:linear-gradient(135deg,#fff3b0,#ffc83d 45%,#ff8a3d);box-shadow:0 0 0 2px rgba(255,200,61,.35),0 6px 18px -6px #ffc83d}
.abz.on.bt2{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 10%,var(--panel2)),var(--ink2))}
.abz.on.bt3{border-color:#ffc83d88;background:linear-gradient(180deg,rgba(255,200,61,.16),var(--ink2));position:relative;overflow:hidden}
.abz.on.bt3::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-100%);animation:bdgShine 3.2s ease-in-out infinite}
@keyframes bdgShine{60%,100%{transform:translateX(100%)}}
.abz:not(.on).bt3{border-color:#ffc83d44}
.lowfx .abz.on.bt3::after{animation:none;display:none}
.tcounts{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;flex-wrap:wrap}
.tcounts small{font-size:11.5px;color:var(--muted);margin-left:4px}
.tcount{font:800 italic 13px/1 var(--f-d);padding:4px 8px;border-radius:6px;color:var(--ink)}
.tcount.bt1{background:linear-gradient(135deg,var(--yellow),var(--pink))} .tcount.bt2{background:linear-gradient(135deg,var(--cyan),#9b7bff)} .tcount.bt3{background:linear-gradient(135deg,#fff3b0,#ffc83d,#ff8a3d)}
.abz-open{margin-top:12px}
.abz-open summary{cursor:var(--cur-p,pointer);font:700 italic 13px/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 0;list-style:none}
.abz-open summary::-webkit-details-marker{display:none}
.abz-open summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .2s}
.abz-open[open] summary::before{transform:rotate(90deg)}
.abz-open .abz-grid{margin-top:8px}
.kbdg.bt3{border-color:#ffc83d} .kbdg.bt3 small{color:#ffc83d} .kbdg.bt2{border-color:color-mix(in srgb,var(--cyan) 60%,var(--line))} .kbdg.bt2 small{color:var(--cyan)}
/* profile: earned badges as chips */
.p2-aw{margin:4px 0 2px}
.p2-aw h4 small{margin-left:8px;font:600 12px/1 var(--f-b);text-transform:none;color:var(--muted)}
.pbdg{display:flex;flex-wrap:wrap;gap:6px}
.pb{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:12px;color:var(--fg);cursor:var(--cur-p,pointer);transition:transform .15s var(--ease),border-color .15s}
.pb:active{transform:scale(.95)} .pb.sel{border-color:var(--fg);box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.pb svg{width:22px;height:22px;padding:4px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--pink));color:var(--ink);box-sizing:border-box}
.pb b{font:700 italic 12.5px/1 var(--f-d);text-transform:uppercase}
.pb.bt3{border-color:#ffc83d88;background:rgba(255,200,61,.1)} .pb.bt2{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))}
.p2-aw{padding:0 26px} .p2-aw h4{margin:16px 0 10px}
@media (max-width:959px){ .p2-aw{padding:0 16px} }
.pb-info{display:flex;gap:12px;align-items:flex-start;margin-top:10px;padding:12px;border-radius:10px;background:var(--ink2);border:1px solid var(--line2)}
.pb-info .pbi-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:linear-gradient(135deg,var(--yellow),var(--pink))}
.pb-info .pbi-ic svg{width:22px;height:22px}
.pb-info.bt2 .pbi-ic{background:linear-gradient(135deg,var(--cyan),#9b7bff)} .pb-info.bt3 .pbi-ic{background:linear-gradient(135deg,#fff3b0,#ffc83d 45%,#ff8a3d)}
.pb-info.bt2{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))} .pb-info.bt3{border-color:#ffc83d88}
.pb-info em{display:block;font:700 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.pb-info.bt3 em{color:#ffc83d} .pb-info.bt2 em{color:var(--cyan)}
.pb-info b{display:block;margin:3px 0 2px;font:800 italic 18px/1.05 var(--f-d);text-transform:uppercase}
.pb-info p{margin:0;font-size:13px;color:var(--fg)}
.pb-info small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.pb-info small i{font-style:normal}
.rfilt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.rfilt .rsel{flex:1;min-width:180px;margin:0}
.rscope button{display:inline-flex;align-items:center;gap:5px}
.rscope button svg{width:14px;height:14px}
.rtag.fr{background:color-mix(in srgb,var(--cyan) 20%,transparent);color:var(--cyan)}
#oboard .empty .btn svg{width:16px;height:16px;margin:0}
@media (max-width:480px){ .rtop .rper{width:100%} .rtop .rper button{flex:1} }

/* tutorial practice tasks ("Probier's aus", js/tutor.js) */
.tq-tag{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--cyan) 18%,transparent);color:var(--cyan);font:700 italic 11px/1 var(--f-d);letter-spacing:.08em;font-style:normal;vertical-align:middle}
.tq-tag svg{width:13px;height:13px}
.tut .dots i.tqd{background:color-mix(in srgb,var(--cyan) 35%,var(--line2))} .tut .dots i.tqd.on{background:var(--cyan)} .tut .dots i.ok{background:var(--good)!important}
.tq-q{margin:0;font-size:15.5px;line-height:1.45;color:var(--fg);font-weight:600}
.tq-demo{display:flex;justify-content:center}
.tq-box{flex-direction:column;gap:10px;transition:border-color .2s,box-shadow .2s}
.tq-box.solved{border-color:color-mix(in srgb,var(--good) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}
.tq-box .mc.tap{cursor:var(--cur-p,pointer);transition:transform .12s,filter .12s}
.tq-box .mc.tap:hover{filter:brightness(1.35)}
.tq-box .mc.tap:active{transform:scale(.9)}
.tq-box .mc.tap:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.tq-box .mc.tok{box-shadow:inset 0 0 0 2px var(--good),0 0 14px -2px var(--good);animation:tqPop .4s var(--spring)}
.tq-box .mc.tno{animation:tqNo .45s ease;background:color-mix(in srgb,var(--bad) 45%,transparent)!important}
@keyframes tqPop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@keyframes tqNo{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.tq-box .mc.kst{background:var(--panel3);border-radius:8px;font:800 italic 16px/1 var(--f-d)}
.tq-fb{min-height:22px;margin:0;display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.4}
.tq-fb svg{flex:none;width:20px;height:20px;margin-top:-1px}
.tq-fb.ok{color:var(--good)} .tq-fb.ok span{color:var(--fg)}
.tq-fb.no{color:#ffb3c0} .tq-fb.part{color:var(--cyan)}
.tq-chs{align-items:stretch!important;padding:10px!important}
.tq-ch{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:8px 14px;border-radius:10px;background:var(--panel2);border:1.5px solid var(--line);color:var(--fg);font:600 14.5px/1.3 var(--f-b);text-align:center;cursor:var(--cur-p,pointer);transition:border-color .15s,background .15s,transform .12s}
.tq-ch:hover{border-color:var(--line2)} .tq-ch:active{transform:scale(.98)}
.tq-ch kbd{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:10px;opacity:.6}
.tq-ch.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--panel2))}
.tq-ch.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel2));animation:tqNo .45s ease}
.tq-cards{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center}
.tq-cards .card{width:38px;height:54px;font-size:12px;flex:none}
.tq-dice{display:inline-flex;gap:6px}
.tq-dice i{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#f4f4fb;color:#151527;font:800 18px/1 var(--f-d);font-style:normal;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.tq-tile{display:inline-flex;border-radius:7px;background:#f4f1e6;color:#1a1a26;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);overflow:hidden}
.tq-tile i{width:30px;height:30px;display:grid;place-items:center;font:800 17px/1 var(--f-d);font-style:normal}
.tq-tile i+i{border-left:2px solid rgba(0,0,0,.35)}
.tq-ends{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.tq-memo{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center}
.tq-mc{width:64px;height:64px;border-radius:10px;border:1.5px solid var(--line2);background:repeating-linear-gradient(45deg,var(--panel3) 0 6px,var(--panel2) 6px 12px);cursor:var(--cur-p,pointer);transition:transform .3s var(--ease),background .2s}
.tq-mc b{font-size:30px;opacity:0;transition:opacity .15s}
.tq-mc.up{background:var(--panel2);transform:rotateY(0)} .tq-mc.up b{opacity:1}
.tq-mc.pair{border-color:var(--good);box-shadow:0 0 12px -3px var(--good)}
.tq-react{width:100%;max-width:300px;height:120px;border-radius:12px;border:0;background:var(--panel3);color:var(--fg);font:800 italic 20px/1.1 var(--f-d);text-transform:uppercase;cursor:var(--cur-p,pointer);transition:background .1s}
.tq-react.wait{background:#3a2440} .tq-react.fake{background:var(--warn,#ff9a3d);color:#1a0f05} .tq-react.green{background:var(--good);color:#06210f} .tq-react.done{background:var(--panel3)}
.tq-end{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;border-radius:10px;background:var(--ink2);border:1px solid var(--line)}
.tq-end b{font:800 italic 40px/1 var(--f-d);color:var(--cyan)} .tq-end.all b{color:var(--good)} .tq-end.none b{color:var(--muted)}
.tq-end span{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.tq-practice{align-self:center}
.lowfx .tq-box .mc.tok,.lowfx .tq-ch.bad,.lowfx .tq-box .mc.tno{animation:none}
.tq-chs.tq-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
.tq-grid .tq-ch{min-height:0;padding:10px 6px}
.tq-ch .card.tq-card{width:46px;height:66px;font-size:13px;flex:none}
.tq-demo .card.tq-card{width:52px;height:74px}
.ko h2.long{font-size:clamp(38px,9.5vw,100px)}
/* no double-tap zoom while playing (two quick taps next to the board zoomed in on iPad); pinch zoom still works */
.view.play{touch-action:manipulation}
/* Effekte aus (and "reduce motion" in the system): every animation and transition jumps to its end, nothing pulses
   or loops; the games' own moves still happen, just without the motion */
.lowfx *,.lowfx *::before,.lowfx *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}

/* the history: step through a recorded match */
.rvbar{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;padding:8px;border-radius:12px;background:var(--panel);border:1px solid var(--line);width:max-content;max-width:100%}
.rvbar button{width:44px;height:38px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);font:700 15px/1 var(--f-b);display:grid;place-items:center}
.rvbar button:disabled{opacity:.35}
.rvbar b{min-width:72px;text-align:center;font:800 italic 16px/1 var(--f-d);font-variant-numeric:tabular-nums}
.view.play.review .pbar #pr,.view.play.review #pu{display:none}
.shist h3{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.shist h3 small{font:600 12px/1 var(--f-b);color:var(--muted);text-transform:none} .shist h3 .link{margin-left:auto;font:600 12px/1 var(--f-b);text-transform:none} .shist h3 .link.bad{color:var(--bad)}
.hlist{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto}
.hrow{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic t r" "ic a a";gap:4px 10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.hrow .ic{grid-area:ic;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 14%,transparent)} .hrow .ic svg{width:32px;height:32px}
.hrow .ht{grid-area:t;min-width:0;display:flex;flex-direction:column;gap:2px} .hrow .ht b{font:800 italic 15px/1.1 var(--f-d);text-transform:uppercase}
.hrow .ht small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hres{grid-area:r;font:800 italic 12px/1 var(--f-d);text-transform:uppercase;font-style:normal;padding:4px 8px;border-radius:6px;background:var(--panel3)}
.hres.w{color:var(--good)} .hres.l{color:#ff8a8a} .hres.d{color:var(--muted)} .hres.n{color:var(--cyan)}
.hact{grid-area:a;display:flex;gap:6px;justify-content:flex-end} .hnone{font-size:11.5px;color:var(--dim)}
.shist h3 .hsync{display:inline-flex;align-items:center;gap:4px;color:var(--good)} .shist h3 .hsync svg{width:13px;height:13px}
.hact .hshare{width:38px;padding:0;justify-content:center} .hact .hshare svg{width:16px;height:16px;margin:0}
/* country flag next to a name (js/flag.js): flag-icons picture, waves on its pole; empty until known, hidden without a flag */
.vflag{display:inline-block;position:relative;width:1.2em;height:.9em;margin:0 0 0 .4em;vertical-align:-.04em;border-radius:1.5px;overflow:hidden;flex:none;font-style:normal;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.4);transform-origin:0 50%;animation:vwave 2.8s ease-in-out infinite}
.vflag:empty{display:none}
.vflag img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.vflag::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(0,0,0,0) 0,rgba(255,255,255,.32) 16%,rgba(0,0,0,0) 32%,rgba(0,0,0,.28) 50%,rgba(0,0,0,0) 66%,rgba(255,255,255,.32) 82%,rgba(0,0,0,0) 100%);background-size:200% 100%;animation:vshine 2.8s linear infinite;animation-delay:inherit}
@keyframes vwave{0%,100%{transform:perspective(3em) rotateY(0) skewY(0)}25%{transform:perspective(3em) rotateY(-14deg) skewY(-3deg)}75%{transform:perspective(3em) rotateY(8deg) skewY(2deg)}}
@keyframes vshine{from{background-position:200% 0}to{background-position:0 0}}
.vflag.still,.lowfx .vflag,.lowfx .vflag::after,.vflag.still::after{animation:none}
@media (prefers-reduced-motion:reduce){.vflag,.vflag::after{animation:none}}
.p2-id b .vflag,.ahead b .vflag{width:1.35em;height:1.01em}
/* flag picker */
.flp{display:flex;flex-direction:column;gap:10px;min-width:0}
.flg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:min(52vh,420px);overflow:auto;padding:2px}
.flg hr{grid-column:1/-1;border:0;border-top:1px solid var(--line2);margin:2px 0}
.flg button{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);color:var(--fg);text-align:left;font-size:14px;transition:border-color .15s,background .15s}
.flg button:hover{border-color:var(--cy)}
.flg button.on{border-color:var(--pink);background:rgba(255,79,216,.12)}
.flg button .vflag{margin:0;font-size:20px}
.flg button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* survey: the bar and the questions (js/survey.js) */
.upbar.svb{border-left-color:var(--yellow)} .upbar.svb>svg{color:var(--yellow)}
.upbar.svb .svt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal.svm{width:min(100%,540px)} .modal.flm{width:min(100%,560px)}
.svf{display:flex;flex-direction:column;gap:14px;min-width:0}
.svf .svtt{overflow-wrap:anywhere}
.svi h4{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;font-size:15px;line-height:1.3}
.svn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line2);font-size:12px;color:var(--yellow)}
.svq{overflow-wrap:anywhere}
.svh{display:block;margin:-4px 0 8px 34px;color:var(--muted);font-size:12px}
.svo{display:grid;gap:6px}
.svo button{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);color:var(--muted);text-align:left;font-size:14px;transition:all .15s}
.svo button i{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);transition:all .15s}
.svi:has(.svh) .svo button i{border-radius:4px}
.svo button.on{color:var(--fg);border-color:var(--yellow);background:rgba(255,216,79,.1)} .svo button.on i{border-color:var(--yellow);background:var(--yellow);box-shadow:inset 0 0 0 2px var(--panel2)}
.svs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.svs button{min-height:44px;border:1px solid var(--line2);border-radius:8px;background:var(--panel2);color:var(--muted);font:800 18px var(--f-d);transition:all .15s}
.svs button.on{color:#08090f;background:var(--yellow);border-color:var(--yellow)}
.svsl{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:4px}
/* admin: editor and results */
.sved{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .sved h3{margin:0 0 4px} .sved label{font-size:13px;color:var(--muted);margin-top:4px}
.svq-e{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line2);border-radius:8px;background:rgba(255,255,255,.02)}
.svq-h{display:flex;align-items:center;justify-content:space-between}
.svrow{flex-wrap:wrap} .svrow .m-a{flex-wrap:wrap}
.svres{flex-basis:100%;display:flex;flex-direction:column;gap:14px;padding:10px 2px 4px}
.svres h4{margin:0;font-size:14px;overflow-wrap:anywhere}
.svbar{display:grid;gap:5px;margin-top:6px}
.svb-r{display:grid;grid-template-columns:minmax(70px,34%) 1fr auto 42px;align-items:center;gap:8px;font-size:13px}
.svb-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svb-t{height:10px;border-radius:5px;background:var(--panel2);overflow:hidden} .svb-t i{display:block;height:100%;background:var(--yellow);border-radius:5px;transition:width .4s}
.svb-r small{color:var(--muted);text-align:right}
.svtx{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-height:320px;overflow:auto}
.svtx p{margin:0;padding:8px 10px;border-radius:8px;background:var(--panel2);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.svwho summary{cursor:var(--cur-p,pointer);font-weight:600;font-size:14px;padding:6px 0;display:flex;align-items:center;gap:6px;min-height:36px}
.svpl{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:320px;overflow:auto}
.svp{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--panel2);font-size:13px;max-width:100%}
.svp b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .svp small{color:var(--muted);white-space:nowrap} .svp .rtag{margin:0}

/* team tools: answers to feedback, Elo box, maintenance */
.confirm .abig svg{width:28px;height:28px}
.treply{text-align:left;background:var(--panel2);border-left:3px solid var(--good);padding:10px 12px;margin:8px 0}
.treply .tref{color:var(--muted);font-size:13px;margin:0 0 6px}
.treply .ttxt{margin:0;white-space:pre-wrap}
.fbreply{display:block;margin-top:6px;border-left:3px solid var(--good);padding-left:8px;white-space:pre-wrap}
.abox .aline{flex-wrap:wrap;row-gap:4px} .abox .aline small{white-space:normal} .abox .aline .btn{margin-left:auto}
.pgrid2>.pdrawer{min-width:0}
#g_pick{flex:1 1 180px;min-width:0;width:auto}

/* ---------- motion touches (js/motion.js): small things that should feel right without being noticed ---------- */
/* PC: a soft light follows the mouse over cards */
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;mix-blend-mode:screen;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.11),transparent 62%)}
.lit>.glare{opacity:1}
.lowfx .glare{display:none}
/* cards below the fold come in while scrolling (rows from the right); mo- prefix: .rv is the Reversi board */
.mo-rv{opacity:0;transform:translateY(18px) scale(.97);animation:none!important}
.mo-rv.mo-rx{transform:translateX(26px) scale(.97)}
.mo-rv.mo-in{opacity:1;transform:none;transition:opacity .4s var(--ease) var(--rd,0ms),transform .55s var(--spring-soft) var(--rd,0ms)}
/* dialogs: the content follows the sheet a moment later, line by line */
:where(.modal:not(.endm):not(.gpm))>*{animation:mIn .4s var(--ease) backwards}
:where(.modal:not(.endm):not(.gpm)>:nth-child(2)){animation-delay:.04s} :where(.modal:not(.endm):not(.gpm)>:nth-child(3)){animation-delay:.08s}
:where(.modal:not(.endm):not(.gpm)>:nth-child(4)){animation-delay:.12s} :where(.modal:not(.endm):not(.gpm)>:nth-child(5)){animation-delay:.16s}
:where(.modal:not(.endm):not(.gpm)>:nth-child(n+6)){animation-delay:.2s}
@keyframes mIn{from{opacity:0;translate:0 10px}}
.lowfx :where(.modal)>*{animation:none}
/* toasts sink away instead of just fading */
.toast.out{opacity:0;translate:0 14px;transition:opacity .25s,translate .3s var(--ease)}
/* switches: the knob squishes while pressed */
.sw::after{transition:transform .25s var(--spring),background .2s,scale .18s var(--ease)}
.opt:active .sw::after,.sw:active::after{scale:1.22 .82}
/* favourite star */
.fav-pop svg{animation:favpop .5s var(--spring)}
@keyframes favpop{30%{transform:scale(.7) rotate(-18deg)}65%{transform:scale(1.35) rotate(8deg)}}
@media (hover:hover) and (pointer:fine){
  /* icons react to the mouse: round buttons lean, sidebar icons step aside, button arrows move forward */
  .iconbtn svg{transition:transform .3s var(--spring)}
  .iconbtn:hover svg{transform:scale(1.1) rotate(-7deg)}
  .sd-item svg,.sd-game .ic{transition:transform .28s var(--spring)}
  .sd-item:hover svg{transform:translateX(2px) scale(1.1)}
  .sd-game:hover .ic{transform:scale(1.1) rotate(-5deg)}
  .btn>span>svg,.btn>svg{transition:translate .25s var(--spring)}
  .btn:hover>span>svg:first-child,.btn:hover>svg:first-child{translate:2px 0}
  .lowfx .iconbtn:hover svg,.lowfx .sd-item:hover svg,.lowfx .sd-game:hover .ic{transform:none}
}
/* PC: an own mouse pointer in the Versus style: a sleek dart with a glossy edge (dark with a pink rim;
   over buttons pink-violet with the yellow shadow, which tucks in while the button is pressed) */
@media (hover:hover) and (pointer:fine){
  :root:not(.lowfx){
    --cur-a:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23323650'/%3E%3Cstop%20offset='1'%20stop-color='%230a0b12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20transform='translate%281.6%201.6%29'%20d='M3%203L26%2012.2%2016.4%2014.6%2012.6%2025z'%20fill='rgba%280%2C0%2C0%2C.45%29'/%3E%3Cpath%20d='M3%203L26%2012.2%2016.4%2014.6%2012.6%2025z'%20fill='url%28%23g%29'%20stroke='%23ff4fd8'%20stroke-width='1.7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5.6%206.8L11.9%2020.4'%20stroke='%23fff'%20stroke-opacity='.6'%20stroke-width='1.3'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") 3 3,auto;
    --cur-p:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ff7be3'/%3E%3Cstop%20offset='.55'%20stop-color='%23ff4fd8'/%3E%3Cstop%20offset='1'%20stop-color='%23a35bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20transform='translate%282.6%202.6%29'%20d='M3%203L26%2012.2%2016.4%2014.6%2012.6%2025z'%20fill='%23ffd84f'/%3E%3Cpath%20d='M3%203L26%2012.2%2016.4%2014.6%2012.6%2025z'%20fill='url%28%23g%29'%20stroke='%23fff'%20stroke-width='1.7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5.6%206.8L11.9%2020.4'%20stroke='%23fff'%20stroke-opacity='.6'%20stroke-width='1.3'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") 3 3,pointer;
    --cur-d:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23ff7be3'/%3E%3Cstop%20offset='.55'%20stop-color='%23ff4fd8'/%3E%3Cstop%20offset='1'%20stop-color='%23a35bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20transform='translate%281.1%201.1%29'%20d='M3%203L26%2012.2%2016.4%2014.6%2012.6%2025z'%20fill='%23ffd84f'/%3E%3Cpath%20d='M3%203L26%2012.2%2016.4%2014.6%2012.6%2025z'%20fill='url%28%23g%29'%20stroke='%23fff'%20stroke-width='1.7'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5.6%206.8L11.9%2020.4'%20stroke='%23fff'%20stroke-opacity='.6'%20stroke-width='1.3'%20stroke-linecap='round'%20fill='none'/%3E%3C/svg%3E") 3 3,pointer}
  body{cursor:var(--cur-a,auto)}
  :where(button:not(:disabled),a[href],[role=button],summary,select,label[for],.tile,[data-prof],[data-go],[data-game]){cursor:var(--cur-p,pointer)}
  :where(button:not(:disabled),a[href],[role=button],summary,label[for],.tile,[data-prof],[data-go],[data-game]):active{cursor:var(--cur-d,var(--cur-p,pointer))}
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,[contenteditable]){cursor:text}
}
/* PC: fullscreen in the app bar */
.abfs.on{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--line))}
/* PC: the background layers follow the mouse a little (depth) */
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .bgfx .blob,.bgfx .stripes,.bgfx .split{transition:translate 1.2s cubic-bezier(.2,.8,.2,1)}
  .bgfx .blob.a{translate:calc(var(--px,0) * -38px) calc(var(--py,0) * -26px)}
  .bgfx .blob.b{translate:calc(var(--px,0) * 30px) calc(var(--py,0) * 22px)}
  .bgfx .stripes{translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -8px)}
  .bgfx .split{translate:calc(var(--px,0) * 6px) 0}
  .lowfx .bgfx *{translate:none}
}
/* PC: the player card leans towards the mouse, a light runs over it */
@media (hover:hover) and (pointer:fine){
  .acctp .acard.me,.p2-top{transition:transform .5s var(--spring-soft);transform-style:preserve-3d}
  .acctp .acard.me.tilt,.p2-top.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .12s linear}
  .acctp .acard.me::after,.p2-top::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:screen;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 60%)}
  .acctp .acard.me.tilt::after,.p2-top.tilt::after{opacity:1}
  .acctp .acard.me .abig{transition:transform .5s var(--spring-soft)}
  .acctp .acard.me.tilt .abig{transform:skewX(var(--sk)) translateZ(30px)}
  .lowfx .acctp .acard.me.tilt,.lowfx .p2-top.tilt{transform:none}
}
.acctp .acard.me{position:relative}
/* rank from the Elo: a chip with a small gem */
.rank{--rk:#c98a52;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;transform:skewX(var(--sk));border:1px solid color-mix(in srgb,var(--rk) 60%,transparent);
  background:color-mix(in srgb,var(--rk) 16%,var(--panel));color:var(--rk);font:800 italic 13px/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;font-style:italic;white-space:nowrap}
.rank i{width:9px;height:9px;background:var(--rk);transform:rotate(45deg);box-shadow:0 0 8px var(--rk)}
.rank small{color:var(--muted);font:700 12px/1 var(--f-d);letter-spacing:.02em}
.ahead .rank small,.p2-tags .rank small{flex-basis:auto;font-size:12px}
.rank.r-sil{--rk:#c9d1e6} .rank.r-gold{--rk:var(--yellow)} .rank.r-pla{--rk:var(--cyan)} .rank.r-dia{--rk:#b98cff}
.rank.r-dia i{animation:gem 2.4s ease-in-out infinite} @keyframes gem{50%{box-shadow:0 0 16px var(--rk),0 0 0 3px color-mix(in srgb,var(--rk) 25%,transparent)}}
.lowfx .rank i{animation:none}
/* PC: button prompts like in a console game, only while the keyboard is used */
.khint{position:fixed;left:50%;bottom:18px;z-index:70;display:flex;gap:16px;align-items:center;padding:8px 16px;border-radius:12px;pointer-events:none;
  background:color-mix(in srgb,var(--ink) 82%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.45);color:var(--muted);font-size:13px;white-space:nowrap;opacity:0;translate:-50% 14px;transition:opacity .2s,translate .3s var(--ease)}
.khint.on{opacity:1;translate:-50% 0}
.khint span{display:inline-flex;align-items:center;gap:4px}
.khint span kbd:last-of-type{margin-right:3px}
.khint kbd{height:20px;min-width:20px;font-size:11px}
@media (max-width:959px){.khint{display:none}}
/* PC intro: game name and one tip, like a loading screen */
.vsi-tip{position:absolute;left:50%;bottom:7vh;translate:-50% 0;width:min(620px,86vw);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:16px 22px 18px;background:rgba(8,9,15,.86);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.5);overflow:hidden;
  animation:vtIn .45s .45s var(--ease) backwards}
.vt-g{display:inline-flex;align-items:center;gap:10px;font:800 italic 22px/1 var(--f-d);text-transform:uppercase;color:#fff}
.vt-g svg,.vt-g img{width:30px;height:30px}
.vsi-tip p{margin:0;color:#d6d8f2;font-size:15px;line-height:1.45}
.vsi-tip em{display:inline-block;margin-right:9px;padding:3px 7px;transform:skewX(var(--sk));background:var(--cyan);color:var(--ink);font:800 italic 12px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.vt-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));transform-origin:left;animation:vtBar 1.55s .45s linear backwards}
@keyframes vtIn{from{opacity:0;translate:-50% 16px}} @keyframes vtBar{from{transform:scaleX(0)}}
@media (max-width:959px){.vsi-tip{display:none}}
/* phone: the account promo card is cyan all over, so the longer lines never run onto the dark part */
@media (max-width:959px){.apromo{background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 10px,transparent 10px 22px),var(--cyan)}}
/* phone: the close cross on the survey and install bars is a full thumb target (44 px), it looks the same */
@media (pointer:coarse){.instc .x,.upbar .x{width:44px;height:44px;margin:-5px -6px -5px -4px}}
/* phone: a tab sliding in (or a card coming in from the right) never makes the page wider for a moment; the clip sits on #app, not on html: on html it stops the body overflow from reaching the viewport, and the page could no longer be scrolled */
@media (max-width:959px){#app{overflow-x:clip}}
/* options with many choices (e.g. the categories of the Alphabet-Spiel): full names, wrapping into lines */
.rv-row.many .mini-seg{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.rv-row.many .mini-seg button{flex:1 1 auto;min-width:0;padding:0 12px;overflow:visible;text-overflow:clip}
/* admin panel, Elo of a player: the game name gets its own line (it was squeezed to "4 G…" beside the numbers) */
.aline.aelo{flex-wrap:wrap;row-gap:4px}
.aline.aelo>span{flex:1 1 100%;font-weight:700;color:var(--fg);white-space:normal}
.aline.aelo>.btn{margin-left:auto}
/* admin player card: an action button is never wider than the card, a long one may wrap its text */
.pcard-a .arow .btn{max-width:100%;height:auto;min-height:38px;padding-block:6px}
.pcard-a .arow .btn>span{white-space:normal;text-align:center}
/* online search radar: the sweep leads with its bright edge and fades behind it (it ran backwards), over a faint scope disc */
.radar::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(98,240,255,.28);
  background:radial-gradient(circle,transparent 0 32%,rgba(98,240,255,.1) 32.5% 33%,transparent 33.5% 65%,rgba(98,240,255,.1) 65.5% 66%,transparent 66.5%),
    linear-gradient(rgba(98,240,255,.08),rgba(98,240,255,.08)) center/1px 100% no-repeat,linear-gradient(rgba(98,240,255,.08),rgba(98,240,255,.08)) center/100% 1px no-repeat,
    radial-gradient(circle,rgba(98,240,255,.06),transparent 70%)}
.radar .rc{background:conic-gradient(from 0deg,transparent 0 70%,rgba(98,240,255,.12) 85%,rgba(98,240,255,.42) 99.4%,rgba(98,240,255,.95) 99.6% 100%)}
/* admin overview: the Live number is a button to the running matches and tables */
.kpi-go{display:contents;cursor:var(--cur-p,pointer);text-align:left;font:inherit;color:inherit}
@media (hover:hover) and (pointer:fine){.kpi-go:hover .kpi{border-color:var(--cyan)}}
.kpi-go:focus-visible .kpi{outline:2px solid var(--cyan)}
/* guest badge after a player's name (js/flag.js): everybody sees who plays without an account */
.gtag{display:inline-block;margin-left:.45em;padding:2px 6px;border:1px solid var(--line2);border-radius:4px;transform:skewX(var(--sk));background:var(--panel2);color:var(--muted);font:700 italic 10px/1.2 var(--f-d);letter-spacing:.1em;text-transform:uppercase;vertical-align:.12em;white-space:nowrap;flex:none}
.acctp .ahead .gtag{display:none}

/* ---------- the room a game is played in (js/play.js: worldOf) ----------
   One fixed layer behind the match: its own floor and light per kind of game. Quiet enough that cards and pieces
   stay the brightest thing on screen; the moving parts stop with "Effekte: wenig". */
.world{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;animation:wIn .7s .15s ease-out backwards}
.world>i{position:absolute;inset:0}
@keyframes wIn{from{opacity:0}}
/* wood: dark planks, a warm lamp over the board, dark corners */
.w-wood{background:
  radial-gradient(ellipse 55% 45% at 50% 45%,rgba(255,186,110,.22),transparent 72%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.32) 0 2px,transparent 2px 22%),
  linear-gradient(90deg,#24160d,#2e1c10 18%,#22150c 36%,#2b1a0f 58%,#21140b 78%,#2a190e)}
.w-wood .wa{background:repeating-linear-gradient(91deg,rgba(255,220,180,.025) 0 1px,transparent 1px 7px),repeating-linear-gradient(89.4deg,rgba(0,0,0,.06) 0 2px,transparent 2px 17px)}
.w-wood .wb{background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 45%,rgba(5,3,2,.78))}
/* felt: green cloth with a soft light in the middle and a dark rim */
.w-felt{background:radial-gradient(ellipse 70% 58% at 50% 46%,#156b46,#0c4630 55%,#06281b 85%,#041a12)}
.w-felt .wa{background:repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);opacity:.9}
.w-felt .wb{background:radial-gradient(ellipse 90% 80% at 50% 46%,transparent 55%,rgba(2,10,6,.72))}
/* arcade: a neon grid floor running towards a glowing horizon, scanlines over everything */
.w-arcade{background:linear-gradient(#07041a,#140932 52%,#09051c)}
.w-arcade .wa{top:56%;bottom:-30%;left:-50%;right:-50%;transform:perspective(320px) rotateX(64deg);transform-origin:50% 0;
  background:linear-gradient(rgba(255,79,216,.55) 2px,transparent 2px) 0 0/100% 46px,linear-gradient(90deg,rgba(98,240,255,.38) 2px,transparent 2px) 0 0/46px 100%;
  -webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%);animation:wGrid 1.6s linear infinite}
.w-arcade .wb{background:radial-gradient(ellipse 60% 14% at 50% 56%,rgba(255,79,216,.35),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
@keyframes wGrid{to{background-position:0 46px,0 0}}
/* paper: a dark squared page with the red margin line */
.w-paper{background:linear-gradient(rgba(140,165,255,.075) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(140,165,255,.075) 1px,transparent 1px) 0 0/26px 26px,#0d1120}
.w-paper .wa{left:max(18px,7vw);right:auto;width:2px;background:rgba(255,79,120,.32);box-shadow:5px 0 0 rgba(255,79,120,.14)}
.w-paper .wb{background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 50%,rgba(3,4,10,.7))}
/* sea: deep water, slow wave bands and light that drifts through */
.w-sea{background:radial-gradient(ellipse 80% 60% at 50% 25%,#11406a,#082440 55%,#041325)}
.w-sea .wa{inset:-20% -20%;background:repeating-linear-gradient(172deg,rgba(120,210,255,.07) 0 2px,transparent 2px 38px);animation:wWave 9s ease-in-out infinite alternate}
.w-sea .wb{background:radial-gradient(circle at 25% 30%,rgba(120,220,255,.12),transparent 30%),radial-gradient(circle at 75% 65%,rgba(120,220,255,.09),transparent 34%),radial-gradient(ellipse 90% 80% at 50% 45%,transparent 50%,rgba(1,6,14,.7));animation:wDrift 14s ease-in-out infinite alternate}
@keyframes wWave{to{transform:translate(-3%,4%)}}
@keyframes wDrift{to{transform:translate(4%,-3%)}}
/* club: the usual room with two spotlights swinging slowly over the stage */
.w-club .wa,.w-club .wb{top:-12%;left:50%;width:60vmax;height:130vh;margin-left:-30vmax;transform-origin:50% 0;
  background:conic-gradient(from 168deg at 50% 0,transparent 0deg,var(--sp) 12deg,transparent 24deg);filter:blur(6px);opacity:.75}
.w-club .wa{--sp:rgba(255,79,216,.22);animation:wSpot 11s ease-in-out infinite alternate;rotate:-24deg}
.w-club .wb{--sp:rgba(98,240,255,.16);animation:wSpot 13s ease-in-out infinite alternate-reverse;rotate:24deg}
@keyframes wSpot{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.lowfx .world,.lowfx .world>i{animation:none}

/* ---------- game pictures that play a little on their own: the card in front of the hero, and the tile under the mouse ----------
   (only for pictures whose parts can move: the Pong ball, a falling 4 Gewinnt piece, Tic Tac Toe drawn anew, the knight hopping) */
.hcard.on[data-id="pong"] .hc-ic circle{animation:icPong 2.6s ease-in-out infinite}
.hcard.on[data-id="pong"] .hc-ic rect:nth-of-type(2){animation:icPadT 2.6s ease-in-out infinite}
.hcard.on[data-id="pong"] .hc-ic rect:nth-of-type(3){animation:icPadB 2.6s ease-in-out infinite}
.hcard.on[data-id="c4"] .hc-ic circle:nth-of-type(11){animation:icDrop 3s cubic-bezier(.55,0,1,.45) infinite}
.hcard.on[data-id="ttt"] .hc-ic path:not(:first-child),.hcard.on[data-id="ttt"] .hc-ic circle{stroke-dasharray:30;animation:icDraw 3.4s ease-out infinite}
.hcard.on[data-id="ttt"] .hc-ic circle{animation-delay:.35s} .hcard.on[data-id="ttt"] .hc-ic path:last-child{animation-delay:.7s}
.hcard.on[data-id="chess"] .hc-ic text{transform-box:fill-box;transform-origin:50% 100%;animation:icHop 2.8s var(--spring) infinite}
@media (hover:hover) and (pointer:fine){
  .tile[data-id="pong"]:hover .ic circle{animation:icPong 1.6s ease-in-out infinite}
  .tile[data-id="c4"]:hover .ic circle:nth-of-type(11){animation:icDrop 1.8s cubic-bezier(.55,0,1,.45) infinite}
  .tile[data-id="ttt"]:hover .ic path:not(:first-child),.tile[data-id="ttt"]:hover .ic circle{stroke-dasharray:30;animation:icDraw 2s ease-out infinite}
  .tile[data-id="chess"]:hover .ic text{transform-box:fill-box;transform-origin:50% 100%;animation:icHop 1.6s var(--spring) infinite}
}
@keyframes icPong{0%,100%{transform:translate(0,0)}25%{transform:translate(-9px,15px)}50%{transform:translate(2px,-10px)}75%{transform:translate(8px,14px)}}
@keyframes icPadT{0%,100%{transform:none}25%{transform:translateX(-6px)}50%{transform:translateX(4px)}75%{transform:translateX(9px)}}
@keyframes icPadB{0%,100%{transform:none}25%{transform:translateX(-12px)}50%{transform:translateX(-4px)}75%{transform:translateX(2px)}}
@keyframes icDrop{0%{transform:translateY(-26px);opacity:0}8%{opacity:1}30%{transform:translateY(0)}38%{transform:translateY(-2.5px)}46%,100%{transform:none;opacity:1}}
@keyframes icDraw{0%{stroke-dashoffset:30}35%,100%{stroke-dashoffset:0}}
@keyframes icHop{0%,55%,100%{transform:none}68%{transform:translateY(-5px) rotate(-8deg)}80%{transform:translateY(0) rotate(4deg)}88%{transform:rotate(0)}}
.lowfx .hc-ic *,.lowfx .tile .ic *{animation:none!important}

/* ---------- Online ranking: the game row, steps that rise, your own row stays in sight ---------- */
.orank .rgames{margin-top:6px}
.rfilt:empty{display:none}
.podium.rise .pod .step{transform-origin:50% 100%;animation:podUp .5s var(--spring) backwards}
.podium.rise .pod>:not(.step){--pd:0s;animation:podIn .4s var(--pd) var(--snap) backwards}
.podium.rise .pod>.pav{animation:podIn .4s var(--pd) var(--snap) backwards,bob 3s calc(var(--pd) + .4s) ease-in-out infinite}
.podium.rise .pod.p3 .step{animation-delay:.25s} .podium.rise .pod.p3>:not(.step){--pd:.42s}
.podium.rise .pod.p2 .step{animation-delay:.43s} .podium.rise .pod.p2>:not(.step){--pd:.6s}
.podium.rise .pod.p1 .step{animation-delay:.62s} .podium.rise .pod.p1>:not(.step){--pd:.8s}
@keyframes podUp{from{transform:scaleY(0)}}
@keyframes podIn{from{opacity:0;transform:translateY(14px)}}
/* "Noch 2 Siege bis Platz 9" under your numbers */
.rmine .rnext{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:7px;padding:4px 9px;transform:skewX(var(--sk));background:color-mix(in srgb,var(--yellow) 14%,var(--panel2));border:1px solid color-mix(in srgb,var(--yellow) 50%,var(--line));color:var(--yellow);font:800 italic 12px/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase;font-style:italic}
.rmine .rnext svg{width:13px;height:13px;flex:none}
.rmine .rnext.lead{background:color-mix(in srgb,var(--pink) 16%,var(--panel2));border-color:var(--pink);color:var(--pink)}
/* your own row further down the list: a copy waits at the bottom edge of the screen until the list gets there */
.rmefix{position:fixed;left:12px;right:12px;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:30;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity .2s,transform .25s var(--snap)}
.rmefix.on{opacity:1;transform:none;pointer-events:auto}
.rmefix .rrow{margin:0;background:linear-gradient(rgba(255,79,216,.18),rgba(255,79,216,.18)),var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.55)}
@media (min-width:960px){.rmefix{bottom:18px}}
.lowfx .podium.rise .pod .step,.lowfx .podium.rise .pod>*{animation:none}

/* ---------- Bilanz: the form, the trophy cabinet, a card per game ---------- */
/* the form: the last five own matches as chips, newest on the right */
.sform{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.sform .sf-l{font:800 italic 13px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.sform .sf{width:30px;height:30px;display:grid;place-items:center;transform:skewX(var(--sk));font:800 italic 15px/1 var(--f-d);font-style:italic;color:var(--ink);box-shadow:2px 2px 0 rgba(0,0,0,.4);animation:sfIn .35s calc(.15s + var(--k) * 70ms) var(--spring) backwards}
.sform .sf.w{background:var(--good)} .sform .sf.l{background:var(--bad)} .sform .sf.d{background:var(--dim);color:var(--fg)}
.sform .sf:last-of-type{outline:2px solid #fff;outline-offset:2px}
.sform small{margin-left:6px;font-size:12px;color:var(--muted)}
@keyframes sfIn{from{opacity:0;transform:skewX(var(--sk)) scale(.4)}}
/* the cabinet: on the Bilanz page across the whole width, right under the numbers */
.stats .sbadges{margin-top:16px}
.abz-grid.cab{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
@media (max-width:420px){.abz-grid.cab .abz small{font-size:10px}.abz-grid.cab .abz b{font-size:12px}}
.abz.on{animation:abzIn .4s var(--spring) backwards}
.abz.ghost{position:relative;border-style:dashed;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.02) 0 6px,transparent 6px 12px),var(--ink2)}
.abz.ghost .abz-ic{position:relative;filter:none;opacity:1;background:var(--panel2);color:transparent}
.abz.ghost .abz-ic svg{opacity:.22;color:var(--fg)}
.abz.ghost .abz-ic i{position:absolute;inset:0;display:grid;place-items:center;font:800 italic 20px/1 var(--f-d);font-style:italic;color:var(--muted)}
.abz.ghost b{color:var(--muted)}
@keyframes abzIn{from{opacity:0;transform:scale(.85)}}
/* a card per game */
.sg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sg-head h3{margin:0;font:800 italic 18px/1 var(--f-d);text-transform:uppercase}
.sg-sort{flex:none}
.sg-sort button{font-size:12px;min-height:36px}
.sgcs{display:grid;gap:8px}
@media (min-width:960px){.sgcs{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}}
.sgc{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:10px;text-align:left;color:var(--fg);
  background:linear-gradient(100deg,color-mix(in srgb,var(--acc) 12%,var(--panel2)),var(--panel2) 60%);border:1px solid var(--line);transition:transform .15s var(--ease),border-color .15s}
.sgc .ic{width:48px;height:48px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))}
.sgc .ic svg{width:100%;height:100%;display:block}
.sgc-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.sgc-t b{font:800 italic 16px/1.1 var(--f-d);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgc-n{display:flex;gap:10px;font:700 13px/1 var(--f-b);font-variant-numeric:tabular-nums}
.sgc-n .good{color:var(--good)} .sgc-n .bad{color:var(--bad)} .sgc-n .dim{color:var(--dim)}
.sgc-n em{margin-left:auto;font-style:normal;color:var(--fg)}
.sgc-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--ink2)}
.sgc-bar i{width:var(--w);height:100%}
.sgc-bar .w{background:var(--good)} .sgc-bar .d{background:var(--dim)} .sgc-bar .l{background:var(--bad)}
.sgc-m{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.sgc-m .rank{height:22px;font-size:11px}
.sgc:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.sgc:hover{border-color:var(--acc);transform:translateY(-1px)}}
@media (max-width:420px){.sgc{grid-template-columns:40px minmax(0,1fr);gap:10px}.sgc .ic{width:40px;height:40px}.sgc-m{grid-column:2;flex-direction:row;justify-content:flex-start}.sgc-m:empty{display:none}}
.lowfx .sform .sf,.lowfx .abz.on{animation:none}
/* the 14-day chart is now a side note further down: lower bars */
.stats .sbars{height:96px}
.stats .schart .fine{margin-top:20px}

/* ---------- Konto without login: the player card you would get, empty and locked ---------- */
.apromo.bcard{align-items:stretch;gap:14px;background:repeating-linear-gradient(-60deg,rgba(8,9,15,.08) 0 10px,transparent 10px 22px),var(--cyan)}
@media (min-width:960px){.apromo.bcard{justify-content:center;gap:18px;padding:28px}.bc-av{width:80px;height:80px;font-size:42px}.bc-nm b{font-size:38px}}
.apromo.bcard .hc-k{align-self:flex-start}
.bc-head{display:flex;align-items:center;gap:14px}
.bc-av{width:64px;height:64px;flex:none;display:grid;place-items:center;transform:skewX(var(--sk));border:2.5px dashed rgba(8,9,15,.55);background:rgba(8,9,15,.08);font:800 italic 34px/1 var(--f-d);color:rgba(8,9,15,.6);animation:bcPulse 2.6s ease-in-out infinite}
.bc-nm{display:flex;flex-direction:column;gap:4px;min-width:0}
.bc-nm b{font:800 italic 30px/.95 var(--f-d);text-transform:uppercase;color:rgba(8,9,15,.45)}
.bc-nm small{font:700 italic 12px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:rgba(8,9,15,.65)}
.bc-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bc-slot{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 10px 9px;border-radius:8px;background:rgba(8,9,15,.12);border:1px solid rgba(8,9,15,.18)}
.bc-slot .bc-ic svg{width:20px;height:20px}
.bc-slot b{font:800 italic 15px/1.05 var(--f-d);text-transform:uppercase}
.bc-slot small{font-size:11.5px;line-height:1.2;font-weight:700;opacity:.7}
.bc-lk{position:absolute;top:7px;right:7px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--cyan)}
.bc-lk svg{width:11px;height:11px}
.bc-cta{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;font-size:13.5px;line-height:1.3}
.bc-cta svg{width:18px;height:18px;flex:none}
@keyframes bcPulse{50%{background:rgba(8,9,15,.16);border-color:rgba(8,9,15,.8)}}
.lowfx .bc-av{animation:none}
@media (max-width:380px){.bc-slot{padding:8px 7px}.bc-slot b{font-size:13px}.bc-nm b{font-size:26px}}

/* ---------- rivals: your record against this opponent in the intro and on the end screen ---------- */
.vsi-h2h{position:absolute;left:50%;bottom:max(7vh,24px);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;transform:skewX(var(--sk));background:var(--ink);color:#fff;box-shadow:5px 5px 0 rgba(8,9,15,.35);animation:vsn .35s var(--snap) backwards}
.vsi-h2h>*{transform:skewX(calc(var(--sk) * -1))}
@media (min-width:960px){.vsi-h2h{bottom:auto;top:7vh}}
.vsi-h2h small{font:700 italic 11px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.vsi-h2h b{font:800 italic 30px/1 var(--f-d);font-variant-numeric:tabular-nums}
.vsi-h2h b i{margin:0 6px;opacity:.5;font-style:normal}
.vsi-h2h em,.ko .kh2h em{padding:3px 8px;background:var(--yellow);color:var(--ink);font:800 italic 11px/1 var(--f-d);letter-spacing:.12em;text-transform:uppercase;font-style:italic}
.ko .kh2h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:7px 14px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);animation:qsIn .4s .45s var(--spring) backwards}
.ko .kh2h>span{font-size:13px;color:var(--muted)} .ko .kh2h>.kn{margin-left:-6px;color:var(--fg);font-weight:700}
.ko .kh2h b{font:800 italic 20px/1 var(--f-d);font-variant-numeric:tabular-nums}
.ko .kh2h b .me{color:var(--pink);font-size:inherit}
.ko .kh2h b i{margin:0 4px;color:var(--dim);font-style:normal}
.ko .kh2h small{font-size:12px;color:var(--dim)}

/* ---------- tournament at one device (js/tourney.js) ---------- */
.tny .rgames.tny-g{margin:0 -4px;padding:2px 4px 10px}
.tny .rgames.tny-g button{width:72px}
.ty-g{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.ty-g .ic{width:22px;height:22px;display:inline-block} .ty-g .ic svg{width:100%;height:100%}
.ty-g b{color:var(--fg)}
/* the bracket: one column per round, the matches spread out so a pair meets in the middle of the next column */
.ty-m.bye .ty-p.won{background:none;color:var(--fg)}
.ty-tree{display:grid;grid-template-columns:repeat(var(--r),minmax(100px,1fr));gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.ty-col{display:flex;flex-direction:column;min-width:0}
.ty-col h5{margin:0 0 8px;font:800 italic 11px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.ty-ms{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:8px}
.ty-m{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.ty-tree.fresh .ty-m{animation:qsIn .35s calc(var(--k) * 60ms) var(--spring) backwards}
.ty-m.bye{opacity:.6}
.ty-m.now{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink),0 0 18px -4px var(--pink);animation:tyNow 1.6s ease-in-out infinite}
.ty-p{padding:7px 10px;font:700 13px/1.2 var(--f-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ty-p+.ty-p{border-top:1px solid var(--line)}
.ty-p i{color:var(--dim);font-style:italic;font-weight:600}
.ty-p.won{color:var(--ink);background:var(--yellow);font-weight:800}
.ty-p.out{color:var(--dim);text-decoration:line-through}
.ty-col:last-child .ty-m{border-color:color-mix(in srgb,var(--yellow) 55%,var(--line))}
.ty-next{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--pink) 16%,var(--panel2)),var(--panel2));text-align:center}
.ty-next small{font:700 italic 11px/1 var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.ty-next b{font:800 italic 20px/1.1 var(--f-d);text-transform:uppercase}
.ty-next b i{font-style:normal;color:var(--muted);font-size:14px;margin:0 4px}
@keyframes tyNow{50%{box-shadow:0 0 0 1px var(--pink),0 0 26px -2px var(--pink)}}
.lowfx .ty-m.now,.lowfx .ty-tree.fresh .ty-m{animation:none}
@media (min-width:960px){.faddm .tny .ty-tree{grid-template-columns:repeat(var(--r),minmax(140px,1fr))}}

/* ---------- "Zusammen spielen": tournament and game night as two big cards on the start page ---------- */
.tgcs{margin-top:18px;margin-bottom:24px}
.tgh{margin:0 0 10px;font:800 italic 20px/1 var(--f-d);text-transform:uppercase;letter-spacing:.01em}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tgrid.one{grid-template-columns:minmax(0,1fr)}
.tgc{--a:var(--yellow);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:156px;padding:14px;border-radius:14px;text-align:left;color:var(--fg);cursor:var(--cur-p,pointer);
  background:repeating-linear-gradient(-60deg,rgba(255,255,255,.03) 0 10px,transparent 10px 22px),linear-gradient(150deg,color-mix(in srgb,var(--a) 26%,var(--panel2)),var(--panel2) 62%);
  border:1px solid color-mix(in srgb,var(--a) 45%,var(--line));box-shadow:4px 4px 0 color-mix(in srgb,var(--a) 40%,transparent);transition:transform .15s var(--ease),box-shadow .15s}
.tgc-n{--a:var(--cyan)}
.tgc:active{transform:translate(2px,2px);box-shadow:2px 2px 0 color-mix(in srgb,var(--a) 40%,transparent)}
@media (hover:hover) and (pointer:fine){.tgc:hover{transform:translateY(-2px);box-shadow:6px 6px 0 color-mix(in srgb,var(--a) 50%,transparent)}}
.tgc.lockd{--a:var(--dim)}
.tgc-tx{display:flex;flex-direction:column;gap:4px;min-width:0;margin-top:auto}
.tgc-k{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:3px 7px;transform:skewX(var(--sk));background:var(--a);color:var(--ink);font:800 italic 10.5px/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;font-style:italic}
.tgc.live .tgc-k::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink);animation:tgLive 1.2s ease-in-out infinite}
.tgc-tx b{font:800 italic 22px/1 var(--f-d);text-transform:uppercase}
.tgc-tx small{font-size:12.5px;line-height:1.3;color:var(--muted)}
.tgc-tx small b{font:inherit;font-weight:700;color:var(--fg);text-transform:none}
.tgc-go{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;transform:skewX(var(--sk));background:var(--ink);color:var(--a);box-shadow:2px 2px 0 color-mix(in srgb,var(--a) 50%,transparent)}
.tgc-go svg{width:16px;height:16px;transform:skewX(calc(var(--sk) * -1))}
/* the picture: a small bracket (four, two, one) for the tournament */
.tgc-pic{position:relative;display:block;width:86px;height:46px;flex:none}
.tgc-t .tgc-pic i{position:absolute;height:3px;border-radius:2px;background:color-mix(in srgb,var(--a) 70%,transparent)}
.tgc-t .tgc-pic i:nth-child(-n+4){left:0;width:24px}
.tgc-t .tgc-pic i:nth-child(1){top:2px} .tgc-t .tgc-pic i:nth-child(2){top:14px} .tgc-t .tgc-pic i:nth-child(3){top:29px} .tgc-t .tgc-pic i:nth-child(4){top:41px}
.tgc-t .tgc-pic i:nth-child(5),.tgc-t .tgc-pic i:nth-child(6){left:30px;width:22px;box-shadow:-4px 0 0 -1px transparent}
.tgc-t .tgc-pic i:nth-child(5){top:8px} .tgc-t .tgc-pic i:nth-child(6){top:35px}
.tgc-t .tgc-pic i:nth-child(7){left:58px;top:20px;width:28px;height:7px;background:var(--a);box-shadow:0 0 12px var(--a)}
.tgc-t .tgc-pic::before,.tgc-t .tgc-pic::after{content:'';position:absolute;width:2px;background:color-mix(in srgb,var(--a) 45%,transparent)}
.tgc-t .tgc-pic::before{left:26px;top:3px;height:40px}
.tgc-t .tgc-pic::after{left:54px;top:9px;height:28px}
/* the picture: a small scoreboard (three bars, the leader glows) for the game night */
.tgc-n .tgc-pic{display:flex;align-items:flex-end;gap:6px;width:60px}
.tgc-n .tgc-pic i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--a) 45%,transparent)}
.tgc-n .tgc-pic i:nth-child(1){height:58%} .tgc-n .tgc-pic i:nth-child(2){height:100%;background:var(--a);box-shadow:0 0 12px var(--a)} .tgc-n .tgc-pic i:nth-child(3){height:36%}
.tgc.lockd .tgc-pic{opacity:.5}
@keyframes tgLive{50%{opacity:.25}}
.lowfx .tgc.live .tgc-k::before{animation:none}
@media (min-width:960px){.tgcs{margin-top:22px}.tgc{min-height:140px;flex-direction:row;align-items:center;gap:18px;padding:18px 56px 18px 20px}.tgc-tx{margin-top:0}.tgc-pic{transform:scale(1.15);margin:0 6px}}

/* phone: while the page is scrolling, the endless decorations hold still (hero card picture and shine, background clouds, rank gem); they go on as soon as the finger lets go */
html.scrolling .hcard *,html.scrolling .bgfx *,html.scrolling .rank i{animation-play-state:paused!important}
/* online tab, login card: on narrow phones the long German button text ('Anmelden oder Konto erstellen') stays inside the button - less side padding, and a second line if it still does not fit */
.oacc .btn{max-width:100%;padding-inline:14px;white-space:normal;height:auto;min-height:46px;padding-block:8px;line-height:1.1;text-align:center}