:root {
  --void: #0e1418;
  --bar: rgba(14, 20, 24, .92);     
  --rail-to: #101820;               
  --ink: #0b0f12;                   
  --overlay: rgba(11, 17, 20, .86); 
  --stage: #0b0f12;                 
  --panel: #141d23;
  --panel-2: #1a242b;
  --panel-3: #202c34;
  --line: #26343f;
  --line-soft: #1e2930;

  --water: #37c8d6;
  --water-dim: #1d7c86;
  --rust: #d8552f;
  --sun: #e9a93c;
  --ok: #5bc98a;
  --blue: #5b8dfd;
  --proxy: #b69cff;   

  --text: #e6eef2;
  --muted: #8fa3af;
  --faint: #61737e;

  
  --on-accent: #eafcff;             
  --accent-hover: #22929e;          
  --danger-text: #ffd9cd;
  --danger-bg: #2a1712;
  --danger-line: #5c2a1a;
  --danger-hover: #3a1e16;
  --glow-a: rgba(216, 85, 47, .10); 
  --glow-b: rgba(55, 200, 214, .07);
  --shadow: rgba(0, 0, 0, .45);     
  --card-glow: rgba(0, 0, 0, 0);    

  
  --water-rgb: 55, 200, 214;
  --sun-rgb: 233, 169, 60;
  --rust-rgb: 216, 85, 47;
  --ok-rgb: 91, 201, 138;
  --blue-rgb: 91, 141, 253;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 10px;
  --rail: 76px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}

body::before {
  
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(80vw 60vh at 78% -10%, var(--glow-a), transparent 60%),
    radial-gradient(70vw 50vh at 8% 105%, var(--glow-b), transparent 60%);
  pointer-events: none; z-index: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--water); }

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }



#app { position: relative; z-index: 1; min-height: 100%; display: none; }
#app.on { display: grid; grid-template-columns: var(--rail) 1fr; }

.rail {
  position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--panel), var(--rail-to));
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 10px;
  gap: 4px;
  
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.rail:hover { scrollbar-color: var(--line) transparent; }
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.rail:hover::-webkit-scrollbar-thumb { background: var(--line); }
.rail-btn { flex: 0 0 auto; }

.brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--water); text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg);
  margin-bottom: 8px; opacity: .8;
}

.rail-btn {
  width: 56px; padding: 9px 4px 7px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--faint); cursor: pointer;
  display: grid; justify-items: center; gap: 4px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, color .15s;
}
.rail-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rail-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.rail-btn.on { color: var(--water); background: rgba(var(--water-rgb),.10); box-shadow: inset 2px 0 0 var(--water); }
.rail-spacer { flex: 1 0 8px; }   

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; background: var(--bar);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.topbar h1 {
  margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.topbar .sep { flex: 1; }

.phase {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.phase b { color: var(--text); font-weight: 600; }
.phase .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.phase[data-phase="roster"] .dot { background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.phase[data-phase="map"] .dot { background: var(--water); box-shadow: 0 0 10px var(--water); }

.view { padding: 20px; display: none; }
.view.on { display: block; }



.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 0 22px var(--card-glow);
}
.card + .card { margin-top: 14px; }

.grid > .card + .card,
.grid > * > .card + .card { margin-top: 0; }
.grid > .card { align-self: start; }

.card + .grid,
.grid + .card,
.grid + .grid,
.empty + .grid,
.grid + .empty { margin-top: 14px; }
.card > h2, .sec-title {
  margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.card > h2::after, .sec-title::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.side { grid-template-columns: 340px 1fr; align-items: start; }

.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 9px; padding: 8px 14px; cursor: pointer;
  font-size: 13px; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--panel-3); border-color: #33454f; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--water-dim); border-color: var(--water); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger-text); border-color: var(--danger-line); background: var(--danger-bg); }
.btn.danger:hover { background: var(--danger-hover); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn.on { border-color: var(--water); color: var(--water); }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input[type="url"], input[type="search"], input[type="email"], input[type="datetime-local"], select, textarea {
  background: #0f171d; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 10px; width: 100%; outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .rail-btn:focus-visible {
  outline: 2px solid var(--water); outline-offset: 1px;
}
label.field { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }

.calc-form { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: center; }
.calc-label { font-size: 13px; color: var(--muted); }
.calc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
.calc-inline[hidden] { display: none; }
.calc-form select.calc-sel, .calc-form input.calc-num { width: auto; padding: 6px 10px; }
.calc-form input.calc-num { width: 80px; }
@media (max-width: 420px) {
  .calc-form { grid-template-columns: 1fr; gap: 4px; }
  .calc-form .calc-inline { margin-bottom: 6px; }
}
label.field span { letter-spacing: .04em; }

input[type="range"] { width: 100%; accent-color: var(--water); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
  cursor: pointer; user-select: none;
}
th.plain { cursor: default; }
td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: rgba(255,255,255,.025); }
.t-wrap { overflow-x: auto; }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; letter-spacing: .03em;
  border: 1px solid transparent; white-space: nowrap;
}
.tag.member { background: rgba(var(--ok-rgb),.12); color: #93e0b6; border-color: rgba(var(--ok-rgb),.3); }
.tag.willing { background: rgba(var(--water-rgb),.10); color: #7fdde8; border-color: rgba(var(--water-rgb),.28); }
.tag.refusenik { background: rgba(var(--rust-rgb),.12); color: #f0a98f; border-color: rgba(var(--rust-rgb),.3); }
.tag.new { background: rgba(var(--sun-rgb),.12); color: var(--sun); border-color: rgba(var(--sun-rgb),.3); }

.tag.coords-copy { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.tag.coords-copy:hover { border-color: rgba(var(--water-rgb),.45); }
.tag.coords-copy:active { transform: scale(.95); }
.tag.rank { background: var(--panel-3); color: var(--muted); font-family: var(--mono); }
.tag.win { background: rgba(var(--ok-rgb),.14); color: #93e0b6; }
.tag.loss { background: rgba(var(--rust-rgb),.14); color: #f0a98f; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.empty {
  padding: 28px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 12px;
}
.empty b { display: block; color: var(--text); margin-bottom: 6px; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.stat .v { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 12px; color: var(--muted); }



#login {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(60vw 60vh at 70% 20%, rgba(var(--rust-rgb),.16), transparent 60%),
    radial-gradient(50vw 50vh at 20% 90%, rgba(var(--water-rgb),.12), transparent 60%), var(--void);
}
#login.off { display: none; }

.login-wait { display: none; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; padding: 14px 0 4px; }
#login.booting .login-wait { display: block; }
#login.booting .login-box > :not(.logo):not(.login-sub):not(.login-wait) { display: none !important; }
.login-box {
  width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px;
}
.login-box .logo {
  font-family: var(--mono); font-size: 22px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--water); margin-bottom: 2px;
}
.login-box p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.login-box label.field { margin-bottom: 12px; }
.login-err { color: #f0a98f; font-size: 13px; min-height: 18px; margin-top: 10px; }



.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; cursor: grab; user-select: none; touch-action: none;
}
.chip:hover { border-color: #3a4c58; }
.chip.dragging { opacity: .4; }
.chip.picked { border-color: var(--water); box-shadow: 0 0 0 1px var(--water) inset; }
.chip .bm { font-family: var(--mono); font-size: 12px; color: var(--water); }
.chip .r { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.chip.is-new { border-left: 3px solid var(--sun); }
.chip.st-willing { border-bottom: 2px solid rgba(var(--water-rgb),.5); }
.chip.st-refusenik { border-bottom: 2px solid rgba(var(--rust-rgb),.5); }
.chip .x { color: var(--faint); cursor: pointer; padding: 0 2px; }
.chip .x:hover { color: var(--rust); }

.slot-list { min-height: 42px; padding: 6px; border: 1px dashed var(--line); border-radius: 10px; }
.slot-list.over { border-color: var(--water); background: rgba(var(--water-rgb),.06); }



.map-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #0b1114; user-select: none;
}
.map-wrap img { display: block; width: 100%; height: auto; }
.map-wrap.dim img { filter: saturate(.55) brightness(.62); }

.marker {
  position: absolute;
  
  transform: translate(-50%, -50%) scale(var(--mk, 1));
  transform-origin: center center;
  min-width: 62px; max-width: 136px; padding: 5px 7px 6px;
  background: var(--overlay); border: 1px solid var(--line);
  border-radius: 10px; text-align: center; cursor: pointer;
  
  transition: border-color .15s, box-shadow .15s;
}
.marker:hover { border-color: var(--water); }
.marker.over { border-color: var(--water); box-shadow: 0 0 0 3px rgba(var(--water-rgb),.25); }
.marker.picked { border-color: var(--sun); box-shadow: 0 0 0 3px rgba(var(--sun-rgb),.25); }
.marker.full { border-color: var(--water-dim); }
.marker .m-name {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.marker .m-cnt { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.marker .m-cnt small { color: var(--faint); font-size: 11px; }
.marker .m-pw { font-family: var(--mono); font-size: 10px; color: var(--water); }
.marker .m-bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.marker .m-bar i { display: block; height: 100%; background: var(--water); }
.marker.collector { border-style: dashed; }
.marker.collector .m-name { color: var(--sun); }
.marker.collector .m-nick { background: rgba(var(--sun-rgb),.16); color: #f2ce90; }
.marker:hover, .marker.picked, .marker.over { z-index: 6; }


.marker .m-crew {
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
  margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line);
}
.m-nick {
  font-family: var(--mono); font-size: 9px; line-height: 1.35;
  padding: 1px 4px; border-radius: 4px; cursor: grab;
  background: rgba(var(--water-rgb),.14); color: #a8e9f1;
  max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-nick:hover { background: rgba(var(--water-rgb),.32); color: #eafcff; }
.m-nick.picked { background: var(--sun); color: #221703; }
.m-nick.dragging { opacity: .4; }
.marker.hidden-phase { opacity: .32; }
.marker.dragging-point { cursor: move; border-color: var(--sun); }

.map-people { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 10px; padding: 1px 5px;
  background: rgba(var(--water-rgb),.9); color: #04222a; border-radius: 5px; white-space: nowrap;
}


.timeline { margin-top: 12px; }
.tl-bar {
  position: relative; height: 30px; border: 1px solid var(--line);
  border-radius: 8px; background: linear-gradient(90deg, rgba(var(--water-rgb),.10), rgba(var(--sun-rgb),.10));
  overflow: hidden;
}
.tl-bar .half { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--sun); }
.tl-bar .lbl {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: 0 8px;
}
.tl-bar .lbl.a { left: 0; }
.tl-bar .lbl.b { left: 50%; color: var(--sun); }
.tl-bar .lbl.c { right: 0; }


.tl-seg {
  position: absolute; top: 0; bottom: 0; border: 0; background: transparent;
  color: var(--muted); font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-seg:hover { color: var(--text); }
.tl-seg.on { background: rgba(var(--water-rgb),.16); color: var(--text); box-shadow: inset 0 -2px 0 var(--water); }
.tl-seg + .tl-seg.on { background: rgba(var(--sun-rgb),.16); box-shadow: inset 0 -2px 0 var(--sun); }
.m-nick.carrier { background: rgba(var(--sun-rgb),.2); color: #f2ce90; }



.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; }
.toast {
  background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--water);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; max-width: 340px;
  animation: pop .18s ease-out;
}
.toast.err { border-left-color: var(--rust); }
.toast.ok { border-left-color: var(--ok); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.ch-popups { position: fixed; top: 16px; right: 16px; z-index: 210; display: grid; gap: 8px; width: min(360px, calc(100vw - 20px)); pointer-events: none; }
.ch-popup { pointer-events: auto; display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 10px 10px 10px 12px;
  background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--water); border-radius: 14px;
  box-shadow: 0 10px 28px var(--shadow); animation: popIn .22s ease-out; transition: opacity .2s, transform .2s; }
.ch-popup:hover { border-color: rgba(var(--water-rgb), .5); }
.ch-popup.out { opacity: 0; transform: translateY(-6px); }
.ch-popup .ch-ava { flex: 0 0 auto; }
.ch-popup-txt { flex: 1; min-width: 0; }
.ch-popup-h { display: flex; gap: 6px; align-items: baseline; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-popup-h .faint { font-size: 11px; }
.ch-popup-b { font-size: 13px; margin-top: 2px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ch-popup-x { flex: 0 0 auto; align-self: flex-start; background: none; border: 0; color: var(--faint); font-size: 13px; padding: 2px 4px; cursor: pointer; }
.ch-popup-x:hover { color: var(--text); }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 900px) { .ch-popups { top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 10px; width: auto; } }

body:has(.cg-back) .ch-popups, body:has(.sk-back) .ch-popups { z-index: 1340; }
.ch-dmr-back { position: fixed; inset: 0; z-index: 1320; background: rgba(5, 9, 14, .55); display: flex; align-items: flex-start; justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 10px 12px; }
.ch-dmr { width: min(440px, 100%); max-height: min(620px, calc(100dvh - 24px)); display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--water); border-radius: 16px; padding: 10px 12px 12px;
  box-shadow: 0 16px 44px var(--shadow); animation: popIn .2s ease-out; }
.ch-dmr-h { display: flex; align-items: center; gap: 10px; }
.ch-dmr-h .ch-ava { flex: 0 0 auto; }
.ch-dmr-ttl { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ch-dmr-ttl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-dmr-ttl .faint { font-size: 12px; }
.ch-dmr-list { flex: 1 1 auto; min-height: 90px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.ch-dmr-m { display: flex; gap: 6px; align-items: flex-end; max-width: 88%; }
.ch-dmr-m.mine { align-self: flex-end; }
.ch-dmr-m .ch-ava { flex: 0 0 auto; }
.ch-dmr-b { min-width: 0; padding: 6px 10px; border-radius: 12px; background: var(--panel-2, rgba(255,255,255,.05)); border: 1px solid var(--line);
  font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ch-dmr-m.mine .ch-dmr-b { background: rgba(var(--water-rgb), .16); border-color: rgba(var(--water-rgb), .35); }
.ch-dmr-t { font-size: 10px; text-align: right; margin-top: 2px; }
.ch-dmr-img { display: block; max-width: 100%; max-height: 180px; border-radius: 8px; margin-top: 4px; }
.ch-dmr-empty { text-align: center; padding: 20px 0; }
.ch-dmr-field { flex: none; }
.ch-dmr-field .ch-dmr-in { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 15px; background: transparent !important; border: 0; border-radius: 14px 0 0 14px;
  padding: 11px 6px 11px 12px; line-height: 22px; min-height: 44px; max-height: 110px; outline: none; box-shadow: none; color: var(--text); }
.ch-dmr-field .ch-dmr-in:focus-visible { outline: none; }
.ch-dmr-field .ch-fic.ch-fsend { width: 36px; min-width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; background: var(--water-dim); color: var(--on-accent); }
.ch-dmr-field .ch-fsend .ch-ico { transform: translateX(1px); }
@media (hover: hover) { .ch-dmr-field .ch-fic.ch-fsend:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); } }
.ch-dmr-field .ch-fic.ch-fsend:disabled { opacity: .5; }

body:has(.ch-dmr-back) .ch-emoji-pop { z-index: 1360; }
.ch-dmr-err { font-size: 12px; color: var(--rust); }
.ch-dmr-back-btn { width: 100%; justify-content: center; }

.modal-back {
  position: fixed; inset: 0; z-index: 150; background: rgba(6,10,12,.72);
  display: grid; place-items: center; padding: 20px;
}

body:has(.cg-back) .modal-back, body:has(.sk-back) .modal-back { z-index: 1250; }
.modal {
  width: min(520px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; max-height: 86vh; overflow: auto;
}
.modal h3 { margin: 0 0 14px; font-size: 16px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

.hint { font-size: 12px; color: var(--faint); line-height: 1.45; }
.warn {
  background: rgba(var(--sun-rgb),.09); border: 1px solid rgba(var(--sun-rgb),.3);
  color: #f2ce90; border-radius: 10px; padding: 9px 12px; font-size: 13px;
}
.locked-banner {
  background: rgba(var(--water-rgb),.08); border: 1px solid rgba(var(--water-rgb),.3);
  color: #a8e9f1; border-radius: 10px; padding: 9px 12px; font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  
  .grid.two,
  .grid.side {
    grid-template-columns: 1fr;
  }
  #app.on {
    grid-template-columns: 1fr;
  }
  
  .rail {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    
    overflow-x: auto;
    overflow-y: hidden;
    
    -webkit-overflow-scrolling: touch;
    
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    border-right: 0;
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    gap: 4px;
    z-index: 50;
    
    scrollbar-width: none;
    
    touch-action: pan-x;
    
    user-select: none;
  }
  
  .rail::-webkit-scrollbar {
    display: none;
  }
  
  .rail {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  
  .rail-btn.on {
    scroll-snap-align: center;
  }
  
  .brand {
    display: none;
  }
  .rail-spacer {
    display: none;
  }
  .rail-btn {
    
    flex: 0 0 auto;
    min-width: 68px;
    width: 68px;
    padding: 7px 4px;
    
    scroll-snap-align: center;
    
    touch-action: manipulation;
    
    user-select: none;
    -webkit-user-select: none;
  }
  .rail-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .view {
    
    padding: 14px 12px calc(86px + env(safe-area-inset-bottom));
  }
  
  .topbar {
    padding: 8px 12px;
  }
}


.spark svg { display: block; }
.bars-box { min-width: 0; }
.bars-read { min-height: 18px; margin-bottom: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bars-read b { color: var(--text); }

.bars {
  display: flex; align-items: stretch; gap: 6px; height: 130px; min-width: 0; overflow: hidden;
  padding: 8px 4px 4px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2);
}
.bar {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
}
.bar-t { position: relative; flex: 1; width: 100%; min-height: 0; }
.bar-t i {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  border-radius: 4px 4px 0 0; opacity: .85; transform-origin: 50% 100%;
}
.bar:hover .bar-t i, .bar.on .bar-t i { opacity: 1; }
.bar.on .bar-t i { box-shadow: 0 0 0 1px var(--text) inset; }
.bar-v, .bar-k { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; line-height: 1.3; }
.bar-v { font-size: 10px; color: var(--muted); }
.bar-k { font-size: 9px; color: var(--faint); margin-top: 4px; }
.bar.on .bar-k { color: var(--text); }

.bars.thin { gap: 3px; padding-left: 8px; padding-right: 8px; }

.bars.thin .bar-k { overflow: visible; }
.bars.thin .bar:first-child .bar-k { align-self: flex-start; }
.bars.thin .bar:last-child .bar-k { align-self: flex-end; }
.bars.thin .bar-v { visibility: hidden; }
.bars .bar.nolabel .bar-k { visibility: hidden; }

.bars.anim .bar-t i { animation: bar-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes bar-grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .bars.anim .bar-t i { animation: none; } }
.stale-row { background: rgba(var(--rust-rgb),.09); }
.col-picker { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.col-picker label { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.col-picker .col-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 32px; }
.col-picker .col-row label { flex: 1; min-width: 0; }
.col-picker .col-move { display: flex; gap: 4px; flex: none; }
.col-picker .col-move .btn { min-width: 34px; }


.tl-bar .tl-seg { border-right: 1px solid var(--line); }
.tl-bar .tl-seg:last-of-type { border-right: 0; }
.tl-seg + .tl-seg + .tl-seg.on { background: rgba(var(--sun-rgb),.16); box-shadow: inset 0 -2px 0 var(--sun); }
.marker .m-role { font-size: 9px; color: var(--sun); font-family: var(--mono); }


.slot-list.chips { overflow-x: hidden; }
.slot-list .chip {
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 3px;
  align-items: center;
}
.slot-list .chip > span { min-width: 0; }
.chip-marks { flex-wrap: wrap; row-gap: 3px; }
.chip .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }


.vs-day textarea { font-size: 13px; line-height: 1.45; }
table td.num.right[title] { cursor: pointer; }
table td.num.right[title]:hover { background: rgba(var(--water-rgb),.08); }


@media (max-width: 900px) {
  .toast-wrap {
    left: 10px;
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    justify-items: stretch;
  }
  .toast {
    max-width: none;
    font-size: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px var(--shadow);
  }

  
  .modal-back {
    align-items: flex-start;
    padding: 12px 12px calc(84px + env(safe-area-inset-bottom));
  }
  .modal { max-height: calc(100vh - 150px); }
}


.stale-1 td { background: rgba(var(--sun-rgb), .10); }
.stale-2 td { background: rgba(232, 128, 79, .16); }
.stale-3 td { background: rgba(var(--rust-rgb), .24); }
.stale-1 td:first-child { box-shadow: inset 3px 0 0 var(--sun); }
.stale-2 td:first-child { box-shadow: inset 3px 0 0 #e8804f; }
.stale-3 td:first-child { box-shadow: inset 3px 0 0 var(--rust); }

.kick-row td {
  background: repeating-linear-gradient(-45deg, rgba(140, 140, 150, .22) 0 6px, rgba(140, 140, 150, .08) 6px 12px);
}
.kick-row td:first-child { box-shadow: inset 3px 0 0 #8c8c96; }
.kick-cell { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kick-list { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; padding: 4px; }
.kick-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.kick-item:hover { background: rgba(140, 140, 150, .12); }
.kick-item > span:nth-child(2) { flex: 1; }


.guide-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.guide-tile { cursor: pointer; transition: border-color .15s, transform .15s; }
.guide-tile:hover { border-color: var(--water); transform: translateY(-2px); }
.guide-preview {
  max-height: 120px; overflow: hidden; position: relative;
  font-size: 13px; color: var(--muted); line-height: 1.5;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.guide-preview img, .guide-body img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.guide-body { font-size: 15px; line-height: 1.6; }
.guide-body h3 { font-size: 17px; margin: 14px 0 6px; }
.guide-body ul, .guide-body ol { padding-left: 22px; margin: 8px 0; }
.guide-body li { margin: 4px 0; }
.guide-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.tb-sep { width: 1px; height: 20px; background: var(--line); }
.guide-editor {
  min-height: 260px; max-height: 46vh; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
  background: var(--panel); font-size: 15px; line-height: 1.6;
}
.guide-editor:focus { outline: none; border-color: var(--water); }
.guide-editor img { max-width: 100%; border-radius: 8px; }


.map-viewport, .map-viewport * { touch-action: none; }
.map-viewport .marker, .map-viewport .m-nick { user-select: none; -webkit-user-select: none; }


.map-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  touch-action: none;            
  background: var(--stage);
}
.map-viewport {
  display: flex; align-items: center; justify-content: center;
}
.map-viewport .map-wrap {
  transform-origin: center center;
  transition: transform .08s linear;
  will-change: transform;
  
  width: 100%; height: auto; max-height: 100%; max-width: 100%;
  margin: 0 auto;
}
.map-viewport .map-wrap img {
  width: 100%; height: 100%; display: block; object-fit: fill;
}
.map-viewport.zoomed { cursor: grab; }
.map-viewport.grabbing { cursor: grabbing; }
.map-viewport.grabbing .map-wrap { transition: none; }
.map-btn {
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); color: var(--text);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.map-btn:hover { border-color: var(--water); }


.map-overlay-stages { display: none; }
.ov-seg {
  flex: 1; padding: 10px 8px; border: 0; border-radius: 10px;
  background: rgba(14, 20, 24, .72); color: var(--muted);
  font-family: var(--mono); font-size: 12px; cursor: pointer;
  backdrop-filter: blur(6px);
}
.ov-seg.on { background: rgba(var(--water-rgb), .28); color: #eaf7f9; }

.map-full-host:fullscreen,
.map-full-host.map-fallback-full {
  position: fixed; inset: 0; z-index: 500;
  margin: 0; border-radius: 0; padding: 10px;
  background: var(--stage); overflow: hidden;
  display: flex; flex-direction: column;
}
.map-full-host:fullscreen .map-viewport,
.map-full-host.map-fallback-full .map-viewport { flex: 1; }

.map-full-host:fullscreen .map-viewport .map-wrap,
.map-full-host.map-fallback-full .map-viewport .map-wrap {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
}
.map-full-host:fullscreen .timeline,
.map-full-host.map-fallback-full .timeline { display: none; }
.map-full-host:fullscreen .map-overlay-stages,
.map-full-host.map-fallback-full .map-overlay-stages {
  display: flex; gap: 6px;
  position: absolute; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 3;
}


.img-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px; border: 1px solid var(--water); border-radius: 10px;
  background: rgba(var(--water-rgb), .06);
}
.guide-editor img { cursor: pointer; max-width: 100%; }
.guide-editor img.picked { outline: 2px solid var(--water); outline-offset: 2px; }
.guide-body img, .guide-preview img { cursor: zoom-in; }
.g-video { max-width: 100%; margin: 8px 0; clear: both; }
.g-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; background: #000; }
.guide-editor .g-video { position: relative; padding-top: 26px; border: 1px dashed var(--line, rgba(127,127,127,.5)); border-radius: 10px; cursor: pointer; user-select: none; }
.guide-editor .g-video::before { content: '▶ YouTube'; position: absolute; top: 4px; left: 10px; font-size: 12px; opacity: .7; }
.guide-editor .g-video.picked { outline: 2px solid var(--water); outline-offset: 2px; }
.guide-body::after, .guide-preview::after { content: ''; display: block; clear: both; }


.btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 900px) {
  .btn-group { width: 100%; }
  .btn-group .btn { flex: 1 1 auto; }
}


.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-head > div { text-align: center; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
  min-height: 92px; padding: 6px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2); display: flex; flex-direction: column; gap: 4px;
}
.cal-cell.other { opacity: .45; }
.cal-cell.today { border-color: var(--water); box-shadow: inset 0 0 0 1px rgba(var(--water-rgb),.35); }
.cal-day { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cal-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-chip {
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px;
  font-size: 11px; color: var(--text); cursor: pointer; text-align: left;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip:hover { filter: brightness(1.25); }
@media (max-width: 900px) {
  .cal-cell { min-height: 68px; padding: 4px; }
  .cal-chip { font-size: 10px; padding: 2px 4px; }
}


.mascot { cursor: pointer; user-select: none; }
.login-box { position: relative; }
.mascot-corner {
  position: absolute;
  right: clamp(-6px, 1vw, 10px);
  top: clamp(-72px, -9vmin, -46px);
  width: clamp(88px, 13vmin, 132px);
  z-index: 2;
  filter: drop-shadow(0 10px 20px var(--shadow));
}
.hd-mascot { display: inline-flex; align-items: flex-end; height: 34px; }
.mascot-bar {
  width: 38px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4));
}
.mascot-bar .m-mouth { stroke-width: 5; }
.mascot-svg { width: 100%; height: auto; display: block; transition: transform .12s ease-out; }
.m-body { fill: var(--water); opacity: .88; }
.m-shine { fill: #eafcff; opacity: .35; }
.m-eye { fill: var(--ink); }
.m-mouth { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.m-shadow { fill: rgba(0, 0, 0, .35); }
.mascot:hover .m-body { opacity: 1; }
@media (max-width: 620px), (max-height: 560px) {
  .mascot-corner { width: 78px; top: -44px; right: 2px; }
  
  .hd-mascot { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  
  .mascot, .mascot * { animation: none !important; transition: none !important; }
}


.hd-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  border-radius: 999px; padding: 4px 12px 4px 6px; cursor: pointer;
  font-size: 12px; transition: border-color .15s, background .15s;
}
.hd-user-btn:hover { border-color: var(--water); background: var(--panel-3); }
.hd-caret { color: var(--muted); font-size: 10px; }
.user-menu {
  position: fixed; z-index: 250; min-width: 240px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 4px;
}
.um-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); }
.um-item {
  text-align: left; border: 0; background: transparent; color: var(--text);
  padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.um-item:hover { background: var(--panel-2); }
.um-item.danger:hover { background: rgba(var(--rust-rgb), .16); color: #f0a98f; }
.menu-mascot { width: 52px; display: inline-flex; }
.modal-mascot { width: 84px; flex: none; }
.mascot-preview { width: 120px; flex: none; }
.mascot-menu, .mascot-modal, .mascot-preview .mascot { width: 100%; }

.m-bow { fill: #ff8fc0; }
.m-bow-knot { fill: #ffd0e4; }
.m-ear { fill: currentColor; }
.m-deco { color: inherit; }
.m-blush ellipse { fill: #ff9ec4; opacity: .5; }
.m-wisp { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 3; }
.m-note-page { fill: #f3efe2; }
.m-note-line { stroke: #9a917c; stroke-width: 2; stroke-linecap: round; }


.m-steel { fill: #cfd8dc; stroke: #7d8c93; stroke-width: 2; }
.m-steel-line { stroke: #7d8c93; stroke-width: 2; fill: none; }
.m-hilt { fill: #8a5a2b; }
.m-lens { fill: rgba(180, 230, 240, .35); stroke: var(--ink); stroke-width: 3; }
.m-frame { stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; }
.m-stick { stroke: #8a5a2b; stroke-width: 5; stroke-linecap: round; fill: none; }
.m-star { fill: #ffd76a; stroke: #e9a93c; stroke-width: 1.5; }


.hd-name { font-size: 13px; color: var(--text); white-space: nowrap; }
.hd-badge { display: inline-flex; }
.role-badge {
  border: 1px solid; border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-family: var(--mono); white-space: nowrap;
}
.hd-burger {
  width: 34px; height: 30px; padding: 7px 6px; cursor: pointer;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2);
}
.hd-burger span { display: block; height: 2px; background: var(--muted); border-radius: 2px; }
.hd-burger:hover { border-color: var(--water); }
.hd-burger:hover span { background: var(--water); }
@media (max-width: 620px) {
  .hd-name { display: none; }   
}



html[data-theme="light"] {
  --void: #e9edf1;                 
  --panel: #ffffff;
  --panel-2: #f2f5f8;
  --panel-3: #e6ebf0;
  --line: #ccd6dd;
  --text: #16212a;
  --muted: #566874;
  --faint: #82929d;
  --water: #0e94a1;
  --water-dim: #0a7a85;   
  --rust: #c0421e;
  --sun: #a9761b;
  --proxy: #7046d6;
  --ok: #2b9159;
  --bar: rgba(255, 255, 255, .92);
  --rail-to: #eef2f6;
  --ink: #16212a;
  --overlay: rgba(255, 255, 255, .9);
  --stage: #dfe5ea;
  --line-soft: #dde4ea;
  --blue: #3a6fe0;
  --on-accent: #ffffff;
  --accent-hover: #086a74;
  --danger-text: #ffffff;
  --danger-bg: #c0421e;
  --danger-line: #c0421e;
  --danger-hover: #a8391a;
  --glow-a: rgba(192, 66, 30, .06);
  --glow-b: rgba(14, 148, 161, .06);
  --shadow: rgba(0, 0, 0, .18);
  --card-glow: rgba(0, 0, 0, 0);
  --water-rgb: 14, 148, 161;
  --sun-rgb: 169, 118, 27;
  --rust-rgb: 192, 66, 30;
  --ok-rgb: 43, 145, 89;
  --blue-rgb: 58, 111, 224;
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--void); }
html[data-theme="light"] .chip { background: var(--panel-2); }
html[data-theme="light"] .tag { background: var(--panel-2); }
html[data-theme="light"] .m-shadow { fill: rgba(0, 0, 0, .18); }
html[data-theme="light"] .mascot { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .18)); }
html[data-theme="light"] .guide-editor, html[data-theme="light"] textarea,
html[data-theme="light"] input, html[data-theme="light"] select { background: #ffffff; }
html[data-theme="light"] .m-note-page { fill: #fffdf5; }


html[data-theme="light"] .marker,
html[data-theme="light"] .cal-chip { color: #e6eef2; }
html[data-theme="light"] .marker {
  background: rgba(11, 17, 20, .84);
  border-color: rgba(255, 255, 255, .25);
}
html[data-theme="light"] .marker .m-name { color: #9fe8f0; }
html[data-theme="light"] .marker .m-cnt,
html[data-theme="light"] .marker .m-crew,
html[data-theme="light"] .marker .m-nick { color: #e6eef2; }
html[data-theme="light"] .m-nick { background: rgba(255, 255, 255, .14); }
html[data-theme="light"] .ov-seg { background: rgba(11, 17, 20, .72); color: #cfe3e8; }
html[data-theme="light"] .ov-seg.on { background: rgba(var(--water-rgb), .34); color: #ffffff; }
html[data-theme="light"] .map-viewport { background: #0b0f12; }
html[data-theme="light"] .cal-chip { color: var(--text); }
html[data-theme="light"] .marker { background: rgba(255, 255, 255, .9); }
html[data-theme="light"] .m-eye { fill: #17212a; }
html[data-theme="light"] .m-mouth { stroke: #17212a; }
html[data-theme="light"] .ov-seg { background: rgba(255, 255, 255, .8); }
html[data-theme="light"] .cal-chip { color: #17212a; }
html[data-theme="light"] #login {
  background:
    radial-gradient(60vw 60vh at 70% 20%, rgba(196, 68, 31, .10), transparent 60%),
    radial-gradient(50vw 50vh at 20% 90%, rgba(15, 154, 168, .10), transparent 60%), var(--void);
}


.um-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 6px 10px; font-size: 13px;
}
.um-row .btn.sm.on { border-color: var(--water); color: var(--water); }


@media (max-width: 720px) {
  .cal-head { display: none; }
  .cal-grid { display: flex; flex-direction: column; gap: 6px; }
  .cal-cell { display: none; min-height: 0; flex-direction: row; align-items: flex-start; gap: 10px; }
  .cal-cell.has-events { display: flex; }
  .cal-cell.today { display: flex; }
  .cal-day {
    flex: none; width: 62px; flex-direction: column; align-items: flex-start; gap: 2px;
    font-size: 15px; color: var(--text);
  }
  .cal-day .tag { font-size: 9px; }
  .cal-chips { flex: 1; flex-direction: column; align-items: stretch; }
  .cal-chip { font-size: 13px; padding: 7px 9px; white-space: normal; }
}
.cal-dow { display: none; color: var(--faint); font-size: 11px; }
@media (max-width: 720px) { .cal-dow { display: inline; } }


.guide-tile { position: relative; }
.guide-like {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  padding: 3px 9px; font-size: 13px; cursor: pointer; line-height: 1;
}
.guide-like:hover { border-color: #e86fa8; color: #e86fa8; }
.guide-like.on { border-color: #e86fa8; color: #e86fa8; background: rgba(232, 111, 168, .12); }


.title-badge { display: inline-flex; align-items: center; gap: 8px; }
.title-badge-img { object-fit: contain; border-radius: 8px; }
.title-badge-dot {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #0b0f12; font-weight: 700;
}
.title-badge-name { font-size: 13px; font-weight: 600; }
.award-row { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.podium {
  
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 104px;
  align-items: end;
  gap: 8px 12px;
  max-width: 640px;
  margin: 14px auto 0;
}
.podium-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; text-align: center; min-width: 0; height: 100%;
}
.podium-card.empty { opacity: .4; }
.podium-name {
  font-weight: 700; font-size: 15px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium-title { font-size: 12px; }
.podium-plate {
  align-self: end; width: 100%;
  border-radius: 10px 10px 0 0; border: 1px solid var(--line); border-bottom: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px; font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--muted);
}
.podium-plate.p1 {
  height: 104px; border-color: #e9a93c; color: #e9a93c;
  background: linear-gradient(180deg, rgba(var(--sun-rgb),.16), var(--panel-3));
}
.podium-plate.p2 {
  height: 74px; border-color: #b9c4cc; color: #b9c4cc;
  background: linear-gradient(180deg, rgba(185,196,204,.14), var(--panel-3));
}
.podium-plate.p3 {
  height: 54px; border-color: #c98c5b; color: #c98c5b;
  background: linear-gradient(180deg, rgba(201,140,91,.14), var(--panel-3));
}
@media (max-width: 620px) {
  .podium { gap: 6px; grid-template-rows: auto 76px; }
  .podium-name { font-size: 12px; }
  .podium-title { display: none; }
  .podium-plate.p1 { height: 76px; }
  .podium-plate.p2 { height: 56px; }
  .podium-plate.p3 { height: 42px; }
}
.tag-x { border: 0; background: transparent; color: inherit; cursor: pointer; margin-left: 4px; }


.last-give {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; padding: 7px 10px; font-size: 12px;
  border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2);
}


.group-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.group-bar-item { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.group-bar-item select { width: auto; max-width: min(260px, 60vw); }
.group-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.chip.busy { opacity: .7; border-style: dashed; }


.translate-pane { height: 55vh; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 720px) { .translate-pane { height: 40vh; } }


.link { cursor: pointer; border-bottom: 1px dashed var(--muted); }
.link:hover { color: var(--water); border-bottom-color: var(--water); }


.fine-box {
  margin-top: 6px; padding: 8px 10px; display: grid; gap: 6px;
  border-left: 2px solid var(--line); background: var(--panel-2); border-radius: 0 8px 8px 0;
}


.th-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.th-card.th-active { border-color: var(--water); }
.th-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; margin-top: 8px; }

.th-prev {
  background: var(--void); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; font: 12px/1.4 var(--sans);
  background-image: radial-gradient(120% 80% at 90% -20%, var(--glow-a), transparent 60%);
}
.th-prev-bar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--bar); border-bottom: 1px solid var(--line); }
.th-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--water); }
.th-prev-muted { color: var(--muted); font-size: 11px; }
.th-prev-card { margin: 8px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: calc(var(--r) - 2px); }
.th-prev-title { font-weight: 700; }
.th-prev-chips { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.th-chip { font-size: 10px; padding: 1px 6px; border-radius: 99px; border: 1px solid; background: var(--panel-2); }
.th-chip.ok { color: var(--ok); border-color: var(--ok); }
.th-chip.sun { color: var(--sun); border-color: var(--sun); }
.th-chip.rust { color: var(--rust); border-color: var(--rust); }
.th-prev-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.th-btn { font-size: 11px; padding: 2px 8px; border-radius: 6px; border: 1px solid; }
.th-btn.primary { background: var(--water-dim); border-color: var(--water); color: var(--on-accent); }
.th-btn.danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-text); }
.th-link { color: var(--water); text-decoration: underline; font-size: 11px; }
.th-editor { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; }
.th-editor-prev { position: sticky; top: 0; }
@media (max-width: 720px) { .th-editor { grid-template-columns: 1fr; } .th-editor-prev { position: static; order: -1; } }
.th-tok { display: grid; grid-template-columns: 34px minmax(140px, 190px) minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 5px; font-size: 12px; }
.th-tok input[type=color] { width: 34px; height: 30px; padding: 0; border-radius: 6px; }
.th-tok-label { display: flex; flex-direction: column; line-height: 1.25; color: var(--muted); }
.th-tok-label code { font-size: 10px; color: var(--faint); }


#sec-banner { padding: 16px 20px 0; }
#sec-banner:empty { display: none; }
.sec-banner {
  position: relative; overflow: hidden; isolation: isolate;
  
  width: 100%; min-height: clamp(130px, 22vw, 230px);
  border-radius: calc(var(--r) + 6px); border: 1px solid var(--line);
  box-shadow: 0 0 22px var(--card-glow);
  
  background:
    radial-gradient(90% 140% at 100% 0%, var(--glow-a), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, var(--glow-b), transparent 60%),
    linear-gradient(135deg, var(--panel-2), var(--panel-3));
  display: flex; flex-direction: column; justify-content: center; padding: 18px 24px;
}
.sec-banner-img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-repeat: no-repeat; }

.sec-banner.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, 0) 68%);
}
.sec-banner-title {
  margin: 0; font-weight: 900; line-height: .95; letter-spacing: -.01em;
  font-size: clamp(28px, 5.4vw, 52px);
  color: var(--sun);
  
  text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 2px 0 0 rgba(0, 0, 0, .6), -2px 0 0 rgba(0, 0, 0, .6),
    0 2px 0 rgba(0, 0, 0, .6), 0 -2px 0 rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .45);
}
.sec-banner-title .l2 { display: block; color: var(--water); }
.sec-banner-sub {
  margin-top: 8px; max-width: min(56%, 440px); font-size: 15px; line-height: 1.35;
  color: #f4fbfd; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.sec-banner:not(.has-img) .sec-banner-sub { color: var(--text); text-shadow: none; max-width: 70%; }
.sec-banner-edit { position: absolute; top: 8px; right: 8px; opacity: .85; }
@media (max-width: 620px) {
  #sec-banner { padding: 10px 10px 0; }
  .sec-banner { min-height: 128px; padding: 12px 14px; border-radius: 14px; }
  .sec-banner-sub { font-size: 13px; max-width: 62%; }
}


#sec-banner.sticky { position: sticky; top: var(--topbar-h, 55px); z-index: 15; background: var(--void); padding-bottom: 8px; }

#sec-banner-gap { height: 0; overflow-anchor: none; }
#sec-banner.sticky .sec-banner { overflow: hidden; }
#sec-banner.sticky .sec-banner-sub { opacity: calc(1 - var(--bn-p, 0) * 2); }
#sec-banner.sticky .sec-banner { animation: bn-fade .18s ease; }
#sec-banner.compact .sec-banner { animation-name: bn-fade-c; }
@keyframes bn-fade { from { opacity: .55; } }
@keyframes bn-fade-c { from { opacity: .55; } }
#sec-banner.compact .sec-banner { min-height: 58px; padding: 8px 16px; flex-direction: row; align-items: center; justify-content: flex-start; }
#sec-banner.compact .sec-banner-title { font-size: 22px; white-space: nowrap; }
#sec-banner.compact .sec-banner-title .l2 { display: inline; margin-left: .3em; }
#sec-banner.compact .sec-banner-sub { display: none; }
#sec-banner.compact .sec-banner.has-img::before { background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25)); }
@media (prefers-reduced-motion: reduce) {
  #sec-banner .sec-banner { animation: none !important; }
}


.sec-banner-title .l1, .sec-banner-title .l2 { display: block; }
.sec-banner-title.inline .l1, .sec-banner-title.inline .l2 { display: inline; }
.sec-banner-title.inline .l2 { margin-left: .25em; }

.sec-banner-title .grad {
  background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, .5); text-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}
.bn-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0;
}
.bn-swatch.on { outline: 2px solid var(--water); outline-offset: 2px; }
.bn-own { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer;
  padding: 2px 8px 2px 2px; border: 1px solid var(--line); border-radius: 99px; }
.bn-own.on { outline: 2px solid var(--water); outline-offset: 2px; }
.bn-own input[type=color] { width: 22px; height: 22px; padding: 0; border: 0; background: none; }
#sec-banner.compact .sec-banner-title .l1, #sec-banner.compact .sec-banner-title .l2 { display: inline; }
#sec-banner.compact .sec-banner-title .l2 { margin-left: .3em; }


.sec-banner-img.narrow { display: none; }
#sec-banner.compact .sec-banner-img.narrow, #bn-narrow-prev .sec-banner-img.narrow { display: block; }
#sec-banner.compact .sec-banner-img.wide.has-narrow, #bn-narrow-prev .sec-banner-img.wide.has-narrow { display: none; }

#bn-narrow-prev .sec-banner { min-height: 58px; padding: 8px 16px; flex-direction: row; align-items: center; justify-content: flex-start; }
#bn-narrow-prev .sec-banner-title { font-size: 22px; white-space: nowrap; }
#bn-narrow-prev .sec-banner-title .l1, #bn-narrow-prev .sec-banner-title .l2 { display: inline; }
#bn-narrow-prev .sec-banner-title .l2 { margin-left: .3em; }
#bn-narrow-prev .sec-banner-sub { display: none; }


.md-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.md-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.md-tile.unused { border-style: dashed; border-color: rgba(var(--rust-rgb), .5); }
.md-thumb { display: block; height: 120px; border-radius: calc(var(--r) - 4px); background: var(--panel-3) center / contain no-repeat; }
.md-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.md-where { font-size: 12px; color: var(--muted); line-height: 1.35; }
.md-where > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.access-pick { position: absolute; top: 10px; right: 12px; display: flex; gap: 6px; align-items: center; font-size: 12px; z-index: 2; }
.access-pick select { width: auto; padding: 3px 6px; font-size: 12px; }

.access-pick .access-sw { gap: 5px; cursor: pointer; flex-wrap: nowrap; color: var(--muted); }
.access-pick .switch { width: 34px; height: 20px; }
.access-pick .switch-track::after { top: 2px; left: 2px; width: 14px; height: 14px; }
.access-pick .switch input:checked + .switch-track::after { transform: translateX(14px); }
@media (max-width: 620px) { .access-pick { position: static; margin-bottom: 8px; gap: 12px; } }
.access-pick.in-spoiler { position: static; margin-bottom: 10px; gap: 12px; }


.grid > *, .row > * { min-width: 0; }
.main { overflow-x: clip; }


.modal.evp {
  position: relative; width: min(540px, 100%); padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: calc(var(--r) + 8px);
  box-shadow: 0 0 30px var(--card-glow), 0 20px 50px var(--shadow);
}
.evp .sec-banner { border: 0; border-radius: 0; box-shadow: none; min-height: 150px; }
.evp .sec-banner-edit { right: auto; left: 8px; }
.evp-x {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .45); color: #fff; font-size: 18px; cursor: pointer;
}
.evp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 14px 6px; }
.evp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px; font: inherit; text-align: left; cursor: pointer;
  color: var(--text); background: var(--panel-2); border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ev) 45%, var(--line));
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ev) 14%, transparent), transparent 55%);
}
.evp-row:hover { border-color: var(--ev); }
.evp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ev); box-shadow: 0 0 10px var(--ev); }
.evp-when { flex: none; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--panel-3); color: var(--muted); }
.evp-time { flex: none; font-size: 18px; color: var(--water); }
.evp-title { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evp-go { flex: none; color: var(--muted); font-size: 22px; line-height: 1; }
.evp-hide { gap: 8px; padding: 8px 16px 0; font-size: 14px; }
.evp-ok { display: block; width: calc(100% - 28px); margin: 12px 14px 16px; padding: 12px; font-size: 16px; border-radius: 14px; }
@media (max-width: 620px) {
  
  .evp-row {
    display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    column-gap: 8px; row-gap: 4px; padding: 10px 12px;
  }
  .evp-icon, .evp-dot { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .evp-when { grid-column: 2; grid-row: 1; }
  .evp-time { grid-column: 3; grid-row: 1; font-size: 16px; }
  .evp-tag { grid-column: 4; grid-row: 1; justify-self: start; }
  .evp-go { grid-column: 5; grid-row: 1 / 3; align-self: center; }
  .evp-title {
    grid-column: 2 / 5; grid-row: 2; font-size: 15px; line-height: 1.25;
    white-space: normal; overflow-wrap: anywhere;
  }
  .modal-back:has(> .evp) { padding: 12px; }
}
.evp-empty { display: grid; justify-items: center; gap: 4px; padding: 18px 10px; text-align: center; font-size: 14px; }


.jn-filters { flex-wrap: wrap; gap: 8px; }
.jn-search { flex: 1 1 220px; min-width: 0; max-width: 340px; }
.jn-list { border-top: 1px solid var(--line-soft); }
.jn-row {
  display: grid; grid-template-columns: 96px minmax(110px, 190px) minmax(0, 1fr); gap: 4px 14px; align-items: start;
  padding: 9px 4px; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.jn-when { color: var(--muted); font-size: 12px; padding-top: 2px; }
.jn-person { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.jn-person b { font-weight: 600; overflow-wrap: anywhere; }
.jn-nick { color: var(--water); font-size: 12px; overflow-wrap: anywhere; }
.jn-nick::before { content: '🎮 '; }
.jn-nonick { color: var(--faint); font-size: 11px; }
.jn-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 3px; }
.jn-target { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.jn-target .jn-person { flex-direction: row; gap: 6px; align-items: baseline; }
.jn-target .jn-person b { color: var(--text); }
.jn-ch { color: var(--muted); overflow-wrap: anywhere; line-height: 1.45; }
.jn-k { color: var(--text); }
.jn-from { text-decoration: line-through; text-decoration-color: rgba(var(--rust-rgb), .6); }
.jn-to { color: var(--text); font-weight: 600; }
.jn-add { color: var(--ok); margin-right: 8px; }
.jn-del { color: var(--rust); margin-right: 8px; }
.jn-old { font-size: 11px; }
.jn-what details summary { cursor: pointer; font-size: 12px; }
@media (max-width: 620px) {
  .jn-row { grid-template-columns: auto minmax(0, 1fr); }
  .jn-when { grid-row: 1; grid-column: 1; }
  .jn-who { grid-row: 1; grid-column: 2; justify-self: end; text-align: right; }
  .jn-who .jn-person { flex-direction: row; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; }
  .jn-what { grid-column: 1 / -1; }
  .jn-search { max-width: none; flex-basis: 100%; }
}


.jl-list { max-height: 480px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.jl-row {
  display: grid; grid-template-columns: 64px 64px minmax(90px, 160px) minmax(0, 1fr); gap: 8px; align-items: start;
  padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12px; border-left: 3px solid transparent;
}
.jl-row.t-rust { border-left-color: var(--rust); }
.jl-row.t-sun { border-left-color: var(--sun); }
.jl-row.t-blue { border-left-color: var(--blue); }
.jl-kind { font-weight: 700; }
.jl-row.t-rust .jl-kind { color: var(--rust); }
.jl-row.t-sun .jl-kind { color: var(--sun); }
.jl-row.t-blue .jl-kind { color: var(--blue); }
.jl-who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-what { word-break: break-word; }
@media (max-width: 620px) { .jl-row { grid-template-columns: 56px 56px minmax(0, 1fr); } .jl-who { grid-column: 3; } .jl-what { grid-column: 1 / -1; } }

.evp-row.past { opacity: .5; border-color: var(--line); background-image: none; }
.evp-row.past .evp-dot { background: var(--faint); box-shadow: none; }
.evp-row.past .evp-time { color: var(--muted); }
.evp-tag { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--panel-3); color: var(--faint); }
.evp-tag.live { color: var(--ev); background: color-mix(in srgb, var(--ev) 18%, transparent); font-weight: 700; }


.cal-cell.has-bg { position: relative; overflow: hidden; isolation: isolate; }
.cal-bg { position: absolute; inset: 0; z-index: -1; }
.cal-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; }

.cal-bg-layer.diag-a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.cal-bg-layer.diag-b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cal-bg-seam { position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 1px), rgba(255, 255, 255, .55) 50%, transparent calc(50% + 1px)); }

.cal-bg.strips { display: flex; }
.cal-bg.strips .cal-bg-layer { position: relative; flex: 1; border-right: 1px solid rgba(255, 255, 255, .35); }

.cal-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .6)); }
.cal-cell.has-bg .cal-day { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.cal-cell.has-bg .cal-chip { background: rgba(0, 0, 0, .55) !important; color: #fff; backdrop-filter: blur(2px); }
.ev-cover { width: 100%; aspect-ratio: 16 / 7; border-radius: var(--r); background: var(--panel-3) center / cover no-repeat; }
.ev-cover.small { width: 180px; aspect-ratio: 16 / 9; flex: none; display: grid; place-items: center; font-size: 11px; color: var(--faint); border: 1px dashed var(--line); }
@media (max-width: 720px) { .cal-cell.has-bg { min-height: 64px; } }


.ev-preview { border: 1px dashed var(--line); border-radius: var(--r); padding: 12px; background: var(--panel); }
.ev-preview-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.ev-img-missing { margin: 6px 0; padding: 12px; border: 1px dashed rgba(var(--sun-rgb), .6); border-radius: 8px; color: var(--sun); font-size: 13px; }
.ev-version { max-height: 180px; overflow: auto; font-size: 13px; }
.ev-version img { max-width: 160px !important; }


.pk-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); max-height: 60vh; overflow: auto; }
.pk-tile { display: flex; flex-direction: column; gap: 4px; padding: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); }
.pk-tile:hover { border-color: var(--water); }
.pk-thumb { display: block; height: 90px; border-radius: 6px; background: var(--panel-3) center / contain no-repeat; }
.pk-where { font-size: 11px; color: var(--muted); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pk-size { font-size: 10px; color: var(--faint); }
.md-dupes { display: grid; gap: 14px; }
.md-dupe { padding: 10px; border: 1px dashed var(--line); border-radius: var(--r); }
.md-grid > .md-dupes, .md-grid > .hint, .md-grid > .empty { grid-column: 1 / -1; }


.ev-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; object-fit: contain; margin-right: 4px; }
.cal-chip .ev-icon { margin-right: 5px; vertical-align: -2px; }
.ev-icon-box { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-3); }
.ev-icon-box .ev-icon { margin: 0; }
.ev-dot { width: 10px; height: 10px; border-radius: 50%; }
.ev-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-icon-pick { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2);
  font-size: 20px; cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.ev-icon-pick.on { border-color: var(--water); box-shadow: 0 0 0 2px rgba(var(--water-rgb), .35); }
.evp-icon { flex: none; width: 26px; height: 26px; font-size: 22px; line-height: 26px; text-align: center; object-fit: contain; }
.evp-row.past .evp-icon { filter: grayscale(1); }


.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; cursor: pointer; vertical-align: middle; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .2s, background .2s; }
.switch input:checked + .switch-track { background: rgba(var(--water-rgb), .35); border-color: var(--water); }
.switch input:checked + .switch-track::after { transform: translateX(20px); background: var(--water); box-shadow: 0 0 8px rgba(var(--water-rgb), .7); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--water); outline-offset: 2px; }
@media (max-width: 720px) { .cal-chip .ev-icon { font-size: 18px !important; width: 20px !important; height: 20px !important; } }


.sec-banner-title .grad {
  padding: .06em .04em .16em;
  margin: -.06em -.04em -.16em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.bn-swatch.grad { width: 30px; height: 30px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .35); }


.cal-bg-layer { overflow: hidden; }
.cal-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cal-bg.strips .cal-bg-layer { overflow: hidden; }

.cal-chip.tinted {
  background: color-mix(in srgb, var(--ev) 26%, var(--panel-2)) !important;
  border: 1px solid var(--ev) !important; color: var(--text);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ev) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--ev) 18%, transparent);
}
.cal-chip.tinted .mono { color: color-mix(in srgb, var(--ev) 70%, #fff); font-weight: 700; }
.cal-cell.has-bg .cal-chip.tinted { background: color-mix(in srgb, var(--ev) 38%, rgba(0, 0, 0, .55)) !important; }

.ev-cell-prev { width: 220px; min-height: 90px; flex: none; }


.hd-who { display: inline-flex; align-items: center; gap: 10px; }
.hd-logo { width: auto; max-width: 180px; object-fit: contain; flex: none; }
.topbar .lay-off, .topbar .lay-hidden-by-banner { display: none !important; }
@media (max-width: 620px) { .hd-logo { max-height: 30px; } .hd-who .hd-name { display: none; } }
.lay-list { display: grid; gap: 6px; }
.lay-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.lay-row.off { opacity: .55; }
.lay-row .lay-name { flex: 1; min-width: 0; }

.pause-row { display: grid; grid-template-columns: auto 150px auto 150px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 12px; }
.pause-row input[type=date] { width: 100%; }
.tag.pause-now { color: var(--sun); border-color: rgba(var(--sun-rgb), .6); }
@media (max-width: 620px) { .pause-row { grid-template-columns: auto 1fr auto 1fr auto; } .pause-row input[type=text] { grid-column: 1 / -1; grid-row: 2; } }

.ly-schema { display: flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 46px; border: 1px dashed var(--line);
  border-radius: var(--r); background: var(--bar); overflow-x: auto; }
.ly-chip { flex: none; font-size: 18px; padding: 2px 8px; border-radius: 8px; background: var(--panel-3); border: 1px solid var(--line); }
.ly-chip-logo { flex: none; width: auto; object-fit: contain; }
.ly-sp { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--line); align-self: center; }

.topbar .phase { white-space: nowrap; }
@media (max-width: 620px) { .topbar .phase { font-size: 10px; padding: 4px 8px; letter-spacing: .04em; } }
@media (max-width: 620px) { .topbar { gap: 8px; } .topbar h1 { font-size: 12px; letter-spacing: .08em; } }

.topbar > * { flex-shrink: 0; }
.topbar .sep { flex-shrink: 1; min-width: 0; }
.topbar h1 { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .phase { flex-shrink: 1; min-width: 0; max-width: max-content; }
.topbar .phase .dot { flex: none; }
#hd-phase-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase .ph-short { display: none; }
@media (max-width: 620px) {
  .topbar .phase .ph-wd { display: none; }     
  .topbar .phase .ph-full { display: none; }
  .topbar .phase .ph-short { display: inline; }
}

@media (max-width: 400px) {
  .topbar { gap: 6px; padding-left: 8px !important; padding-right: 8px !important; }
  .topbar .phase { padding: 3px 6px; letter-spacing: 0; }
  .topbar .btn.sm { padding: 4px 7px; }
  .topbar .hd-who { gap: 6px; }
}

@media (max-width: 480px) { .topbar .hd-badge { display: none; } }


.sec-banner-title { text-shadow: none; }
.sec-banner-title .l1, .sec-banner-title .l2 {
  filter:
    drop-shadow(0 0 .6px rgba(0, 0, 0, .95))
    drop-shadow(0 0 .8px rgba(0, 0, 0, .9))
    drop-shadow(0 2px 0 rgba(0, 0, 0, .55))
    drop-shadow(0 5px 10px rgba(0, 0, 0, .35));
}
.sec-banner-title .grad { -webkit-text-stroke: 0; }


.cal-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px; }
.cal-mode-hint { font-size: 12px; }
.only-m { display: none; }
@media (min-width: 721px) {
  .cal-compact .cal-cell.out-d { display: none; }
}
@media (max-width: 720px) {
  .only-m { display: inline; }
  .only-d { display: none; }
  
  .cal-compact .cal-cell.out-m { display: none !important; }
  .cal-compact .cal-cell.in-win { display: flex; }
}


.season-banner { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid rgba(var(--sun-rgb), .55); border-radius: var(--r); background: rgba(var(--sun-rgb), .1); }
.season-ico { font-size: 28px; line-height: 1; }


.rail-btn { position: relative; }
.ch-badge { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--water); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.ch-badge.mention { background: var(--sun); color: #1a1208; }
.ch-wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; height: calc(100vh - 150px); min-height: 480px; }
.ch-side { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ch-main { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; position: relative; }
.ch-room, .ch-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 10px; font: inherit;
  color: var(--text); background: transparent; border: 1px solid transparent; cursor: pointer; text-align: left; }
.ch-room:hover, .ch-person:hover { background: var(--panel-2); }
.ch-room.on { background: rgba(var(--water-rgb), .14); border-color: rgba(var(--water-rgb), .5); }
.ch-room-ico { width: 28px; text-align: center; font-size: 18px; }

.ch-room-hash { font-weight: 700; color: var(--muted, #8a93a6); font-size: 19px; }
.ch-room-home { flex: none; font-size: 12px; opacity: .75; }
.ch-room-pin { flex: none; font-size: 11px; opacity: .8; }
.ch-room-mute { flex: none; font-size: 13px; opacity: .8; }

.ch-dm-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.vc-arow input.chan-ico-in { flex: none; width: 44px; text-align: center; padding-left: 4px; padding-right: 4px; }
.ch-room-name, .ch-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-person-name { display: flex; flex-direction: column; line-height: 1.2; }
.ch-person-st { font-size: 11px; color: var(--faint); }
.ch-person-st.on { color: var(--ok); }
.ch-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--water); color: var(--on-accent);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ch-unread.mention { background: var(--sun); color: #1a1208; }
.ch-online-n { color: var(--ok); }
.ch-people { display: flex; flex-direction: column; gap: 2px; }
.ch-ava { position: relative; flex: none; border-radius: 50%; overflow: visible; display: inline-block; }
.ch-ava img, .ch-ava-letter { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  color: #fff; font-weight: 700; border: 2px solid var(--line); box-sizing: border-box; }
.ch-ava.on::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 8px; min-height: 8px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--panel); }
.ch-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ch-side-btn { display: none; }
.ch-title { font-size: 15px; }
.ch-pinned { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(var(--sun-rgb), .55); background: rgba(var(--sun-rgb), .1); cursor: pointer; }
.ch-pin-ico { font-size: 20px; }
.ch-pin-body { flex: 1; min-width: 0; }
.ch-pin-t { font-size: 11px; color: var(--sun); }
.ch-pin-x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.ch-msg { display: flex; gap: 10px; align-items: flex-start; }

@supports (overflow-anchor: auto) and (content-visibility: auto) {
  #ch-list > .ch-msg.ch-far { content-visibility: auto; contain-intrinsic-size: auto 120px; }
}

.ch-msg.ch-sending { opacity: .6; pointer-events: none; }
.ch-msg.ch-sending .ch-ticks, .ch-msg.ch-sending .ch-react.add, .ch-msg.ch-sending .ch-more { visibility: hidden; }
.ch-msg.mentioned .ch-body { box-shadow: inset 3px 0 0 var(--sun); }
.ch-msg.deleted { opacity: .55; }
.ch-body { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.ch-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ch-name { color: var(--water); cursor: pointer; }

.ch-meta { min-width: 0; }
.ch-meta .ch-name:not(:has(.ch-gtag)) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-meta .ch-badge-role, .ch-meta .ch-time { flex: none; white-space: nowrap; }
.ch-time { color: var(--faint); font-size: 11px; }

.ch-day { display: flex; justify-content: center; pointer-events: none; }

.ch-daynow { position: absolute; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.ch-daynow.show { opacity: 1; }
.ch-day span, .ch-daynow span { background: var(--panel); border: 1px solid var(--line); color: var(--faint); font-size: 12px; padding: 2px 12px; border-radius: 999px; }
.ch-edited { color: var(--faint); font-size: 11px; font-style: italic; opacity: .8; }
.ch-editing { border-left-color: var(--accent, #e6b422); }
.ch-more { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.ch-text { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }

.ch-trnote { color: var(--faint); font-size: 11px; margin-top: 3px; white-space: normal; }
.ch-trbtn { background: none; border: 0; padding: 0; color: var(--water); font: inherit; cursor: pointer; text-decoration: underline dotted; }
.tk-trbtn { text-decoration: none; margin-left: 2px; font-size: 0.9em; opacity: .8; }
.tk-trbtn:hover { opacity: 1; }
.tk-trbtn:disabled { cursor: default; }
.ch-pop.tk-pop { z-index: 1300; }
.tr-globe { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.ch-mention { color: var(--water); font-weight: 600; }
.ch-mention.me { color: #1a1208; background: var(--sun); border-radius: 4px; padding: 0 3px; }
.ch-quote { margin: 4px 0; padding: 4px 8px; border-left: 3px solid var(--water); background: var(--panel-3); border-radius: 6px; font-size: 12px;
  color: var(--muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-img { display: block; max-width: min(360px, 100%); max-height: 280px; margin-top: 6px; border-radius: 10px; cursor: zoom-in; object-fit: cover; }
.ch-audio { margin-top: 6px; padding: 8px; border-radius: 10px; background: var(--panel-3); border: 1px solid var(--line); display: grid; gap: 4px; }
.ch-audio audio { width: 100%; height: 36px; }
.ch-audio-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.ch-ticks { margin-left: auto; align-self: flex-end; padding-left: 8px; display: inline-flex; color: var(--faint); user-select: none; }
.ch-ticks svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ch-ticks.read { color: var(--water); }
.ch-react { font: inherit; font-size: 13px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-3);
  color: var(--text); cursor: pointer; }
.ch-react.on { border-color: var(--water); background: rgba(var(--water-rgb), .18); }
.ch-react.add { color: var(--muted); }
.ch-pop { position: fixed; z-index: 90; display: flex; flex-direction: column; min-width: 180px; padding: 4px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px var(--shadow); }
.ch-pop.row { flex-direction: row; flex-wrap: wrap; min-width: 0; max-width: 260px; }
.ch-pop button { font: inherit; text-align: left; padding: 8px 10px; background: none; border: 0; border-radius: 8px; color: var(--text); cursor: pointer; }
.ch-pop.row button { font-size: 20px; padding: 6px; }
.ch-pop button:hover { background: var(--panel-2); }

@media (pointer: coarse) {
  .ch-msg .ch-body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .ch-msg .ch-body img, .ch-msg .ch-body a { -webkit-touch-callout: default; }
  .ch-msg .ch-body input, .ch-msg .ch-body textarea { -webkit-user-select: text; user-select: text; }
}
.ch-text strong { font-weight: 700; }
.ch-text em { font-style: italic; }
.ch-text s { text-decoration: line-through; }

.ch-smile { width: 1.5em; height: 1.5em; vertical-align: -0.4em; object-fit: contain; }
.ch-emo { font-size: 1.3em; line-height: 1; vertical-align: -0.1em; }

.ch-text.big-smile { line-height: 1.1; }
.ch-text.big-smile .ch-smile { width: 60px; height: 60px; vertical-align: middle; }
.ch-text.big-smile .ch-emo { font-size: 50px; vertical-align: middle; }
.ch-emoji .ch-smile { width: 1.05em; height: 1.05em; vertical-align: middle; }
.ch-emoji .ch-emo { font-size: 1em; vertical-align: middle; }
.ch-fmt { position: fixed; z-index: 95; display: flex; gap: 2px; padding: 4px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px var(--shadow); }
.ch-fmt button { font: inherit; font-size: 16px; min-width: 40px; height: 36px; padding: 0 10px; background: none; border: 0; border-radius: 8px;
  color: var(--text); cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.ch-fmt button:hover { background: var(--panel-2); }
.ch-fmt .ch-fmt-b { font-weight: 800; }
.ch-fmt .ch-fmt-i { font-style: italic; font-family: Georgia, serif; }
.ch-fmt .ch-fmt-s { text-decoration: line-through; }
.ch-fmt .ch-fmt-c { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
#ch-compose { padding: 8px 14px 4px; border-top: 1px solid var(--line); }
.ch-compose { display: flex; gap: 8px; align-items: flex-end; }
.ch-compose textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; border-radius: 12px; }
.ch-send { min-width: 52px; font-size: 18px; border-radius: 12px; }

.ch-send { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ch-suggest .ch-sug-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 14px; }
.ch-replying { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; padding: 4px 8px; border-left: 3px solid var(--water);
  background: var(--panel-2); border-radius: 6px; }
.ch-attach { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ch-attach:empty { display: none; }
.ch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; }
.ch-chip img { height: 44px; border-radius: 6px; }
.ch-chip.ch-chip-gif img { height: 90px; max-width: 160px; object-fit: cover; }
.ch-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; }
.ch-suggest { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ch-suggest button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 3px 8px 3px 3px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.ch-foot { font-size: 11px; text-align: center; padding: 4px 10px 8px; }
.ch-lightbox { display: grid; place-items: center; cursor: zoom-out; }
.ch-lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 10px; }
.ch-ava img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ch-ava.zoom { cursor: zoom-in; }
.ch-ava-view figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.ch-ava-view img { width: min(80vw, 70vh, 420px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55); animation: ch-ava-pop .16s ease-out; }
.ch-ava-view figcaption { color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); display: flex; gap: 6px; align-items: center; }
@keyframes ch-ava-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; max-height: 260px; overflow: auto; }
@media (max-width: 900px) {
  .ch-wrap { grid-template-columns: 1fr; height: calc(100dvh - 190px); }
  .ch-side { display: none; }
  .ch-wrap.side-open .ch-side { display: flex; position: fixed; inset: 60px 10px 90px; z-index: 40; box-shadow: 0 20px 60px var(--shadow); }
  .ch-side-btn { display: inline-flex; }
}
.ch-readonly { padding: 10px 4px; font-size: 12px; text-align: center; }
.ch-person.me { cursor: default; background: var(--panel-2); }
.ch-as { gap: 6px; align-items: center; }
.ch-as select { padding: 3px 6px; font-size: 12px; }
@media (max-width: 620px) { .ch-me-nick { display: none; } }


@media (max-width: 900px) {
  
  html.chat-lock, html.chat-lock body { overflow: hidden; overscroll-behavior: none; }
  :is(#view-chat, #gm-chat-root).on { padding: 0; }
  :is(#view-chat, #gm-chat-root) .ch-wrap { gap: 0; min-height: 0; height: calc(100dvh - 190px); }
  :is(#view-chat, #gm-chat-root) .ch-main {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  :is(#view-chat, #gm-chat-root) .ch-head { padding: 8px 10px; background: var(--bar); position: relative; z-index: 2; }
  :is(#view-chat, #gm-chat-root) .ch-pinned { margin: 6px 8px 0; }
  :is(#view-chat, #gm-chat-root) .ch-list { padding: 10px 8px; gap: 10px; overscroll-behavior: contain; }
  :is(#view-chat, #gm-chat-root) .ch-body { border-radius: 4px 12px 12px 12px; }
  :is(#view-chat, #gm-chat-root) #ch-compose { padding: 6px 8px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--bar); }
  :is(#view-chat, #gm-chat-root) .ch-compose { gap: 6px; }
  :is(#view-chat, #gm-chat-root) .ch-compose .btn.ghost { padding: 8px 10px; }
  :is(#view-chat, #gm-chat-root) .ch-foot { display: none; }             
  :is(#view-chat, #gm-chat-root) .ch-wrap.side-open .ch-side { inset: 56px 8px 80px; }
}
.ch-side-ttl { display: none; font-size: 11px; margin: 2px 0 6px; }
@media (max-width: 900px) { .ch-side-ttl { display: block; } }
.lay-tab { padding: 6px 10px; }
.lay-tab-ico svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.6; }
.ch-badge-role { font-size: 12px; margin-left: 4px; cursor: default; }

.ch-react { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ch-who { min-width: 170px; max-height: 50vh; overflow-y: auto; padding: 6px; }
.ch-who-head { font-weight: 700; padding: 4px 6px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ch-who-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; }
.ch-person-wrap { display: flex; align-items: center; }
.ch-person-wrap .ch-person, .ch-person-wrap .ch-room { flex: 1; min-width: 0; }
.ch-icon-btn { flex: none; background: none; border: 0; cursor: pointer; font-size: 14px; opacity: .45; padding: 4px; }
.ch-icon-btn:hover { opacity: 1; }
.ch-badge-role.own { font-size: 14px; }

.ch-gtag { font-size: var(--gtag-size, 100%); opacity: var(--gtag-op, 1); }
.ch-icon-prev { display: flex; align-items: center; gap: 8px; }



.rail { overflow: hidden; }
.brand.lay-off { display: none; }
.rail-pins { display: none; flex-direction: column; align-items: center; gap: 4px; width: 100%; flex: none;
  padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.rail-pins.on { display: flex; }
.rail-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.rail-scroll:hover { scrollbar-color: var(--line) transparent; }
.rail-scroll::-webkit-scrollbar { width: 6px; }
@media (max-width: 900px) {
  .rail { overflow: hidden !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .rail-pins { flex-direction: row; width: auto; padding: 0 4px 0 0; margin: 0 2px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .rail-scroll {
    flex-direction: row; align-items: center; width: auto; min-width: 0; min-height: auto;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-behavior: smooth; touch-action: pan-x;
    scrollbar-width: none;
    
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .rail-scroll::-webkit-scrollbar { display: none; }
}


.ch-typing { height: 0; overflow: hidden; padding: 0 16px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px;
  transition: height .15s; }
.ch-typing.on { height: 22px; }

@media (min-width: 901px) { .ch-typing { height: 22px; transition: none; } }
.ch-ty-voice { display: inline-flex; align-items: center; gap: 4px; }
.ch-ty-mic { display: inline-flex; color: var(--water); }
.ch-ty-mic .ch-ico { width: 14px; height: 14px; stroke-width: 2.2; }
.ch-dots { display: inline-flex; gap: 3px; }
.ch-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--water); opacity: .3; animation: ch-dot 1.2s infinite; }
.ch-dots i:nth-child(2) { animation-delay: .2s; }
.ch-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ch-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.podium-ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); margin: 0 auto 4px; display: block; }
.podium-card.p1 .podium-ava { width: 68px; height: 68px; border-color: var(--sun); }
.ava-prev { display: grid; place-items: center; }
.ava-prev img, .ava-none { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.ava-prev .ava-crop img { width: auto; height: auto; border-radius: 0; border: 0; object-fit: fill; }

.ava-crop { display: grid; gap: 8px; justify-items: center; width: 100%; }
.ava-crop-view { position: relative; width: 240px; height: 240px; overflow: hidden; border-radius: 12px; background: var(--stage);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; border: 1px solid var(--line); }
.ava-crop-view.grab { cursor: grabbing; }
.ava-crop-view:focus-visible { box-shadow: 0 0 0 2px var(--water); }
.ava-crop-img { position: absolute; left: 0; top: 0; max-width: none !important; max-height: none !important; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.ava-crop-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 200px rgba(0, 0, 0, .45); outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px; }
.ava-crop-bar { display: flex; align-items: center; gap: 6px; width: 240px; }
.ava-crop-bar input[type=range] { flex: 1; min-width: 0; }
.ava-crop-bar .btn { min-width: 32px; padding-left: 0; padding-right: 0; justify-content: center; }
.ava-crop-tip { font-size: 11px; text-align: center; max-width: 260px; }
.ava-none { display: grid; place-items: center; font-size: 48px; background: var(--panel-2); }


.ch-main, .ch-body, .ch-msg, .ch-list, .ch-compose textarea { min-width: 0; }
.ch-body { overflow-wrap: anywhere; }
.ch-audio, .ch-audio iframe, .ch-img { max-width: 100%; }
@media (max-width: 900px) {
  :is(#view-chat, #gm-chat-root), :is(#view-chat, #gm-chat-root) .ch-wrap, :is(#view-chat, #gm-chat-root) .ch-main { max-width: 100vw; overflow-x: hidden; }
  :is(#view-chat, #gm-chat-root) .ch-head { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  :is(#view-chat, #gm-chat-root) .ch-head .ch-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(#view-chat, #gm-chat-root) .ch-head .btn.sm { padding: 5px 7px; flex: none; }
  :is(#view-chat, #gm-chat-root) .ch-as > span { display: none; }                 
  :is(#view-chat, #gm-chat-root) .ch-msg { gap: 6px; }
  :is(#view-chat, #gm-chat-root) .ch-msg > .ch-ava { width: 32px !important; height: 32px !important; }
  :is(#view-chat, #gm-chat-root) .ch-body { padding: 6px 9px; }
  :is(#view-chat, #gm-chat-root) .ch-compose .btn.ghost { padding: 8px; min-width: 0; }
  :is(#view-chat, #gm-chat-root) .ch-send { min-width: 44px; }
}
@media (max-width: 400px) {
  :is(#view-chat, #gm-chat-root) .ch-head .faint { display: none; }             
}

@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px !important; }
}


.ch-game { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--water-rgb), .12), rgba(var(--sun-rgb), .08)); border: 1px solid var(--line); }
.ch-game.king-end, .ch-game.king-penalty { border-color: rgba(var(--sun-rgb), .6); background: linear-gradient(135deg, rgba(var(--sun-rgb), .18), rgba(var(--water-rgb), .06)); }
.ch-game-ico { font-size: 28px; line-height: 1; flex: none; }
.ch-game-body { min-width: 0; }
.ch-game-big { font-size: 22px; font-weight: 800; color: var(--sun); }
.ch-game-role { margin-top: 4px; font-weight: 700; }
.ch-game-role.king { color: var(--sun); }
.ch-game-role.loser { color: var(--rust); }
.ch-die { font-size: 46px; line-height: 1; flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; }
.ch-die.num { font-size: 22px; font-weight: 800; border-radius: 12px; background: var(--panel-3); border: 2px solid var(--water); color: var(--text); }
.ch-die.rolling { animation: ch-die-shake .14s linear infinite; }
.ch-die.landed { animation: ch-die-land .35s ease-out; }
@keyframes ch-die-shake { 0% { transform: rotate(-12deg) translateY(-2px); } 50% { transform: rotate(12deg) translateY(2px); } 100% { transform: rotate(-12deg) translateY(-2px); } }
@keyframes ch-die-land { 0% { transform: scale(1.35); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.ch-game.rps-result { display: grid; grid-template-columns: 1fr auto 1fr; text-align: center; gap: 6px; }
.ch-rps-side { opacity: .85; }
.ch-rps-side.win { opacity: 1; font-weight: 700; }
.ch-rps-side.lose { opacity: .5; }
.ch-rps-move { font-size: 36px; }
.ch-rps-vs { align-self: center; font-weight: 800; color: var(--muted); }
.ch-rps-res { grid-column: 1 / -1; font-weight: 700; color: var(--sun); }
.ch-rps-pick { max-width: 360px; }
.ch-rps-title { text-align: center; font-weight: 700; margin-bottom: 10px; }
.ch-rps-btn { display: grid; gap: 4px; place-items: center; width: 92px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.ch-rps-btn span { font-size: 40px; line-height: 1; }
.ch-rps-btn:hover { border-color: var(--water); background: rgba(var(--water-rgb), .12); }
.ch-games { display: grid; gap: 12px; }
.ch-games-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ch-games-card.king { border-color: rgba(var(--sun-rgb), .5); }
.ch-games-h { font-weight: 700; font-size: 15px; }
.ch-games-ppl { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-games-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--panel-3); font-size: 13px; }
.ch-games-p.king { background: rgba(var(--sun-rgb), .2); }
.ch-games-p.loser { background: rgba(var(--rust-rgb, 216, 85, 47), .2); }
.ch-king-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(var(--sun-rgb), .14); font-size: 13px; }
.ch-lost { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 14px 0; padding: 6px 10px; border-radius: 10px;
  background: rgba(var(--sun-rgb), .12); border: 1px dashed rgba(var(--sun-rgb), .6); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ch-die.rolling, .ch-die.landed { animation: none; } }


.ch-media-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); max-height: 62vh; overflow: auto; }
.ch-media-tile { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }

.ch-media-tile > img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.ch-media-meta .ch-ava { flex: none; }
.ch-media-list { display: grid; gap: 6px; max-height: 62vh; overflow: auto; }
.ch-media-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.ch-media-ico { font-size: 20px; flex: none; }
.ch-media-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ch-media-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 2px; }
.ch-flash { animation: ch-flash 1.6s ease-out; }
@keyframes ch-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(var(--sun-rgb), .7); border-radius: 12px; } 100% { box-shadow: none; } }
@media (max-width: 400px) { :is(#view-chat, #gm-chat-root) .ch-head .btn.sm { padding: 4px 5px; } }
.ch-person-st.play { color: var(--sun); }
.ch-ava.play::after { background: var(--sun); }

.ch-media-meta .ch-ava::after, .ch-who-row .ch-ava::after, .ch-suggest .ch-ava::after { display: none; }

.ch-game.king-invite { border-color: rgba(var(--sun-rgb), .65); background: linear-gradient(135deg, rgba(var(--sun-rgb), .2), rgba(var(--water-rgb), .08)); }
.ch-game.king-invite.over { opacity: .6; background: var(--panel-2); border-color: var(--line); }
.ch-pin-game { flex: 1; min-width: 0; }
.ch-pin-game .btn.sm { padding: 3px 9px; font-size: 12px; }


.ch-coins { color: var(--sun); font-weight: 700; white-space: nowrap; }
.ch-game.ch-duel { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; border-color: rgba(var(--water-rgb), .45);
  background: linear-gradient(110deg, rgba(40, 110, 255, .22) 0%, rgba(10, 20, 40, .2) 48%, rgba(10, 20, 40, .2) 52%, rgba(255, 50, 60, .22) 100%), var(--panel-2); }
.ch-duel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(0, 0, 0, .25); border-bottom: 1px solid var(--line); }
.ch-duel-head b { font-size: 16px; }
.ch-duel-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; padding: 4px 10px; }
.ch-duel-p { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ch-duel-p .ch-ava { box-shadow: 0 0 0 3px rgba(80, 150, 255, .7), 0 0 18px rgba(80, 150, 255, .5); border-radius: 50%; }
.ch-duel-p.b .ch-ava { box-shadow: 0 0 0 3px rgba(255, 70, 80, .7), 0 0 18px rgba(255, 70, 80, .5); }
.ch-duel-p.win .ch-ava { box-shadow: 0 0 0 3px var(--sun), 0 0 22px rgba(var(--sun-rgb), .8); }
.ch-duel-empty { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; border: 2px dashed var(--line); color: var(--muted); }
.ch-duel-name { font-weight: 700; }
.ch-duel-vs { display: grid; justify-items: center; align-self: center; }
.ch-duel-vs-t { font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: -2px;
  background: linear-gradient(90deg, #6fb2ff, #ffffff 50%, #ff6b6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-duel-score { font-size: 20px; font-weight: 800; color: var(--sun); }
.ch-duel-dice { display: flex; gap: 6px; }
.ch-duel-die { font-size: 38px; line-height: 1; filter: drop-shadow(0 0 6px rgba(80, 150, 255, .7)); }
.ch-duel-dice.b .ch-duel-die { filter: drop-shadow(0 0 6px rgba(255, 70, 80, .7)); }
.ch-duel-die.wait { font-size: 22px; color: var(--muted); width: 38px; height: 38px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; filter: none; }
.ch-duel-die.rolling { animation: ch-die-shake .14s linear infinite; }
.ch-duel-die.landed { animation: ch-die-land .35s ease-out; }
.ch-duel-sum { font-weight: 800; font-size: 15px; }
.ch-duel-status { text-align: center; padding: 6px 10px; margin: 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); font-weight: 600; }
.ch-duel-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 12px; }
.ch-duel-roll { font-size: 16px; padding: 10px 22px; }
.ch-game.ch-duel.st-done .ch-duel-status { border-color: rgba(var(--sun-rgb), .7); color: var(--sun); }
.ch-game.ch-duel.st-expired, .ch-game.ch-duel.st-cancelled { opacity: .6; }
.ch-games-card.duel { border-color: rgba(var(--sun-rgb), .5); }
@media (max-width: 420px) { .ch-duel-die { font-size: 30px; } .ch-duel-vs-t { font-size: 26px; } .ch-duel-p .ch-ava { width: 46px !important; height: 46px !important; } }


.ch-body { flex: 0 1 auto; width: fit-content; max-width: min(640px, 100%); }
.ch-msg.wide .ch-body { width: min(560px, 100%); }
.ch-msg.wide .ch-game.ch-duel { width: 100%; }

.ch-list.dm-sides .ch-msg.mine { flex-direction: row-reverse; }
.ch-list.dm-sides .ch-msg.mine .ch-body { border-radius: 14px 4px 14px 14px; background: rgba(var(--water-rgb), .1); border-color: rgba(var(--water-rgb), .28); }
.ch-list.dm-sides .ch-msg:not(.mine) .ch-body { margin-right: 24px; }
.ch-list.dm-sides .ch-msg.mine .ch-body { margin-left: 24px; }

.ch-mypts { font-size: 13px; cursor: pointer; padding: 2px 8px; border-radius: 99px; background: rgba(var(--sun-rgb), .12); }
.ch-duel-bal { font-size: 12px; color: var(--sun); font-weight: 600; }
.ch-pts-list { display: grid; gap: 4px; max-height: 46vh; overflow: auto; }
.ch-pts-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: var(--panel-3); }
.ch-cpair { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--panel-3); }
.ch-cpair input { padding: 4px 8px; }
.ch-pts-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) { .ch-pts-row .btn.sm.ghost { display: none; } }

.pa { display: grid; gap: 10px; }
.pa-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel-3); }
.pa-tab { flex: 1; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pa-tab.on { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px rgba(var(--water-rgb), .45); }
.pa-tools { display: grid; gap: 8px; position: sticky; top: 0; z-index: 2; padding: 6px 0; background: var(--panel); }
.pa-search { width: 100%; }
.pa-amtrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-amt { width: 92px; }
.pa-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pa-rows { display: grid; gap: 4px; }
.pa-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--panel-3); }
.pa-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-bal { font-weight: 700; white-space: nowrap; color: var(--sun); background: none; border: 0; font: inherit; font-weight: 700; padding: 0 2px; cursor: pointer; }
.pa-minus { opacity: .85; }
.pa-group { display: grid; gap: 4px; }
.pa-group > .pa-row { cursor: pointer; }
.pa-group.open > .pa-row { box-shadow: 0 0 0 1px rgba(var(--water-rgb), .4); }
.pa-caret { width: 14px; text-align: center; color: var(--muted); }
.pa-sub { display: grid; gap: 4px; margin-left: 18px; }
.pa-sub .pa-row { background: rgba(var(--water-rgb), .06); }
.pa-all { border: 1px dashed var(--line); }
.pa-mass summary { cursor: pointer; color: var(--muted); padding: 2px 0 6px; }
@media (max-width: 420px) { .pa-row .btn.sm { padding: 6px 8px; } .pa-tab { font-size: 13px; } }


.da { position: relative; overflow: hidden; isolation: isolate; padding: 14px 10px 10px; }
.da-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px; }
.da-side { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }

.da-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.da-bg-a { background-color: #0c1f45;
  background-image: radial-gradient(120% 90% at 20% 40%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%);
  clip-path: polygon(0 0, calc(50% + var(--o, 0%) + 12% * var(--k, 1)) 0, calc(50% + var(--o, 0%) - 12% * var(--k, 1)) 100%, 0 100%); }
.da-bg-b { background-color: #3a0c14;
  background-image: radial-gradient(120% 90% at 80% 40%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%);
  clip-path: polygon(calc(50% + var(--o, 0%) + 12% * var(--k, 1)) 0, 100% 0, 100% 100%, calc(50% + var(--o, 0%) - 12% * var(--k, 1)) 100%); }
.da-bg[style*="url("] { background-blend-mode: normal; }
.da-seam-none .da-bg-a { clip-path: polygon(0 0, calc(50% + var(--o, 0%)) 0, calc(50% + var(--o, 0%)) 100%, 0 100%); }
.da-seam-none .da-bg-b { clip-path: polygon(calc(50% + var(--o, 0%)) 0, 100% 0, 100% 100%, calc(50% + var(--o, 0%)) 100%); }
.da-seam { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(var(--o, 0%)) skewX(calc(var(--tilt) * -0.4)); }
.da-seam svg { width: 100%; height: 100%; }
.da-bolt, .da-bolt-glow { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.da-bolt { stroke: #fff; stroke-width: 2.2; }
.da-bolt-glow { stroke: color-mix(in srgb, var(--left) 50%, var(--right)); stroke-width: 9; opacity: .55; filter: blur(3px); }
.da-seam-diagonal .da-bg-a { box-shadow: none; }

.da-mid { display: grid; justify-items: center; align-self: center; gap: 2px; padding: 0 2px; }
.da-vs { font-size: 46px; font-weight: 900; font-style: italic; letter-spacing: -3px; line-height: .9; transform: skewX(-8deg);
  background: linear-gradient(100deg, var(--left) 0 48%, var(--right) 52% 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .25)) drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.da-score { font-size: 20px; font-weight: 800; color: #ffc83d; text-shadow: 0 1px 0 #000; }
.da-ava .ch-ava { border-radius: 50%; }
.da-a .da-ava .ch-ava { box-shadow: 0 0 0 3px var(--left), 0 0 22px var(--left); }
.da-b .da-ava .ch-ava { box-shadow: 0 0 0 3px var(--right), 0 0 22px var(--right); }
.da-win .da-ava .ch-ava { box-shadow: 0 0 0 3px #ffc83d, 0 0 26px #ffc83d; }
.da-empty { border-radius: 50%; display: grid; place-items: center; font-size: 26px; border: 2px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .6); }
.da-name { font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-bal { font-size: 12px; font-weight: 700; color: #ffc83d; text-shadow: 0 1px 2px #000; }
.da-sum { font-size: 18px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; }
.da-state { font-size: 11px; color: rgba(255, 255, 255, .75); }
.da-dice { display: flex; gap: 10px; padding: 4px 0; }

.da-classic .da-name, .da-classic .da-sum { color: var(--text); text-shadow: none; }
.da-classic .da-state { color: var(--muted); }


.d3 { --d3: 44px; position: relative; width: var(--d3); height: var(--d3); perspective: calc(var(--d3) * 6); }
.d3-ring { position: absolute; inset: -22%; border-radius: 50%; border: 2px solid var(--glow);
  box-shadow: 0 0 14px var(--glow), inset 0 0 12px color-mix(in srgb, var(--glow) 50%, transparent); opacity: .9; }
.d3-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.d3-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%;
  border-radius: 18%; background: radial-gradient(circle at 30% 25%, #ffffff, #e6e9ef 60%, #c9ced8);
  box-shadow: inset 0 0 calc(var(--d3) * .12) rgba(0, 0, 0, .25); backface-visibility: hidden; }
.d3-face i { width: 64%; height: 64%; margin: auto; border-radius: 50%; }
.d3-face i.on { background: radial-gradient(circle at 35% 30%, #4a4f5c, #0b0d12); }
.d3-front { transform: translateZ(calc(var(--d3) / 2)); }
.d3-back { transform: rotateY(180deg) translateZ(calc(var(--d3) / 2)); }
.d3-right { transform: rotateY(90deg) translateZ(calc(var(--d3) / 2)); }
.d3-left { transform: rotateY(-90deg) translateZ(calc(var(--d3) / 2)); }
.d3-top { transform: rotateX(90deg) translateZ(calc(var(--d3) / 2)); }
.d3-bottom { transform: rotateX(-90deg) translateZ(calc(var(--d3) / 2)); }
.d3-wait .d3-cube { opacity: .35; }
.d3-rolling .d3-ring { animation: d3-pulse .3s ease-in-out infinite alternate; }
@keyframes d3-pulse { from { transform: scale(.94); opacity: .6; } to { transform: scale(1.06); opacity: 1; } }
.d2 { line-height: 1; }
.d2.d3-wait { font-size: 22px !important; opacity: .5; }
@media (max-width: 420px) { .da-vs { font-size: 34px; } .da { padding: 10px 6px 8px; } }


.ch-game.ch-duel .da { margin: 0; }
.ch-game.ch-duel { padding-bottom: 10px; }


details.lay-spoiler > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
details.lay-spoiler > summary::-webkit-details-marker { display: none; }
details.lay-spoiler > summary h2 { margin: 0; flex: 1; }
details.lay-spoiler > summary::after { content: "▾"; color: var(--muted); transition: transform .15s; }
details.lay-spoiler:not([open]) > summary::after { transform: rotate(-90deg); }
details.lay-spoiler[open] > summary { margin-bottom: 10px; }

.duel-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.duel-editor .duel-prev { position: sticky; top: 70px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.duel-editor .duel-prev-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(0, 0, 0, .25); }
@media (max-width: 900px) { .duel-editor { grid-template-columns: 1fr; } .duel-editor .duel-prev { position: static; } }
.da-late { animation: da-late .3s ease-out 1.1s both; }
@keyframes da-late { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.da-score { background: rgba(0, 0, 0, .55); border-radius: 999px; padding: 1px 10px; }
@media (prefers-reduced-motion: reduce) { .da-late { animation: none; } }


.da-blur { position: absolute; inset: -4% 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(var(--blur, 14px)) saturate(1.15); backdrop-filter: blur(var(--blur, 14px)) saturate(1.15);
  
  -webkit-mask-image: linear-gradient(calc(90deg + var(--tilt) * 1.6), transparent calc(50% + var(--o, 0%) - var(--bw, 10%) * 2), #000 calc(50% + var(--o, 0%) - var(--bw, 10%)), #000 calc(50% + var(--o, 0%) + var(--bw, 10%)), transparent calc(50% + var(--o, 0%) + var(--bw, 10%) * 2));
          mask-image: linear-gradient(calc(90deg + var(--tilt) * 1.6), transparent calc(50% + var(--o, 0%) - var(--bw, 10%) * 2), #000 calc(50% + var(--o, 0%) - var(--bw, 10%)), #000 calc(50% + var(--o, 0%) + var(--bw, 10%)), transparent calc(50% + var(--o, 0%) + var(--bw, 10%) * 2)); }

.da-photos .da-bg-a { clip-path: polygon(0 0, calc(50% + var(--o, 0%) + var(--bw, 10%) + 12% * var(--k, 1)) 0, calc(50% + var(--o, 0%) + var(--bw, 10%) - 12% * var(--k, 1)) 100%, 0 100%); }
.da-photos .da-bg-b { clip-path: polygon(calc(50% + var(--o, 0%) - var(--bw, 10%) + 12% * var(--k, 1)) 0, 100% 0, 100% 100%, calc(50% + var(--o, 0%) - var(--bw, 10%) - 12% * var(--k, 1)) 100%); }
.da-photos .da-bg-b { z-index: 0; }
.da-bg { overflow: hidden; }
.da-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.da-bg-dim { position: absolute; inset: 0; }

.da.da-drag { cursor: grab; touch-action: none; }
.da.da-drag:active { cursor: grabbing; }
.da.da-drag .da-grid { pointer-events: none; opacity: .55; }
.da.da-drag .da-bg { outline: 2px dashed rgba(255, 255, 255, .45); outline-offset: -6px; }
.da-mid { position: relative; z-index: 3; }
.da-vs-img { display: block; height: auto; max-width: 30vw; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(255, 255, 255, .18)); }
.da-photos .da-vs { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .8)) drop-shadow(0 0 12px rgba(255, 255, 255, .3)); }
.duel-frame { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); display: grid; gap: 6px; }
.duel-frame-h { display: flex; align-items: center; justify-content: space-between; }

.da-mid { position: absolute; z-index: 4; left: calc(50% + var(--vx, 0) * 1%); top: calc(50% + var(--vy, 0) * 1%);
  transform: translate(-50%, -50%) scale(var(--vs, 1)); transform-origin: center; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.da-gap { width: 64px; }
@media (max-width: 420px) { .da-gap { width: 44px; } }
.da.da-drag .da-mid { pointer-events: auto; cursor: move; outline: 2px dashed rgba(255, 200, 61, .7); outline-offset: 4px; border-radius: 10px; }

.da-bg-img { transform-origin: center; will-change: transform; }


.da .da-bg-a, .da.da-photos .da-bg-a, .da.da-seam-none .da-bg-a {
  clip-path: polygon(0 0, calc(50% + var(--o, 0%) + 12% * var(--k, 1)) 0, calc(50% + var(--o, 0%) - 12% * var(--k, 1)) 100%, 0 100%); }
.da .da-bg-b, .da.da-photos .da-bg-b, .da.da-seam-none .da-bg-b {
  clip-path: polygon(calc(50% + var(--o, 0%) + 12% * var(--k, 1)) 0, 100% 0, 100% 100%, calc(50% + var(--o, 0%) - 12% * var(--k, 1)) 100%); }

.da .da-bg-img { inset: 0; left: 0; right: auto; width: 100%; height: 100%; }

.da .da-seam { transform: translateX(var(--o, 0%)) skewX(var(--sk, -30deg)); transform-origin: center; }

.da .da-blur { inset: -15% auto; left: calc(50% + var(--o, 0%) - 2 * var(--bw, 10%)); width: calc(4 * var(--bw, 10%));
  transform: skewX(var(--sk, -30deg)); transform-origin: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 75%, transparent 100%); }


.ch-msg.duel .ch-body { width: min(760px, 100%); max-width: min(760px, 100%); }

.da .da-grid { zoom: var(--sc, 1); }
.da .da-mid { transform: translate(-50%, -50%) scale(calc(var(--vs, 1) * var(--sc, 1))); }
.da { padding: calc(14px * var(--sc, 1)) calc(10px * var(--sc, 1)) calc(10px * var(--sc, 1)); }
@media (max-width: 620px) {
  
  :is(#view-chat, #gm-chat-root) .ch-msg.duel > .ch-ava { display: none; }
  :is(#view-chat, #gm-chat-root) .ch-msg.duel .ch-body { width: 100%; max-width: 100%; padding: 6px; }
  .ch-game.ch-duel .ch-duel-head { padding: 6px 10px; }
  .ch-game.ch-duel .ch-duel-roll { padding: 8px 18px; }
}

@media (max-width: 420px) { .da-vs { font-size: 46px; } .da-gap { width: 64px; } }


@media (max-width: 900px) {
  html.kb-open .rail { display: none !important; }
  html.kb-open .view { padding-bottom: 8px; }
}


.ch-game.ch-rps { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; border-color: rgba(var(--sun-rgb), .45);
  background: radial-gradient(90% 120% at 50% 0%, rgba(var(--sun-rgb), .12), transparent 60%), var(--panel-2); }
.ch-msg.wide .ch-game.ch-rps { width: 100%; }
.ch-rps-score { font-size: 18px; font-weight: 800; color: var(--sun); }
.ch-rps-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 12px; }
.ch-rps-pl { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.ch-rps-pl.win .ch-ava { box-shadow: 0 0 0 3px var(--sun), 0 0 18px rgba(var(--sun-rgb), .7); border-radius: 50%; }
.ch-rps-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rps-last { font-size: 40px; line-height: 1; filter: grayscale(.2); }
.ch-rps-last.won { filter: drop-shadow(0 0 10px rgba(var(--sun-rgb), .8)); }
.ch-rps-last.lost { opacity: .45; }
.ch-rps-last.pop { animation: ch-rps-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes ch-rps-pop { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-rps-hist { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 0 12px; }
.ch-rps-chip { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--line); }
.ch-rps-btn.sm { width: 74px; padding: 8px 4px; }
.ch-rps-btn.sm span { font-size: 30px; }
.ch-game.ch-rps.st-expired, .ch-game.ch-rps.st-cancelled { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .ch-rps-last.pop { animation: none; } }

.ch-duel-head { gap: 8px; }
.ch-duel-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-duel-head .ch-rps-score, .ch-duel-head .ch-coins { flex: none; white-space: nowrap; }

.ch-game.ch-rps, .ch-game.ch-duel { grid-template-columns: minmax(0, 1fr); }


.ch-dock { display: none; gap: 4px; padding: 6px 14px 0; }
.ch-dock.on { display: grid; }
.ch-dock-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; min-width: 0; }
.ch-dock-row.turn { border-color: rgba(var(--sun-rgb), .7); box-shadow: 0 0 0 1px rgba(var(--sun-rgb), .25) inset; }
.ch-dock-ico { font-size: 18px; flex: none; }
.ch-dock-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dock-moves { display: flex; gap: 4px; }
.ch-dock-moves .btn.sm { padding: 3px 7px; font-size: 16px; }
.ch-dock-go { flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 4px; }
@media (max-width: 900px) { :is(#view-chat, #gm-chat-root) .ch-dock { padding: 6px 8px 0; background: var(--bar); } }

.ch-king-log { display: grid; gap: 4px; margin-top: 6px; }
.ch-king-round { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.ch-king-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--line); }
.ch-king-chip b { font-size: 18px; line-height: 1; }
.ch-king-chip .ch-die { width: 24px; height: 24px; font-size: 22px; }
.ch-king-chip.king { border-color: rgba(var(--sun-rgb), .8); background: rgba(var(--sun-rgb), .15); }
.ch-king-chip.loser { border-color: rgba(216, 85, 47, .7); background: rgba(216, 85, 47, .15); }
.ch-king-roles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ch-pin-game .ch-king-log { margin-top: 2px; }

.ch-dock.on { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; }
.ch-dock-wait { flex: none; font-size: 12px; white-space: nowrap; }

.ch-open .ch-dock-row.open { border-color: rgba(var(--sun-rgb), .55); background: linear-gradient(90deg, rgba(var(--sun-rgb), .12), var(--panel-2)); }
.ch-open.on { max-height: 96px; }

.ch-open .ch-dock-row.king-new .ch-dock-t { flex: 1; }
.ch-open .ch-dock-row.king-new .btn.sm .lbl { display: inline; }   
.ch-glow { animation: ch-glow 1.8s ease-in-out infinite; }
@keyframes ch-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sun-rgb), .0); } 50% { box-shadow: 0 0 10px 2px rgba(var(--sun-rgb), .75); } }
@media (prefers-reduced-motion: reduce) { .ch-glow { animation: none; box-shadow: 0 0 8px 1px rgba(var(--sun-rgb), .6); } }


.ch-lost { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 4px 14px 0; padding: 2px 4px 2px 8px; border-radius: 99px;
  font-size: 12px; border: 1px dashed rgba(var(--sun-rgb), .5); background: rgba(var(--sun-rgb), .08); width: fit-content; max-width: calc(100% - 28px); }
.ch-lost-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-lost .btn.sm { padding: 1px 8px; font-size: 12px; border-radius: 99px; flex: none; }
.ch-lost-auto { flex: none; font-size: 11px; }
@media (max-width: 900px) { :is(#view-chat, #gm-chat-root) .ch-lost { margin: 4px 8px 0; } }


.ch-side-top { display: flex; align-items: center; gap: 8px; }
.ch-side-close { display: none; }
.ch-side-back { display: none; }
@media (max-width: 900px) {
  .ch-side-close { display: inline-flex; }
  .ch-wrap.side-open .ch-side-back { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .45); }
  
  :is(#view-chat, #gm-chat-root) .ch-wrap.side-open .ch-side { inset: 56px auto 80px 8px; width: min(320px, calc(100vw - 56px)); }
}


:is(#view-chat, #gm-chat-root) .ch-list { font-size: calc(15px * var(--chs, 1)); }
:is(#view-chat, #gm-chat-root) .ch-meta { font-size: .87em; }
:is(#view-chat, #gm-chat-root) .ch-time { font-size: .73em; }
:is(#view-chat, #gm-chat-root) .ch-quote { font-size: .8em; }
:is(#view-chat, #gm-chat-root) .ch-react { font-size: .87em; }
:is(#view-chat, #gm-chat-root) .ch-text { font-size: 1em; line-height: 1.4; }
.ch-font-pop { min-width: 260px; padding: 10px; gap: 8px; }
.ch-font-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }


.dface { --df: 28px; display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: var(--df); height: var(--df); padding: calc(var(--df) * .12);
  border-radius: 22%; background: radial-gradient(circle at 30% 25%, #fff, #e3e7ee 65%, #c6ccd6); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); vertical-align: middle; flex: none; }
.dface i { width: 78%; height: 78%; margin: auto; border-radius: 50%; }
.dface i.on { background: radial-gradient(circle at 35% 30%, #3c4250, #07090d); }
.ch-king-chip { padding: 3px 9px 3px 6px; font-size: 14px; gap: 6px; }
.ch-king-chip .d3 { margin: 2px; }
.ch-king-chip .d3-ring { display: none; }
.ch-king-chip.tie { opacity: .75; border-style: dashed; }
.ch-king-chip.wait { opacity: .6; }
.ch-king-chip.done { border-color: rgba(91, 201, 138, .6); }
.ch-king-round.now { padding: 4px 6px; border-radius: 10px; background: rgba(var(--sun-rgb), .07); }
.ch-king-rolloff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); padding-left: 4px; }
.ch-king-ro { display: inline-flex; align-items: center; gap: 3px; }


.ch-emoji-btn { font-size: 20px; padding: 6px 9px; flex: none; }
.ch-emoji-pop { z-index: 1300; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; width: min(300px, calc(100vw - 16px)); max-height: min(330px, 55vh); overflow-y: auto; }
.ch-emoji { font-size: 26px; line-height: 1; padding: 6px 0; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.ch-emoji:hover, .ch-emoji:focus-visible { background: var(--panel-3); }
@media (max-width: 400px) { .ch-emoji-btn { padding: 6px 6px; } }

.ch-pop.ch-emoji-pop.ch-ep { display: flex; flex-direction: column; padding: 0; width: min(340px, calc(100vw - 16px)); max-height: none; overflow: hidden; box-sizing: border-box; }
.ch-ep-head { display: flex; gap: 4px; padding: 6px 6px 0; flex: none; }
.ch-pop .ch-ep-tab { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 8px; color: var(--muted); border-radius: 8px; }
.ch-pop .ch-ep-tab.on { color: var(--text); background: rgba(var(--water-rgb), .18); }
.ch-ep-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ch-emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; overflow-y: auto; }
.ch-gif { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 6px 4px; gap: 6px; }
.ch-gif-q { flex: none; width: 100%; box-sizing: border-box; }
.ch-gif-grid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 8px; }
.ch-gif-cols { display: flex; gap: 4px; align-items: flex-start; }
.ch-gif-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ch-pop button.ch-gif-tile { display: block; width: 100%; padding: 0; border-radius: 8px; overflow: hidden; background: var(--panel-3); }
.ch-gif-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-pop button.ch-gif-tile:hover { outline: 2px solid var(--water); }
.ch-gif-tile.wait { opacity: .45; pointer-events: none; }
.ch-gif-note { text-align: center; font-size: 12px; padding: 8px 4px; }
.ch-gif-note:empty { display: none; }
.ch-gif-by { flex: none; text-align: right; font-size: 10px; opacity: .7; }

.ch-pop.ch-react-pop { min-width: 0; padding: 6px; width: max-content; max-width: min(380px, calc(100vw - 16px)); box-sizing: border-box; }
.ch-react-quick { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.ch-react-pop .ch-emoji { font-size: 24px; width: 40px; height: 40px; padding: 0; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.ch-react-pop .ch-emoji.on { background: rgba(var(--water-rgb), .22); }
.ch-react-pop .ch-react-more { font-size: 18px; color: var(--muted); transition: transform .15s; }
.ch-react-pop.open .ch-react-more { transform: rotate(180deg); }
.ch-react-all { display: none; grid-template-columns: repeat(auto-fill, 40px); gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  max-height: min(260px, 45vh); overflow-y: auto; }
.ch-react-pop.open .ch-react-all { display: grid; }
.ch-react .ch-smile { width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.ch-who-head .ch-smile { width: 1.2em; height: 1.2em; vertical-align: middle; }


.ch-dock.on { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 96px; }
.ch-dock.on > .ch-dock-row:only-child { grid-column: 1 / -1; }
.ch-dock-row { padding: 3px 4px 3px 6px; gap: 5px; font-size: 12px; }
.ch-dock-ico { font-size: 16px; }
.ch-dock-row .btn.sm { padding: 3px 8px; font-size: 12px; flex: none; }
.ch-dock-moves .btn.sm { padding: 2px 5px; font-size: 15px; }
.ch-dock-go { padding: 2px 3px; font-size: 14px; }
@media (max-width: 380px) { .ch-dock.on { grid-template-columns: 1fr; } }

@media (max-width: 620px) { .ch-dock-row .btn.sm .lbl { display: none; } .ch-dock-row .btn.sm { padding: 3px 7px; } }


.pl-admin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-block { display: grid; gap: 10px; }
.pl-head { display: flex; align-items: center; gap: 10px; }
.pl-head h2 { margin: 0; flex: 1; }
.pl-search { max-width: 360px; }
.pl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.pl-card { display: grid; text-align: left; padding: 0; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.pl-card:hover { border-color: var(--water); transform: translateY(-1px); }
.pl-card.important { border-color: rgba(var(--sun-rgb), .7); box-shadow: inset 4px 0 0 var(--sun); }
.pl-card.closed { opacity: .78; }
.pl-cover { height: 110px; background-size: cover; background-position: center; }
.pl-card-body { display: grid; gap: 6px; padding: 10px 12px 12px; }
.pl-title { font-weight: 800; font-size: 16px; line-height: 1.25; }
.pl-text { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.pl-meta { font-size: 12px; color: var(--faint); }
.pl-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--line); }
.pl-badge.imp { color: var(--sun); border-color: rgba(var(--sun-rgb), .6); background: rgba(var(--sun-rgb), .12); }
.pl-badge.live { color: var(--water); }
.pl-badge.done { color: var(--muted); }
.pl-badge.mine { color: var(--ok); }
.pl-archive > summary { cursor: pointer; }
.pl-archive[open] > summary { margin-bottom: 10px; }

.pl-pop { display: grid; gap: 10px; }
.pl-pop-cover { height: 160px; border-radius: 12px; background-size: cover; background-position: center; }
.pl-pop-text { white-space: pre-wrap; line-height: 1.45; }
.pl-options { display: grid; gap: 6px; }
.pl-option { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.pl-option:hover:not(:disabled) { border-color: var(--water); background: rgba(var(--water-rgb), .1); }
.pl-option.mine { border-color: var(--ok); background: rgba(91, 201, 138, .12); }
.pl-option:disabled { cursor: default; }
.pl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }

.pl-bars { display: grid; gap: 8px; }
.pl-bar-t { display: flex; gap: 6px; font-size: 13px; align-items: baseline; }
.pl-bar-t span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pl-bar { height: 12px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 99px; transition: width .5s ease-out; }
.pl-bar-row.lead .pl-bar-t { font-weight: 700; }

.pl-round { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pl-pie { width: 150px; height: 150px; border-radius: 50%; flex: none; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.pl-pie.donut .pl-hole { position: absolute; inset: 24%; border-radius: 50%; background: var(--panel); display: grid; place-content: center; text-align: center; }
.pl-hole b { font-size: 22px; line-height: 1; }
.pl-hole small { color: var(--muted); font-size: 11px; }
.pl-legend { display: grid; gap: 6px; flex: 1; min-width: 180px; }
.pl-leg { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pl-leg-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pl-leg.lead { font-weight: 700; }

.pl-cover-mini { width: 120px; height: 56px; border-radius: 8px; background-size: cover; background-position: center; }
.pl-imp-check { padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(var(--sun-rgb), .6); background: rgba(var(--sun-rgb), .07); font-size: 13px; }
.pl-search { width: 100%; }
.pl-myvote { padding: 8px 12px; border-radius: 10px; background: rgba(91, 201, 138, .12); border: 1px solid rgba(91, 201, 138, .5); }


.qa-block { display: grid; gap: 10px; }
#view-qa > .card + .card { margin-top: 14px; }
.qa-top .pl-head { flex-wrap: wrap; }
.qa-top .pl-head h2 { white-space: nowrap; }
.qa-list { display: grid; gap: 10px; }
.qa-card { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel-2); min-width: 0; }
.qa-card.waiting { border-style: dashed; }
.qa-card.public { border-color: rgba(var(--water-rgb), .45); }
.qa-card.pinned { border-color: rgba(var(--sun-rgb), .7); box-shadow: inset 4px 0 0 var(--sun); }
.qa-q { display: flex; gap: 8px; align-items: flex-start; }
.qa-ico { flex: none; line-height: 1.45; }
.qa-txt { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.qa-card > .qa-q .qa-txt { font-weight: 700; }
.qa-meta { font-size: 12px; color: var(--faint); }
.qa-a { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--water-rgb), .08); border: 1px solid rgba(var(--water-rgb), .3); }
.qa-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-quote { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.pl-badge.wait { color: var(--sun); }
.pl-badge.new { color: var(--on-accent); background: var(--water); border-color: var(--water); }


.ch-compose { align-items: flex-end; gap: 6px; }
.ch-compose .ch-cbtn { flex: none; width: 44px; height: 44px; min-width: 44px; padding: 0; display: inline-grid; place-items: center; font-size: 20px; line-height: 1; }
.ch-compose .ch-send { width: 52px; }
.ch-compose textarea { min-height: 44px; }
@media (max-width: 400px) { .ch-compose .ch-cbtn { width: 40px; min-width: 40px; height: 40px; font-size: 18px; } .ch-compose textarea { min-height: 40px; } }


.ch-field {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px;
  background: #0f171d; border: 1px solid var(--line); border-radius: 14px; padding: 0 4px 0 0;
  transition: border-color .15s;
}
html[data-theme="light"] .ch-field { background: #ffffff; }
.ch-field:focus-within { border-color: var(--water-dim); box-shadow: 0 0 0 1px rgba(var(--water-rgb), .25); }
.ch-field.off { opacity: .6; }
.ch-compose .ch-field textarea {
  flex: 1; min-width: 0; background: transparent !important; border: 0; border-radius: 14px 0 0 14px;
  
  padding: 11px 6px 11px 12px; line-height: 22px; min-height: 44px; outline: none; box-shadow: none;
}
.ch-compose .ch-field textarea:focus-visible { outline: none; }

.ch-ficons { display: flex; align-items: center; gap: 0; flex: none; height: 44px; align-self: flex-end; }
.ch-fic {
  position: relative; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: color .12s, background .12s;
}
@media (hover: hover) { .ch-fic:hover:not(:disabled) { color: var(--water); background: rgba(var(--water-rgb), .1); } }
.ch-fic:active:not(:disabled) { background: rgba(var(--water-rgb), .18); }
.ch-fic:disabled { cursor: default; opacity: .5; }
.ch-fic.pop { animation: ch-fic-pop .35s ease-out; }
@keyframes ch-fic-pop { 0% { transform: scale(.6); color: var(--water); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ch-ico { width: 22px; height: 22px; display: block; pointer-events: none; }

.ch-compose .ch-send .ch-ico { width: 20px; height: 20px; }

.ch-compose .ch-fic.ch-fsend { width: 36px; min-width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; background: var(--water-dim); color: var(--on-accent); }
@media (hover: hover) { .ch-compose .ch-fic.ch-fsend:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); } }
.ch-compose .ch-fic.ch-fsend:disabled { opacity: .5; }
:is(#view-chat, #gm-chat-root) .ch-compose .ch-fic.ch-fsend { min-width: 36px; }
.ch-compose .ch-fsend[data-mode="send"] .ch-ico { transform: translateX(1px); }

.ch-field[data-a="games"] .ch-fic-attach, .ch-field[data-a="attach"] .ch-fic-games,
.ch-field[data-b="gif"] .ch-fic-emoji, .ch-field[data-b="emoji"] .ch-fic-gif { display: none; }
.ch-fic-sw::after {
  content: ""; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0;
  border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .55;
}
.ch-fic { width: 38px; height: 38px; }
@media (max-width: 400px) {
  .ch-compose .ch-field textarea { min-height: 40px; padding: 9px 4px 9px 10px; }
  .ch-ficons { height: 40px; }
  .ch-fic { width: 34px; height: 34px; }
}


.ch-rec { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; }
.ch-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff3b4a; flex: none; animation: ch-rec-blink 1s ease-in-out infinite; }
@keyframes ch-rec-blink { 50% { opacity: .3; } }
.ch-rec-meter { flex: 1; height: 8px; border-radius: 99px; background: var(--panel-3); overflow: hidden; min-width: 40px; }
.ch-rec-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--sun), #ff3b4a); transition: width .08s; }
.ch-rec.preview .ch-rec-audio { flex: 1; min-width: 0; height: 40px; }
.ch-voice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding: 8px 10px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); width: min(360px, 100%); }
.ch-vplay { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--water); color: var(--on-accent); font-size: 16px; cursor: pointer; flex: none; }
.ch-vplay:disabled { opacity: .45; cursor: default; }
.ch-vbar { flex: 1; min-width: 80px; height: 8px; border-radius: 99px; background: var(--panel-3); cursor: pointer; overflow: hidden; }
.ch-vbar i { display: block; height: 100%; width: 0; background: var(--water); }
.ch-vtime { font-size: 12px; color: var(--muted); flex: none; }
.ch-vspeed { flex: none; border: 1px solid var(--line); background: var(--panel-3); color: var(--text); border-radius: 99px; font-size: 12px; padding: 2px 8px; cursor: pointer; }
.ch-vwarn { flex-basis: 100%; font-size: 12px; color: var(--sun); }
@media (prefers-reduced-motion: reduce) { .ch-rec-dot { animation: none; } }


.ch-mystats { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.ch-stats-wrap { overflow-x: auto; max-height: 56vh; }
.ch-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.ch-stats th, .ch-stats td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.ch-stats th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
.ch-stats td.up { color: var(--ok); }
.ch-stats td.down { color: var(--rust); }


.ch-radio { display: none; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--water-rgb), .1), transparent 70%); min-width: 0; }
.ch-radio.on { display: flex; }
.ch-radio-ico { font-size: 20px; flex: none; }
.ch-radio-ico.live { animation: ch-radio-pulse 1.4s ease-in-out infinite; }
@keyframes ch-radio-pulse { 50% { transform: scale(1.15); } }
.ch-radio-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ch-radio-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-radio-sub { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; }
.ch-radio-prog { flex: 1; height: 3px; border-radius: 99px; background: var(--panel-3); overflow: hidden; min-width: 30px; }
.ch-radio-prog i { display: block; height: 100%; width: 0; background: var(--water); transition: width 1.5s linear; }
.ch-radio .btn.sm { flex: none; }
.ch-radio-vol { width: 80px; flex: none; }
@media (max-width: 620px) { .ch-radio-vol { display: none; } .ch-radio { padding: 5px 8px; gap: 6px; } }


.ch-radio-frame { position: fixed; right: 0; bottom: 0; width: 300px; height: 120px; border: 0; opacity: .01; pointer-events: none; z-index: -1; }
.ch-radio-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: 40vh; overflow: auto; }
.ch-radio-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--panel-3); font-size: 13px; min-width: 0; }
.ch-radio-row > .btn, .ch-radio-row > .faint { flex: none; }
.ch-radio-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
  .ch-radio-row { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .ch-radio-row-t { flex: 1 1 62%; }
}
.ch-radio-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ch-radio-opts .ch-radio-opt { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 13px; white-space: nowrap; }
.ch-radio-opt select { width: auto; padding: 4px 6px; }
.ch-radio-next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 13px; min-width: 0; }
.ch-radio-next > .faint { flex: none; white-space: nowrap; }
.ch-radio-src { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 2px 6px; border-radius: 6px; text-decoration: none; line-height: 1.3; }
.ch-radio-src.sc { background: rgba(255, 85, 0, .16); color: #ff8a3d; }
.ch-radio-src.aud { background: rgba(160, 90, 255, .18); color: #c39bff; }
.ch-radio-src.x { background: var(--panel-2); color: var(--muted); }
.ch-radio-now { flex: none; }
html[data-theme="light"] .ch-radio-src.sc { color: #c2410c; }
html[data-theme="light"] .ch-radio-src.aud { color: #6d28d9; }

.ch-radio-src.yt { background: rgba(255, 40, 40, .16); color: #ff6b6b; }
html[data-theme="light"] .ch-radio-src.yt { color: #b91c1c; }
.ch-radio-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel-3); }
.ch-radio-mode { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; padding: 9px 6px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.ch-radio-modes.one { display: flex; align-items: center; gap: 10px; }
.ch-radio-modes.one .ch-radio-mode { cursor: default; padding: 7px 12px; }
.ch-radio-mode-hint { font-size: 12px; }
.ch-radio-mode.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.ch-radio-store { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.ch-radio-store-bar { height: 6px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.ch-radio-store-bar i { display: block; height: 100%; background: var(--water); border-radius: 99px; }
.ch-radio-store.full .ch-radio-store-bar i { background: var(--danger, #e5484d); }
.ch-radio-store-warn { color: #ff7a6b; font-weight: 600; font-size: 12px; }
.ch-radio-dl { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ch-radio-dl.bad { color: #ff7a6b; }
.ch-radio-found { flex: 1 1 100%; min-width: 0; }

.ch-radio-votes { display: inline-flex; gap: 4px; flex: none; }
.ch-radio .ch-radio-vote { font-size: 13px; padding: 5px 7px; }

@media (max-width: 620px) { .ch-radio-price, .ch-radio .ch-radio-vn { display: none; } .ch-radio .ch-radio-vote { padding: 5px 6px; } .ch-radio-votes { gap: 2px; } }
.ch-radio-vote { border: 1px solid transparent; background: var(--panel-3); color: var(--muted); font: inherit; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.ch-radio-vote.on.up { background: rgba(46, 204, 113, .18); border-color: rgba(46, 204, 113, .55); color: var(--text); }
.ch-radio-vote.on.down { background: rgba(229, 72, 77, .16); border-color: rgba(229, 72, 77, .55); color: var(--text); }
.ch-radio-score { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ch-radio-row.off { opacity: .55; }
.ch-radio-rule { display: grid; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.ch-radio-rule-h { font-weight: 700; }
.ch-radio-rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ch-radio-rule-row label { display: inline-flex; align-items: center; gap: 6px; margin: 0; flex-direction: row; font-size: 13px; }
.ch-radio-rule-row input { width: 70px; padding: 4px 6px; }

.ch-lib-add, .ch-lib-tools { display: flex; gap: 6px; align-items: center; }
.ch-lib-add input { flex: 1; min-width: 0; }
.ch-lib-search { flex: 1; min-width: 0; }
.ch-lib-search input { width: 100%; }
.ch-lib-tools select { width: auto; max-width: 48%; }
.ch-lib-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-lib-chip { border: 1px solid var(--line, var(--panel-3)); background: transparent; color: var(--muted); border-radius: 99px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ch-lib-chip.on { background: var(--water); border-color: var(--water); color: #fff; }
.ch-lib-selbar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: var(--panel-2); position: sticky; top: 0; z-index: 1; }
.ch-lib-selbar select { width: auto; padding: 4px 6px; font-size: 12px; }
.ch-lib-selinfo { font-weight: 700; }
.ch-lib-list { display: grid; gap: 4px; max-height: 52vh; overflow: auto; }
.ch-lib-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--panel-3); min-width: 0; }
.ch-lib-row.sel { outline: 2px solid var(--water); outline-offset: -2px; }
.ch-lib-row > input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 0; }
.ch-lib-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ch-lib-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ch-lib-line .ch-lib-meta { flex: 1; min-width: 0; }
.ch-lib-selact { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ch-lib-t { font-weight: 600; font-size: 13px; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-lib-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--muted); }
.ch-lib-btns { display: flex; gap: 2px; flex: none; }
.ch-lib-btns .btn.sm { padding: 4px 7px; }
@media (max-width: 620px) {
  .ch-lib-btns .btn.sm { padding: 3px 5px; }
  .ch-lib-selact { width: 100%; justify-content: flex-end; }
  .ch-lib-store-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ch-radio-ico.live { animation: none; } }
.ch-radio-resume { animation: ch-radio-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ch-radio-resume { animation: none; } }


.ch-radio .ch-radio-volbtn { width: 34px; padding: 4px 0; font-size: 16px; display: inline-grid; place-items: center; }
.ch-radio-vol { display: none; }
.ch-vol-pop { width: 240px; padding: 10px 12px; display: grid; gap: 10px; }
.ch-vol-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.ch-vol-row { display: flex; align-items: center; gap: 8px; }
.ch-vol-step { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-3); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
.ch-vol-step:hover { border-color: var(--water); }

input[type="range"].ch-vol-range { -webkit-appearance: none; appearance: none; flex: 1; width: auto; min-width: 0; height: 6px; border-radius: 99px; padding: 0; border: 0;
  background: linear-gradient(90deg, var(--water) 0 var(--v, 70%), var(--panel-3) var(--v, 70%) 100%); outline: none; cursor: pointer; }
input[type="range"].ch-vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--water); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
input[type="range"].ch-vol-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--water); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
input[type="range"].ch-vol-range::-moz-range-track { background: transparent; }

.ch-radio-sub { white-space: nowrap; overflow: hidden; }
.ch-radio-sub > span:first-child { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .ch-radio .btn.sm .lbl { display: none; } }


.ch-pop.ch-vol-pop { box-sizing: border-box; width: 240px; max-width: calc(100vw - 16px); padding: 10px 12px; overflow: hidden; }
.ch-pop.ch-vol-pop * { box-sizing: border-box; }
.ch-pop.ch-vol-pop .ch-vol-head { min-width: 0; gap: 8px; }
.ch-pop.ch-vol-pop .ch-vol-head b { flex: none; }
.ch-pop.ch-vol-pop .ch-vol-row { min-width: 0; width: 100%; }
.ch-pop.ch-vol-pop button.ch-vol-step { width: 28px; height: 28px; min-width: 28px; padding: 0; flex: none; text-align: center;
  display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-3); font-size: 16px; line-height: 1; }
.ch-pop.ch-vol-pop button.ch-vol-step:hover { border-color: var(--water); background: var(--panel-3); }
.ch-pop.ch-vol-pop input[type="range"].ch-vol-range { flex: 1 1 auto; width: 0; min-width: 0; margin: 0; }
.ch-radio-row.now { border: 1px solid rgba(var(--water-rgb), .6); background: rgba(var(--water-rgb), .1); }


.ch-radio.collapsed { padding: 0; background: none; }
.ch-radio-mini { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 2px 12px; border: 0; background: rgba(var(--water-rgb), .06);
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.ch-radio-mini:hover { background: rgba(var(--water-rgb), .12); color: var(--text); }
.ch-radio-mini .ch-radio-ico { font-size: 14px; }
.ch-radio-mini-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-radio-mini-warn { flex: none; color: var(--sun); font-weight: 700; }
.ch-radio-mini-arrow { flex: none; font-size: 12px; }
.ch-radio-fold { width: 28px; padding: 4px 0; flex: none; }
.ch-radio-mini.blocked { background: rgba(var(--sun-rgb), .18); color: var(--text); }
.ch-radio-mini.blocked .ch-radio-mini-warn { animation: ch-radio-pulse 1.2s ease-in-out infinite; }


.ch-online-chip { display: none; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 13px; font-weight: 700;
  background: rgba(91, 201, 138, .12); color: var(--ok); cursor: pointer; flex: none; }
.ch-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
@media (max-width: 620px) {
  :is(#view-chat, #gm-chat-root) .ch-online-chip { display: inline-flex; }
  :is(#view-chat, #gm-chat-root) .ch-mypts { flex: none; padding: 2px 7px; }
}


.ch-menu-btn { font-weight: 700; letter-spacing: 1px; flex: none; }
.ch-head-menu { min-width: 220px; max-width: calc(100vw - 16px); box-sizing: border-box; }
.ch-head-menu button { white-space: nowrap; }
.ch-head-menu button.danger { color: var(--danger-text); }
.ch-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ch-menu-h { font-size: 11px; padding: 4px 10px 0; text-transform: uppercase; letter-spacing: .5px; }


:is(#view-chat, #gm-chat-root) .ch-wrap > .card + .card { margin-top: 0; }


.bm-card { --rc: #3b82f6; position: relative; width: 112px; height: 158px; border-radius: 12px; overflow: hidden; flex: none;
  border: 2px solid var(--rc); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 14px color-mix(in srgb, var(--rc) 70%, transparent);
  display: grid; grid-template-rows: 18px 1fr auto auto; justify-items: center; align-items: center; padding: 4px 6px 6px; color: #fff; user-select: none; }
.bm-card.sm { width: 84px; height: 120px; border-radius: 10px; padding: 3px 4px 5px; grid-template-rows: 12px 1fr auto auto; }
.bm-card.r-blue { --rc: #3b82f6; }
.bm-card.r-purple { --rc: #a855f7; }
.bm-card.r-gold { --rc: #f5b301; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 18px rgba(245,179,1,.75); }

.bm-card.r-gold::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 250%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); animation: bm-shine 3.2s linear infinite; }
@keyframes bm-shine { from { transform: translateX(-90%); } to { transform: translateX(60%); } }
.bm-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.bm-tint { position: absolute; inset: 0; z-index: 0; mix-blend-mode: overlay;
  background: radial-gradient(circle at 30% 20%, hsl(var(--hue) 80% 60% / .55), transparent 65%), linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%); }
.bm-card > :not(.bm-bg):not(.bm-tint) { position: relative; z-index: 1; }
.bm-rar { justify-self: end; font-size: 11px; color: var(--rc); text-shadow: 0 0 6px var(--rc); }
.bm-ava .ch-ava { width: 52px !important; height: 52px !important; box-shadow: 0 0 0 2px var(--rc), 0 0 12px var(--rc); border-radius: 50%; }
.bm-card.sm .bm-ava .ch-ava { width: 38px !important; height: 38px !important; }
.bm-ava .ch-ava-letter { font-size: 22px; }
.bm-card.sm .bm-ava .ch-ava-letter { font-size: 16px; }
.bm-ava .ch-ava::after { display: none; }
.bm-nick { font-weight: 700; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.bm-card.sm .bm-nick { font-size: 10.5px; }
.bm-bm { font-family: var(--mono); font-size: 14px; text-shadow: 0 1px 3px #000; display: flex; gap: 4px; align-items: baseline; }
.bm-card.sm .bm-bm { font-size: 11.5px; flex-direction: column; gap: 0; align-items: center; line-height: 1.1; }
.bm-bm s { opacity: .6; font-size: .8em; }
.bm-bm b.up { color: #86efac; }
.bm-bm b.down { color: #fca5a5; }
.bm-fx { position: absolute !important; top: 3px; left: 3px; display: flex; flex-direction: column; gap: 2px; }
.bm-fx-b { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; background: rgba(0,0,0,.6); border-radius: 6px; padding: 0 3px; border: 1px solid rgba(255,255,255,.2); }
.bm-fx-b.foe { border-color: #ef4444; }
.bm-fx-b.mine { border-color: #22c55e; }
.bm-fx-b.blocked, .bm-fx-b.miss { opacity: .45; text-decoration: line-through; }
.bm-fx-b.hit { border-color: #facc15; box-shadow: 0 0 8px #facc15; }
.bm-fx-b small { font-size: 9px; font-weight: 800; color: #facc15; }
img.bm-fx-i { width: 14px; height: 14px; object-fit: contain; }
.bm-card.win { box-shadow: 0 0 0 2px var(--sun), 0 0 22px rgba(var(--sun-rgb), .9); }
.bm-card.lose { filter: grayscale(.6) brightness(.7); }
.bm-card.bm-back { --rc: #64748b; background: repeating-linear-gradient(45deg, #1e293b 0 8px, #0f172a 8px 16px); display: grid; grid-template-rows: 1fr; place-items: center; font-size: 34px; }
.bm-card.bm-back.sm { font-size: 26px; }

.bm-card.mini { width: 50px; height: 70px; border-radius: 8px; border-width: 1.5px; padding: 3px 2px; font-size: 20px; grid-template-rows: 1fr auto; }
.bm-card.mini .bm-ava .ch-ava { width: 30px !important; height: 30px !important; }
.bm-card.mini .bm-ava .ch-ava-letter { font-size: 13px; }
.bm-mini-bm { font-size: 9.5px; font-weight: 800; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.bm-card.mini .bm-fx { top: 1px; left: 1px; }
.bm-card.mini .bm-fx-b { font-size: 10px; padding: 0 2px; }
.bm-card.xs { width: 40px; height: 56px; border-radius: 7px; border-width: 1.5px; font-size: 18px; padding: 0; }
.bm-back span { filter: drop-shadow(0 0 6px rgba(var(--water-rgb), .7)); }


.bm-flip { width: 112px; height: 158px; perspective: 700px; flex: none; }
.bm-flip.sm { width: 84px; height: 120px; }
.bm-flip-in { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.3,1.4,.5,1); transform-style: preserve-3d; }
.bm-flip.open .bm-flip-in { transform: rotateY(180deg); }
.bm-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bm-face-front { transform: rotateY(180deg); }

.bm-face { transition: visibility 0s .3s; }
.bm-flip.open .bm-face-back, .bm-flip:not(.open) .bm-face-front { visibility: hidden; }

.bm-pos.pending .bm-fx, .bm-pos.pending .bm-bm b.up, .bm-pos.pending .bm-bm b.down, .bm-pos.pending .bm-pos-w, .bm-pos.pending .bm-pos-d { display: none; }
.bm-pos.pending .bm-bm s { text-decoration: none; opacity: 1; font-size: 1em; font-weight: 700; }
.bm-reveal.pending .bm-who.win b { color: inherit; }
.bm-reveal.pending .bm-who.win b::before { content: none; }
.bm-pos.pending .bm-card.win, .bm-pos.pending .bm-card.lose { box-shadow: 0 0 0 1px rgba(0,0,0,.4); filter: none; }
.bm-pos.shown .bm-fx { animation: bm-pop .4s ease-out; }
.bm-pos.shown .bm-pos-w { animation: bm-pop .4s ease-out; }
@keyframes bm-pop { from { transform: scale(.3); opacity: 0; } }
.bm-final.pending { visibility: hidden; }
.bm-final:not(.pending) { animation: bm-pop .5s ease-out; }


.ch-game.bm-game { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; border-color: rgba(168, 85, 247, .5);
  background: linear-gradient(160deg, rgba(168, 85, 247, .14), rgba(var(--water-rgb), .05)); }
.ch-game.bm-game.st-moved, .ch-game.bm-game.st-expired, .ch-game.bm-game.st-cancelled, .ch-game.bm-game.st-declined { opacity: .7; }
.bm-who { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 13px; }
.bm-who b { white-space: nowrap; }
@media (max-width: 520px) {
  .bm-table { padding: 4px 6px; gap: 4px; }
  .bm-table .bm-who { flex-wrap: wrap; row-gap: 0; }
  .bm-table .bm-who .faint { flex-basis: 100%; text-align: center; font-size: 11.5px; }
  .bm-table .bm-row { gap: 3px; }
  .bm-table .bm-vs { font-size: 16px; }
}
.bm-who.win b { color: var(--sun); }
.bm-who.win b::before { content: "🏆 "; }
.bm-open { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 6px 10px; }
.bm-vs { font-weight: 900; font-style: italic; font-size: 20px; color: var(--sun); text-align: center; }
.bm-table { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; padding: 4px 10px; }
.bm-side { display: grid; gap: 6px; justify-items: center; }
.bm-row { display: flex; gap: 4px; justify-content: center; }
.bm-reveal { display: grid; gap: 6px; padding: 4px 6px; }
.bm-cols { display: flex; gap: 6px; justify-content: center; }
.bm-pos { display: grid; justify-items: center; gap: 4px; }
.bm-pos-mid { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bm-pos-n { color: var(--muted); font-weight: 700; }
.bm-pos-w { font-size: 16px; color: var(--sun); }
.bm-pos-d { font-family: var(--mono); font-size: 11px; }


.bm-hand { display: grid; gap: 10px; }
.bm-hand-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.bm-side-t { font-size: 12px; text-align: center; }
.bm-slots { display: flex; gap: 8px; justify-content: center; align-items: flex-start; }
.bm-slot { display: grid; justify-items: center; gap: 4px; padding: 6px; border-radius: 12px; border: 1px dashed transparent; min-width: 0; }
.bm-slot-n { font-size: 11px; color: var(--muted); }
.bm-slot.foe .bm-card { width: 64px; height: 90px; font-size: 24px; }
.bm-slot-card { cursor: pointer; border-radius: 12px; transition: transform .15s; }
.bm-slot.picked .bm-slot-card { transform: translateY(-6px) scale(1.04); outline: 2px solid var(--water); outline-offset: 2px; }
.bm-slot.target { border-color: var(--water); background: rgba(var(--water-rgb), .08); }
.bm-slot.target .bm-slot-card { animation: bm-pulse 1s ease-in-out infinite; }
@keyframes bm-pulse { 50% { transform: scale(1.04); } }
.bm-slot-mv { display: flex; gap: 4px; }
.bm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 4px 2px 6px; border-radius: 99px; background: var(--panel-3); max-width: 120px; }
.bm-chip.foe { border: 1px solid rgba(239, 68, 68, .6); }
.bm-chip.mine { border: 1px solid rgba(34, 197, 94, .6); }
.bm-chip span:not(.bm-fx-i) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }
.bm-shop { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bm-shop-i { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; text-align: left; padding: 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-3); color: var(--text); cursor: pointer; }
.bm-shop-i.on { border-color: var(--water); box-shadow: 0 0 0 2px rgba(var(--water-rgb), .35); }
.bm-shop-i:disabled { opacity: .45; cursor: default; }
.bm-shop-ico { font-size: 22px; }
img.bm-shop-ico { width: 28px; height: 28px; object-fit: contain; }
.bm-shop-t { display: grid; min-width: 0; }
.bm-shop-t small { color: var(--muted); font-size: 11px; }
.ok-note { background: rgba(var(--ok-rgb), .1); border: 1px solid rgba(var(--ok-rgb), .35); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.g-tag { font-size: 11px; font-weight: 600; margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: var(--panel-3); color: var(--muted); }
.g-tag.off { color: var(--rust); }
@media (max-width: 420px) {
  .bm-slots { gap: 2px; }
  .bm-slot { padding: 4px 2px; }
  .bm-slot:not(.foe) .bm-card { width: 96px; height: 136px; }
  .bm-cols { gap: 3px; }
}


.mk-win { gap: 6px; align-items: center; flex-wrap: wrap; }
.mk-day { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; cursor: pointer; }
.mk-day.on { background: rgba(var(--water-rgb), .18); border-color: var(--water); }
.mk-day input { display: none; }
.mk-allow { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow: auto; }
.mk-allow-i { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); cursor: pointer; }
.mk-allow-i.on { border-color: var(--water); background: rgba(var(--water-rgb), .12); }
.mk-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mk-tpl { display: grid; gap: 6px; justify-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.mk-tpl.off { opacity: .5; }
.mk-look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 720px) { .mk-look { grid-template-columns: 1fr; } }
.mk-stage { zoom: 2; touch-action: none; padding: 8px; }
.mk-stage .bm-card > * { cursor: grab; }
.mk-stage .mk-sel { outline: 1.5px dashed #facc15; outline-offset: 1px; border-radius: 4px; }
.mk-slider { display: grid; gap: 2px; font-size: 13px; }
.mk-slider input { width: 100%; }
.mk-table-prev { max-width: 560px; }
.mk-tpl input[type="text"] { width: 100%; }
.mk-tpl input[type="color"] { width: 34px; height: 28px; padding: 0; border: 0; background: none; }
.mk-buff { display: flex; gap: 12px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.mk-buff.off { opacity: .55; }
.mk-buff-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--panel-3); }
.mk-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mk-deck-i { display: grid; gap: 4px; justify-items: center; }
.mk-deck-i select { width: 96px; font-size: 11px; padding: 3px; }


.ch-down { position: absolute; right: 20px; bottom: 120px; z-index: 6; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--water); background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 4px 14px var(--shadow); cursor: pointer; opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; -webkit-tap-highlight-color: transparent; }
.ch-down.show { opacity: .92; transform: none; pointer-events: auto; }
.ch-down:hover { opacity: 1; border-color: var(--water-dim); }
.ch-down:active { transform: scale(.94); }


.ch-game.bm-game { position: relative; }
.bm-win { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 10px;
  background: radial-gradient(circle at 50% 45%, rgba(250, 204, 21, .22), rgba(2, 6, 23, .86) 70%); backdrop-filter: blur(2px);
  animation: bm-win-in .45s ease-out both; cursor: pointer; overflow: hidden; text-align: center; }
.bm-win.out { animation: bm-win-out .45s ease-in both; }
@keyframes bm-win-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-win-out { to { opacity: 0; } }
.bm-win-title { font-size: 30px; font-weight: 900; letter-spacing: .5px; color: #facc15; text-shadow: 0 0 18px rgba(250, 204, 21, .8), 0 2px 0 #000;
  animation: bm-win-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes bm-win-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bm-win-row { display: flex; gap: 22px; align-items: center; justify-content: center; }
.bm-win-name { font-size: 18px; font-weight: 800; color: #fff; animation: bm-win-pop .7s .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.bm-win-sub { font-size: 12px; }
.bm-win-champ { position: relative; display: grid; justify-items: center; animation: bm-win-rise .8s .2s cubic-bezier(.3, 1.4, .5, 1) both; }
.bm-win-champ.gold .bm-card { box-shadow: 0 0 0 2px #facc15, 0 0 26px rgba(250, 204, 21, .95), 0 0 60px rgba(250, 204, 21, .5); }
.bm-win-cup { font-size: 34px; margin-bottom: -10px; z-index: 2; filter: drop-shadow(0 0 10px rgba(250, 204, 21, .9)); animation: bm-cup 1.2s ease-in-out infinite alternate; }
@keyframes bm-cup { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-4px) rotate(6deg); } }
@keyframes bm-win-rise { from { transform: translateY(30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.bm-win-lose { display: grid; justify-items: center; gap: 4px; }
.bm-win-lose .bm-win-sub { margin-top: 22px; }
.bm-tear { position: relative; width: 84px; height: 120px; }
.bm-tear-h { position: absolute; inset: 0; }
.bm-tear-h.l { clip-path: polygon(0 0, 52% 0, 46% 12%, 55% 25%, 45% 38%, 55% 50%, 46% 63%, 54% 76%, 46% 88%, 52% 100%, 0 100%); animation: bm-tear-l 1.4s .5s ease-in both; }
.bm-tear-h.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 46% 88%, 54% 76%, 46% 63%, 55% 50%, 45% 38%, 55% 25%, 46% 12%); animation: bm-tear-r 1.4s .5s ease-in both; }
@keyframes bm-tear-l { 0%, 25% { transform: none; } 10% { transform: translateX(-2px) rotate(-1deg); } 20% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translate(-16px, 14px) rotate(-16deg); filter: grayscale(.8) brightness(.6); } }
@keyframes bm-tear-r { 0%, 25% { transform: none; } 10% { transform: translateX(2px) rotate(1deg); } 20% { transform: translateX(-2px) rotate(-1deg); }
  100% { transform: translate(16px, 20px) rotate(14deg); filter: grayscale(.8) brightness(.6); } }
.bm-confetti { position: absolute; inset: 0; pointer-events: none; }
.bm-confetti i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; animation: bm-conf 2s linear infinite; }
@keyframes bm-conf { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(520px) rotate(540deg); opacity: .2; } }
.bm-replay { padding: 0 6px !important; min-height: 0 !important; }
@media (prefers-reduced-motion: reduce) { .bm-win *, .bm-win { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }



.modal.evp { overflow-x: hidden; overflow-y: auto; }
.rmd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 14px 0; }
.rmd-cap { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rmd-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px;
  font: inherit; text-align: left; cursor: pointer; color: var(--text); background: var(--panel-2); border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ev) 45%, var(--line));
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ev) 14%, transparent), transparent 60%);
}
.rmd-row:hover { border-color: var(--ev); }
.rmd-icon { flex: none; font-size: 24px; line-height: 1; }
.rmd-text { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.rmd-text b { font-size: 16px; }
.rmd-text .faint { font-size: 13px; }
.rmd-go { flex: none; color: var(--ev); font-weight: 700; white-space: nowrap; }
@media (max-width: 420px) {
  .rmd-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .rmd-text { flex-basis: calc(100% - 44px); }
  .rmd-go { margin-left: 34px; }
}
.card.rmd-flash { animation: rmd-flash 1.6s ease-out 2; }
@keyframes rmd-flash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px var(--water), 0 0 24px var(--water); } }


.ch-game.word { border-color: rgba(var(--ok-rgb), .55); background: linear-gradient(135deg, rgba(var(--ok-rgb), .14), rgba(var(--sun-rgb), .08)); flex-wrap: wrap; }
.ch-game.word.over { opacity: .7; background: var(--panel-2); border-color: var(--line); }
.ch-game.word-end { border-color: rgba(var(--sun-rgb), .6); background: linear-gradient(135deg, rgba(var(--sun-rgb), .18), rgba(var(--ok-rgb), .08)); }
.ch-game.word-end.none { border-color: var(--line); background: var(--panel-2); }
.wd-word { letter-spacing: 2px; color: var(--sun); }
.wd-squares { font-size: 13px; line-height: 1.15; margin: 4px 0; letter-spacing: 1px; }
.wd-mini { display: flex; gap: 3px; flex: none; }
.wd-board { --wd-len: 5; --wd-cell: min(50px, 6.2vh, calc((min(760px, 100vw) - 90px) / var(--wd-len) - 6px)); display: grid; gap: 12px; justify-items: center; }
.wd-head { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13px; }
.wd-grid { display: grid; gap: 6px; }
.wd-row { display: flex; gap: 6px; justify-content: center; }
.wd-cell { width: var(--wd-cell); height: var(--wd-cell); display: inline-grid; place-items: center; border-radius: 8px; border: 2px solid var(--line);
  background: var(--panel-2); color: var(--text); font-weight: 800; font-size: calc(var(--wd-cell) * .5); text-transform: uppercase; user-select: none; }
.wd-cell.sm { --wd-cell: 22px; width: 22px; height: 22px; border-radius: 5px; border-width: 1px; font-size: 12px; color: var(--muted); }
.wd-cell.typed { border-color: var(--muted); animation: wd-pop .12s ease-out; }
.wd-cell.g { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.wd-cell.y { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.wd-cell.b { background: var(--panel-3); border-color: var(--panel-3); color: var(--muted); }
.wd-cell.pick { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wd-cell.sel { border-color: var(--water); box-shadow: 0 0 0 2px color-mix(in srgb, var(--water) 45%, transparent); }
.wd-cell.sel:empty::after { content: ""; width: 40%; height: 3px; border-radius: 2px; background: var(--water); align-self: end; margin-bottom: 18%; animation: wd-blink 1s steps(2) infinite; }
@keyframes wd-blink { 50% { opacity: 0; } }
.wd-row.done .wd-cell { animation: wd-flip .35s ease-out backwards; }
.wd-row.done .wd-cell:nth-child(2) { animation-delay: .06s; } .wd-row.done .wd-cell:nth-child(3) { animation-delay: .12s; }
.wd-row.done .wd-cell:nth-child(4) { animation-delay: .18s; } .wd-row.done .wd-cell:nth-child(5) { animation-delay: .24s; }
@keyframes wd-pop { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wd-flip { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.wd-status { font-size: 14px; text-align: center; color: var(--muted); }
.wd-status.win { color: var(--ok); font-weight: 700; }
.wd-kbd { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.wd-krow { display: flex; gap: 4px; justify-content: center; }
.wd-key { flex: 1 1 0; min-width: 0; max-width: 42px; height: 46px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3);
  color: var(--text); font-weight: 700; font-size: 15px; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.wd-key.wide { flex: 1.6 1 0; max-width: 64px; font-size: 18px; }
.wd-key.enter { background: var(--water-dim); border-color: var(--water); color: var(--on-accent); }
.wd-key.g { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.wd-key.y { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.wd-key.b { background: var(--panel); color: var(--faint); }
.wd-key:disabled { opacity: .55; cursor: default; }
.wd-rules { font-size: 12px; text-align: center; }
@media (max-width: 420px) {
  .wd-krow { gap: 3px; }
  .wd-key { height: 42px; font-size: 13px; }
  .wd-key.wide { font-size: 17px; }
}
.wd-queue { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-qi { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 8px; background: var(--panel-3); font-size: 13px; letter-spacing: 1px; }
.wd-qi .btn { padding: 2px 6px; }


.site-version {
  margin: 10px -6px -8px 0; text-align: right;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--muted); opacity: .5; user-select: all;
}
.wd-sysava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.wd-sysava.empty { display: inline-grid; place-items: center; background: var(--panel-3); color: var(--muted); font-weight: 700; }


.vote-grid { display: grid; gap: 8px; width: 100%; }
.vote-line { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: center; }
.vote-lbl { font-size: 14px; font-weight: 600; }
.vote-times { display: flex; gap: 6px; min-width: 0; }
.vote-line > .btn { justify-self: stretch; }
@media (max-width: 520px) { .vote-line { grid-template-columns: 1fr; gap: 4px; } .vote-line > .vote-lbl:empty { display: none; } }


.tv-rows { display: grid; gap: 8px; margin-top: 8px; }
.tv-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.tv-row.win { border-color: var(--ok); }
.tv-row.cur { box-shadow: inset 3px 0 0 var(--water); }
.tv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tv-time { font-size: 18px; font-weight: 600; min-width: 56px; }
.tv-row details { margin-top: 6px; font-size: 13px; }
.tv-row summary { cursor: pointer; color: var(--muted); }
.tv-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tv-names .chip { font-size: 12px; padding: 2px 7px; }
.tv-names .chip.other { opacity: .55; }

#me-reservoir .btn.dim {
  opacity: .42; filter: grayscale(1); transition: opacity .15s;
  background-image: repeating-linear-gradient(135deg, rgba(128,128,128,.16) 0 4px, transparent 4px 9px);
}
#me-reservoir .btn.dim:hover, #me-reservoir .btn.dim:focus-visible { opacity: .8; }
.vote-lbl.dim { opacity: .5; }


.stat-times { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 6px; }
.stat .st-time {
  font-family: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; line-height: 1;
  padding: 4px 6px; min-height: 0; border-radius: 99px; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.stat .st-time.on { color: var(--water); border-color: var(--water); background: rgba(55,200,214,.10); }
.stat .st-time.rec { box-shadow: 0 0 0 1.5px #d4af37; }
.stat .st-time.rec:not(.on) { color: #d4af37; }


.vote-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vote-tag { white-space: nowrap; }
.vote-tag .vt-time { opacity: .75; }
.vote-edit { display: grid; gap: 6px; }
.vote-edit-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vote-edit-line > .faint { min-width: 64px; font-size: 13px; }
.vote-edit .btn.implied { border-style: dashed; }


.dt {
  
  container: dt / inline-size;
  --_bgx: var(--dt-bgx); --_bgy: var(--dt-bgy); --_bgz: var(--dt-bgz); --_pl: var(--dt-pl); --_pr: var(--dt-pr);
  --_tx: var(--dt-tx); --_ty: var(--dt-ty); --_ly: var(--dt-ly); --_title: var(--dt-title);
  position: relative; overflow: hidden; margin-bottom: 14px; border-radius: 16px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  color: var(--dt-text); font-size: var(--dt-size);
}
.dt-frame-gold {
  border: 2px solid transparent;
  background: linear-gradient(160deg, #1b2a33, #0f171c) padding-box,
    linear-gradient(135deg, #fff1a8, #d99a1e 30%, #7a4a0c 55%, #f5c84a 80%, #8a5a12) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 22px rgba(245, 179, 1, .25), inset 0 0 30px rgba(0, 0, 0, .45);
}
.dt-frame-accent { border: 2px solid var(--water); box-shadow: 0 0 18px rgba(var(--water-rgb), .2); }
.dt-frame-plain { border: 1px solid var(--line); }
.dt-frame-none { background: none; border-radius: 0; }
.dt-bg {
  position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none;
  background-position: var(--_bgx) var(--_bgy); transform: scale(var(--_bgz)); transform-origin: var(--_bgx) var(--_bgy);
}
.dt-dim { position: absolute; inset: 0; background: #000; pointer-events: none; }
.dt-body {
  position: relative; padding: 14px 16px 16px;
  padding-left: calc(16px + var(--_pl)); padding-right: calc(16px + var(--_pr));
}
.dt-frame-none .dt-body { padding-left: var(--_pl); padding-right: var(--_pr); }
.dt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dt-top { position: relative; transform: translate(calc(var(--_tx) * 1cqw), var(--_ty)); }
.dt-title { margin: 0; font-size: var(--_title); line-height: 1.1; font-weight: 800; letter-spacing: 0; text-transform: none; font-family: inherit; }
.dt-font-serif .dt-title, .dt-font-serif .dt-list { font-family: Georgia, "Times New Roman", "PT Serif", serif; }
.dt-font-display .dt-title { font-weight: 900; letter-spacing: -.01em; }
.dt:not(.no-shadow) .dt-title > span:not(.grad) {
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 1px 0 0 rgba(0, 0, 0, .5), -1px 0 0 rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .45);
}
.dt-title .grad {
  background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.dt-font-display .dt-title .grad { -webkit-text-stroke: 1px rgba(0, 0, 0, .45); }
.dt:not(.no-shadow) .dt-title .grad { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.dt-orn { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; color: #f5c84a; font-size: 14px; }
.dt-orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d99a1e 30%, #f5c84a); }
.dt-orn i:last-child { background: linear-gradient(90deg, #f5c84a, #d99a1e 70%, transparent); }
.dt-list { display: grid; gap: 7px; position: relative; }
.dt-cols { position: relative; margin-top: var(--_ly); }
.dt:not(.dt-frame-gold) .dt-cols { margin-top: calc(10px + var(--_ly)); }

.dt-cols.multi { display: grid; grid-template-columns: repeat(var(--dt-n, 2), minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.dt-tabs { display: none; }
.dt-col { min-width: 0; }
.dt-col-h {
  margin: 0 2px 7px; font-size: .78em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dt-label);
}
.dt-tab {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .86em; font-weight: 700;
  color: var(--dt-label); background: rgba(0, 0, 0, .35); border: 1px solid rgba(120, 180, 210, .2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-tab.on { color: var(--dt-text); background: rgba(var(--sun-rgb), .22); border-color: rgba(var(--sun-rgb), .7); box-shadow: 0 0 10px rgba(var(--sun-rgb), .25); }
.dt-tab .n { margin-left: 6px; font-size: .85em; opacity: .7; }

.dt-mode { display: inline-flex; gap: 4px; padding: 3px; margin: 0 0 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(120, 180, 210, .2); }
.dt-mode button {
  padding: 5px 12px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: .8em; font-weight: 700;
  color: var(--dt-label); background: transparent;
}
.dt-mode button.on { color: var(--dt-text); background: rgba(var(--sun-rgb), .25); box-shadow: 0 0 8px rgba(var(--sun-rgb), .25); }

.dt-slots { display: grid; gap: 10px; }
.dt-slot-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 5px; font-size: .8em; font-weight: 800; color: var(--dt-label); font-variant-numeric: tabular-nums; }
.dt-slot.now .dt-slot-h { color: var(--dt-text); }
.dt-slot.now .dt-list { border-radius: 10px; box-shadow: 0 0 0 1px rgba(var(--sun-rgb), .55), 0 0 14px rgba(var(--sun-rgb), .2); }
.dt-slot.past { opacity: .45; }
.dt-now { padding: 1px 8px; border-radius: 999px; font-size: .9em; color: #1b1300; background: rgb(var(--sun-rgb)); }
.dt-slot .dt-empty { padding: 2px 4px; }

.dt-rec { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: .88em; line-height: 1.45; color: var(--dt-text);
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(120, 180, 210, .25); }
.dt-rec b { display: block; margin-bottom: 2px; }
.dt-rec.hot { background: linear-gradient(90deg, rgba(var(--sun-rgb), .22), rgba(0, 0, 0, .35)); border-color: rgba(var(--sun-rgb), .6); }
.dt-type { font-weight: 700; }
.dt-tm { font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-in { display: block; margin-top: 2px; font-size: .74em; color: var(--dt-label); }
.dt-in b { margin-right: 6px; padding: 0 6px; border-radius: 6px; color: #1b1300; background: rgb(var(--sun-rgb)); }
.dt-in.hot { color: var(--dt-text); }

.dt-view-list.rows-right .dt-row, .dt-view-list.rows-alternate .dt-item:nth-child(even) .dt-row,
.dt-view-list.rows-zigzag .dt-item:nth-child(even) .dt-row { flex-direction: row-reverse; text-align: right; padding: 4px 4px 4px 12px; }
.dt-view-list.rows-right .dt-l, .dt-view-list.rows-alternate .dt-item:nth-child(even) .dt-l,
.dt-view-list.rows-zigzag .dt-item:nth-child(even) .dt-l { text-align: left; }
.dt-view-list.rows-right .dt-arr, .dt-view-list.rows-alternate .dt-item:nth-child(even) .dt-arr,
.dt-view-list.rows-zigzag .dt-item:nth-child(even) .dt-arr { transform: scaleX(-1); }
.dt-view-list.rows-right .dt-desc, .dt-view-list.rows-alternate .dt-item:nth-child(even) .dt-desc,
.dt-view-list.rows-zigzag .dt-item:nth-child(even) .dt-desc { margin: 4px calc(var(--dt-ico) + 16px) 2px 4px; text-align: right; }
.dt-view-list.rows-center .dt-list { justify-items: center; }
.dt-view-list.rows-center .dt-item { max-width: 100%; }
.dt-view-list.rows-center .dt-row { width: auto; }
.dt-view-list.rows-stagger .dt-item, .dt-view-list.rows-zigzag .dt-item { width: 86%; }
.dt-view-list.rows-stagger .dt-item:nth-child(even), .dt-view-list.rows-zigzag .dt-item:nth-child(even) { justify-self: end; }
.dt-view-compact.rows-center .dt-list, .dt-view-tiles.rows-center .dt-list { justify-content: center; }
.dt-view-compact.rows-right .dt-list { justify-content: flex-end; }
.dt-item { min-width: 0; }
.dt-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: calc(var(--dt-ico) + 8px);
  padding: 4px 12px 4px 4px; border-radius: 12px; text-align: left;
  font: inherit; color: var(--dt-text); line-height: 1.3;
  background: linear-gradient(90deg, rgba(10, 22, 30, .82), rgba(16, 32, 42, .62));
  border: 1px solid rgba(120, 180, 210, .16);
}
.dt.bold .dt-t { font-weight: 700; }
.dt.no-rows .dt-row { background: none; border-color: transparent; padding-left: 0; }
button.dt-row { cursor: pointer; }
button.dt-row:hover { border-color: rgba(120, 180, 210, .4); }
.dt:not(.no-shadow) .dt-row { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.dt-ico {
  flex: none; width: var(--dt-ico); height: var(--dt-ico); display: grid; place-items: center;
  border-radius: 9px; overflow: hidden; font-size: calc(var(--dt-ico) * .62); line-height: 1;
  background: linear-gradient(160deg, #2a4a5e, #12242f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .5);
}
.dt-ico img { width: 100%; height: 100%; object-fit: contain; }
.dt.ico-round .dt-ico { border-radius: 50%; }
.dt.ico-none .dt-ico { background: none; box-shadow: none; border-radius: 0; }
.dt-ico.blank { opacity: .35; }
.dt-t { flex: 1; min-width: 0; }
.dt-l { flex: none; max-width: 45%; color: var(--dt-label); font-size: .86em; text-align: right; }
.dt-arr { flex: none; font-size: 1.5em; line-height: 1; color: var(--dt-label); transition: transform .15s; }
.dt-item.open .dt-arr { transform: rotate(90deg); }
.dt-desc {
  display: none; margin: 4px 4px 2px calc(var(--dt-ico) + 16px); white-space: pre-line;
  font-size: .9em; line-height: 1.45; color: var(--dt-text); opacity: .9;
}
.dt-item.open .dt-desc { display: block; }
.dt-empty { color: var(--dt-label); font-size: .95em; }

.dt-view-tiles .dt-list { grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); }
.dt-view-tiles .dt-row { flex-direction: column; text-align: center; gap: 6px; padding: 10px 8px; min-height: 100%; }
.dt-view-tiles .dt-l { max-width: none; text-align: center; }
.dt-view-tiles .dt-arr { display: none; }
.dt-view-tiles .dt-desc { margin-left: 4px; }
.dt-view-tiles .dt-item.open { grid-column: 1 / -1; }

.dt-view-compact .dt-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-view-compact .dt-row { width: auto; min-height: 0; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; }
.dt-view-compact .dt-ico { width: calc(var(--dt-ico) * .7); height: calc(var(--dt-ico) * .7); font-size: calc(var(--dt-ico) * .45); border-radius: 50%; }
.dt-view-compact .dt-l { display: none; }
.dt-view-compact .dt-item.open { flex-basis: 100%; }
.dt-view-compact .dt-desc { margin-left: 8px; }
@container dt (max-width: 560px) {
  .dt-bg, .dt-body, .dt-top, .dt-cols, .dt-title {
    --_bgx: var(--dt-bgx-m); --_bgy: var(--dt-bgy-m); --_bgz: var(--dt-bgz-m); --_pl: var(--dt-pl-m); --_pr: var(--dt-pr-m);
    --_tx: var(--dt-tx-m); --_ty: var(--dt-ty-m); --_ly: var(--dt-ly-m); --_title: var(--dt-title-m);
  }
  .dt-body { padding: 12px 10px 12px; padding-left: calc(10px + var(--_pl)); padding-right: calc(10px + var(--_pr)); }
  .dt-row { gap: 9px; }
  .dt-l { max-width: 40%; font-size: .8em; }
  .dt-view-list.rows-stagger .dt-item, .dt-view-list.rows-zigzag .dt-item { width: 92%; }
  .dt-cols.multi { grid-template-columns: minmax(0, 1fr); }
  .dt-cols.multi .dt-col:not(.on) { display: none; }
  .dt-cols.multi .dt-col-h { display: none; }
  .dt-tabs { display: flex; gap: 6px; }
  .dt-tabs.many { flex-wrap: wrap; }
  .dt-tabs.many .dt-tab { flex: 1 1 28%; padding: 6px 8px; }
}


.dte-prev { margin: 10px 0 12px; }
.dte-days { display: flex; gap: 4px; flex-wrap: wrap; }
.dte-days .btn { min-width: 42px; }
.dte-days .btn .n { font-size: 10px; opacity: .7; margin-left: 3px; }
.dte-slots { display: grid; gap: 10px; }
.dte-slot { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.dte-slot.off { opacity: .5; }
.dte-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.dte-row .dt-ico { --dt-ico: 30px; }
.dte-row .nm { flex: 1; min-width: 0; }
.dte-row .nm b { display: block; overflow: hidden; text-overflow: ellipsis; }
.dte-row .nm small { color: var(--faint); font-size: 11px; }
.dte-list { display: grid; gap: 6px; }
.dte-emo { display: flex; flex-wrap: wrap; gap: 4px; }
.dte-emo button { width: 34px; height: 34px; font-size: 19px; padding: 0; border-radius: 8px; background: var(--panel-3); border: 1px solid var(--line); cursor: pointer; }
.dte-emo button.on { border-color: var(--water); box-shadow: 0 0 0 1px var(--water); }


.lay-groups { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.lay-group {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.lay-group .ico { font-size: 18px; }
.lay-group .n { font-size: 11px; color: var(--faint); background: var(--panel-3); border-radius: 999px; padding: 1px 7px; font-family: var(--mono); }
.lay-group.on { color: var(--text); border-color: var(--water); background: rgba(var(--water-rgb), .1); box-shadow: inset 0 -2px 0 var(--water); }
.lay-group-hint { margin: 0 2px 12px; }
.lay-pane > .lay-sub { margin: 18px 2px 8px; }
.lay-pane > .lay-sub:first-child { margin-top: 4px; }
.lay-pane > .lay-save { margin-top: 12px; }
@media (max-width: 620px) {
  .lay-group { flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 12px; white-space: normal; text-align: center; line-height: 1.2; }
  .lay-group .n { display: none; }
}
.lay-pane > details.lay-spoiler { padding-top: 12px; padding-bottom: 12px; margin-bottom: 8px; }
.lay-pane > details.lay-spoiler > summary h2 { font-size: 17px; line-height: 1.3; }

.dte-stage { margin: 10px 0 12px; }
.dte-devs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.dte-drag-hint { font-size: 11px; margin: -2px 0 8px; }
.dte-drag-hint:empty { display: none; }
.dte-frame-wrap { overflow: hidden; border-radius: 14px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px); padding: 0; }
.dte-frame { margin: 0 auto; }
.dte-frame > .dt { margin-bottom: 0; }
.dte-frame.dragging { touch-action: none; user-select: none; }
.dte-frame.dragging .dt { cursor: grab; }
.dte-frame.dragging .dt-top, .dte-frame.dragging .dt-cols { outline: 2px dashed rgba(var(--water-rgb), .75); outline-offset: 3px; cursor: move; border-radius: 8px; }
.dte-frame.dragging .dt-row { pointer-events: none; }


.ch-call-btn { flex: none; font-size: 15px; }
.call-box {
  position: fixed; z-index: 9000; left: 50%; transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top, 0px));
  width: min(420px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55); color: var(--text);
}
.call-box.st-incoming { border-color: var(--ok); }

.call-box.st-incoming::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(91, 201, 138, .25); opacity: 0; animation: call-pulse 1.4s ease-in-out infinite; }
@keyframes call-pulse { 50% { opacity: 1; } }
.call-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.call-txt { display: flex; flex-direction: column; min-width: 0; }
.call-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-status { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.call-box.st-active .call-status { color: var(--ok); }
.call-btns { display: flex; gap: 8px; flex: none; }
.call-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; display: grid; place-items: center; color: #fff;
  background: var(--panel-3);
}
.call-btn.ok { background: #2e9e5b; }
.call-btn.end { background: #d0402a; font-weight: 700; }
.call-btn.mute.on { background: var(--sun); }
.call-btn:active { transform: scale(.94); }

.call-box { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.call-box.dragging { opacity: .85; box-shadow: 0 14px 40px rgba(0, 0, 0, .7), 0 0 0 2px var(--ok); cursor: grabbing; }
.call-box.mini { width: auto; gap: 8px; padding: 6px 8px; border-radius: 999px; }
.call-box.mini .call-status { font-size: 13px; min-width: 34px; color: var(--text); }
.call-box.mini.st-active .call-status { color: var(--ok); }
.call-mini-ava { display: flex; line-height: 0; flex: none; }
.call-fold { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; align-self: flex-start; }
.call-box.mini .call-fold { align-self: center; }
.call-fold:hover { color: var(--text); background: var(--panel-3); }
.ch-call-log { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.ch-call-log.missed > span { color: var(--rust); }


.chs { display: flex; flex-direction: column; gap: 8px; }
.chs-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chs-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--panel-3); color: var(--muted); white-space: nowrap; }
.chs-chip.warn { color: var(--sun); white-space: normal; }
.chs-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.chs-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; user-select: none; }
.chs-sec > summary::-webkit-details-marker { display: none; }
.chs-sec > summary::after { content: '›'; margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .15s; }
.chs-sec[open] > summary::after { transform: rotate(90deg); }
.chs-sec[open] > summary { border-bottom: 1px solid var(--line-soft); }
.chs-ico { width: 22px; text-align: center; }
.chs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 14px 14px; }
.chs-body label.field { grid-template-columns: minmax(0, 1fr); }
.chs-body select { max-width: 100%; }
.chs-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 6px; }
.chs-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; cursor: pointer; }
.chs-toggle input { margin-top: 2px; flex: none; }


.vc-room .ch-room-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vc-sub { font-size: 11px; color: var(--muted); }
.vc-room.on { border-color: var(--ok); }
.vc-room.off { opacity: .55; cursor: default; }
.vc-faces { display: flex; margin-left: auto; }
.vc-faces .ch-ava { margin-left: -6px; border: 2px solid var(--panel); border-radius: 50%; }
.vc-faces .ch-ava::after { display: none; }
.ch-voice-chip { flex: none; }
.ch-voice-chip.on { color: var(--ok); border-color: var(--ok); }
.vc-box {
  position: fixed; z-index: 8990; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--panel-2); border: 1px solid var(--ok); border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55); color: var(--text); padding: 10px 12px;
  display: grid; gap: 10px;
}
.vc-head { display: flex; align-items: center; gap: 8px; cursor: grab; user-select: none; min-width: 0; }
.vc-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; animation: vc-blink 1.6s ease-in-out infinite; }
@keyframes vc-blink { 50% { opacity: .35; } }
.vc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-fold { margin-left: auto; color: var(--muted); }
.vc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; max-height: 42vh; overflow: auto; }
.vc-p { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 2px; min-width: 0; }
.vc-ava { position: relative; display: flex; line-height: 0; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; }
.vc-p.talk .vc-ava { box-shadow: 0 0 0 3px var(--ok); }
.vc-p.silenced { opacity: .5; }
.vc-ava .ch-ava::after { display: none; }
.vc-mute { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 12px; background: var(--panel-3); border-radius: 50%; padding: 1px; }
.vc-pname { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-btns { display: flex; gap: 10px; justify-content: center; }
.vc-tap { width: 100%; }
@media (min-width: 901px) { .vc-box { bottom: 16px; } }
.vc-admin { display: grid; gap: 10px; }
.vc-acard { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; display: grid; gap: 8px; background: var(--panel); }
.vc-arow { display: flex; gap: 4px; align-items: center; }
.vc-arow input { flex: 1; min-width: 0; }
.vc-sched { display: grid; gap: 8px; }
.vc-days { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-day { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.vc-day input { display: none; }
.vc-day.on { background: var(--water-dim); border-color: var(--water); color: var(--on-accent); }


.ch-fold { display: grid; gap: 2px; margin-top: 4px; }
.ch-fold-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; background: none; border: 0; border-radius: 8px;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-align: left; }
.ch-fold-head:hover { background: var(--panel-2); color: var(--text); }
.ch-fold-arrow { width: 12px; flex: none; }
.ch-fold-title { flex: 1; min-width: 0; }
.ch-fold-body { display: grid; gap: 2px; }


.vc-box { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vc-box .vc-people { touch-action: pan-y; }
.vc-box.dragging { opacity: .85; box-shadow: 0 14px 40px rgba(0, 0, 0, .7), 0 0 0 2px var(--ok); cursor: grabbing; }
.vc-box.mini { width: auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; }
.vc-box.talk .vc-live { box-shadow: 0 0 0 4px rgba(91, 201, 138, .3); animation: none; }
.vc-live.wait { background: var(--sun); }
.call-btn.sm { width: 36px; height: 36px; font-size: 15px; }
.vc-unfold { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.vc-unfold:hover, .vc-hbtn:hover { color: var(--text); background: var(--panel-3); }
.vc-hbtn { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.vc-head .vc-count { margin-right: auto; }
.ch-pop.vc-pop { z-index: 9100; }

.vc-pip-body { margin: 0; background: var(--panel-2); color: var(--text); font-family: system-ui, sans-serif; overflow: hidden; }
.vc-pip { display: flex; align-items: center; gap: 10px; height: 100vh; box-sizing: border-box; padding: 8px 12px; }
.vc-pip.talk .vc-live { box-shadow: 0 0 0 4px rgba(91, 201, 138, .3); }
.vc-pip-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12px; color: var(--muted); }
.vc-pip-txt b { color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-pip-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-pip-video { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

.vc-vol { position: absolute; left: -6px; top: -6px; font-style: normal; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px;
  border-radius: 99px; background: var(--panel-3); color: var(--text); border: 1px solid var(--line); }
.vc-vol-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-vol-hint { font-size: 11px; line-height: 1.35; }
.vc-vol-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-pop.vc-pop .vc-vol-btns .btn { flex: 1 1 auto; text-align: center; }
.vc-vol-btns .btn:disabled { opacity: .4; cursor: default; }


.rm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rm-block { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.rm-block.off { opacity: .55; }
.rm-prev { display: grid; gap: 10px; }
.rm-prev-block pre { margin: 0; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; font-size: 12px;
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--panel-3); }
@media (max-width: 900px) { .rm-wrap { grid-template-columns: 1fr; } }


.reg-tag { font-size: 22px; font-weight: 800; color: var(--water); text-align: center; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; word-break: break-all; }
.gs-head { gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.gs-head input { flex: 1 1 180px; max-width: 280px; }
.gs-list { display: grid; gap: 6px; }
.gs-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-2); }
.gs-who { min-width: 0; flex: 1 1 200px; }
.gs-tag { word-break: break-all; }
.gs-player { color: var(--water); }
.gs-when { font-size: 12px; margin-top: 2px; }
.gs-carto { font-size: 12px; margin-top: 2px; color: var(--water); font-weight: 600; }
.gs-act .btn.on { border-color: var(--water); }
.gs-act { gap: 6px; flex-wrap: nowrap; }
.gs-pages { gap: 10px; justify-content: center; align-items: center; margin-top: 10px; }
.gs-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; }
.gs-pick-item { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; }
.gs-pick-item.on { border-color: var(--water); background: rgba(var(--water-rgb), .16); }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; margin: 10px 0; }
.gs-switch { gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.gs-state b { display: block; margin-bottom: 4px; }


.ch-img.pending { opacity: .55; outline: 2px dashed var(--sun); outline-offset: 2px; }
.ch-pending { gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; margin-top: 4px; }
.ch-guest-warn { display: flex; gap: 10px; align-items: flex-start; margin: 6px 8px 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(233, 169, 60, .12); border: 1px solid rgba(233, 169, 60, .45); font-size: 13px; line-height: 1.35; }
.ch-guest-warn > div { flex: 1; min-width: 0; }
.ch-guest-warn b { display: block; color: var(--sun); margin-bottom: 2px; }
.ch-guest-warn-ico { font-size: 20px; line-height: 1; }
.ch-guest-note { font-size: 12px; padding: 2px 4px 6px; }
.ch-ban { margin: 6px 0; }
.ch-modq { border-color: var(--sun); color: var(--sun); }

.ch-rep-list { display: grid; gap: 10px; }
.ch-rep { display: grid; gap: 6px; padding: 10px 12px; margin: 0; }
.ch-rep-head { gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ch-rep-quote { white-space: pre-wrap; word-break: break-word; padding: 6px 10px; border-left: 3px solid var(--sun); background: var(--bg2, rgba(127,127,127,.08)); border-radius: 6px; }
.ch-rep-img { max-width: 160px; max-height: 160px; border-radius: 8px; cursor: zoom-in; }
.ch-rep-btns { gap: 6px; flex-wrap: wrap; }
.ch-rep-old { font-size: 12px; }

.login-logo-img { display: block; max-width: 100%; object-fit: contain; margin-bottom: 6px; }
.login-note { margin-top: 12px; white-space: pre-wrap; }
.mascot-corner.left { right: auto; left: clamp(-6px, 1vw, 10px); }
.login-mascot-img { height: auto; pointer-events: none; }
.lk-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
.lk-prev { position: sticky; top: 70px; min-height: 520px; display: grid; place-items: center; padding: 70px 16px 20px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(60% 60% at 70% 20%, rgba(var(--rust-rgb),.16), transparent 60%), radial-gradient(50% 50% at 20% 90%, rgba(var(--water-rgb),.12), transparent 60%), var(--void); }
.lk-prev .login-box { pointer-events: none; }
.lk-thumb { height: 48px; max-width: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.lk-img { display: grid; gap: 6px; }
@media (max-width: 900px) { .lk-wrap { grid-template-columns: 1fr; } .lk-prev { position: relative; top: 0; min-height: 460px; } }
.gs-keep { gap: 10px; align-items: flex-start; flex-wrap: nowrap; font-size: 14px; margin: 4px 0 8px; }
.gs-keep input { margin-top: 3px; flex: none; }
.vc-arow .btn { flex: none; min-width: 34px; padding-left: 0; padding-right: 0; }
.vc-arow .btn:disabled { opacity: .35; }
.ch-mypts:empty { display: none; }   

.ch-suggest button.ch-sug-shut { opacity: .6; }
.ch-sug-lock { margin-left: auto; font-size: 11px; color: var(--sun, #e6b422); white-space: nowrap; }


.wd-who { font-size: 12px; text-align: center; color: var(--muted); line-height: 1.5; }
.wd-who .wd-names { color: var(--text); }
.wd-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid currentColor; font-style: italic; font-weight: 700; font-size: 10px; line-height: 1; color: var(--muted); cursor: pointer; vertical-align: middle; margin-top: -2px;
  user-select: none; -webkit-tap-highlight-color: transparent; position: relative; }
.wd-info:hover, .wd-info.open, .wd-info:focus-visible { color: var(--water); outline: none; }
.wd-info::after { content: ''; position: absolute; inset: -9px; }          
.wd-pop { display: none; position: fixed; z-index: 1000; min-width: 120px; max-width: min(260px, calc(100vw - 16px)); max-height: 50vh; overflow-y: auto;
  padding: 6px 10px; border-radius: 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 6px 20px var(--shadow); font-style: normal; font-weight: 400; font-size: 13px; line-height: 1.45; text-align: left; white-space: nowrap; cursor: default; }
.wd-pop > div { overflow: hidden; text-overflow: ellipsis; }
.wd-pop > .wd-pop-h { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.wd-info.open .wd-pop { display: block; }


.ch-sec-row { display: flex; align-items: center; gap: 8px; }
.ch-sec-fold { flex: 1; min-width: 0; margin: 0; padding: 4px 0; background: none; border: 0; cursor: pointer; text-align: left; gap: 6px; }
.ch-sec-fold:hover { color: var(--text); }
.ch-sec-fold .ch-unread { order: 2; }
.ch-only-on { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px;
  background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.ch-only-on .ch-online-dot { display: inline-block; opacity: .45; }
.ch-only-on.on { border-color: var(--ok); color: var(--text); background: var(--panel-2); }
.ch-only-on.on .ch-online-dot { opacity: 1; }


.rx-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 12px; min-height: 52px; }
.rx-chip { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--panel-3); border: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.rx-chip.quick { border-color: var(--water); background: rgba(var(--water-rgb), .14); }
.rx-chip.drag { opacity: .55; outline: 2px solid var(--water); cursor: grabbing; }
.rx-list.dragging .rx-x { display: none; }
.rx-emo { font-size: 24px; line-height: 1; }
.rx-img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.rx-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; }
.rx-x:hover { color: var(--bad, #e5484d); }
.rx-prev { width: max-content; max-width: 100%; box-sizing: border-box; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.rx-prev .ch-emoji { cursor: default; }
.rx-prev .rx-img { width: 26px; height: 26px; }
.rx-cat { display: grid; gap: 8px; }
.rx-cat-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.rx-cat-tabs .btn { flex: none; }
@media (max-width: 700px) { .rx-cat-name { display: none; } }
.rx-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; max-height: 240px; overflow-y: auto;
  padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.rx-cat-item { height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 8px; cursor: pointer; padding: 0; }
.rx-cat-item:hover { background: var(--panel-3); }
.rx-cat-item.on { background: rgba(var(--water-rgb), .22); box-shadow: inset 0 0 0 1px var(--water); }
.rx-cat-item:disabled { opacity: .35; cursor: not-allowed; }
.rx-sm-list { display: grid; gap: 6px; }
.rx-sm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px; background: var(--panel-3); }
.rx-sm-row.bad { box-shadow: inset 0 0 0 1px var(--bad, #e5484d); }
.rx-sm-img { width: 36px; height: 36px; object-fit: contain; }
.rx-sm-code { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono, monospace); }
.rx-sm-code input { width: 120px; flex: none; }
.rx-sm-row input.rx-sm-alt { width: 56px; flex: none; text-align: center; }


.ch-video { margin-top: 6px; max-width: min(420px, 100%); }
.ch-video video { display: block; width: 100%; max-height: 360px; border-radius: 10px; background: #000; }
.ch-video-info { font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.ch-video-info a { color: var(--water); }
.ch-video-fail { font-size: 12px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }

.ch-mini {
  position: fixed; z-index: 8980; right: 8px; top: calc(140px + env(safe-area-inset-top, 0px));
  width: min(320px, calc(100vw - 16px)); box-sizing: border-box; display: grid; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55); touch-action: none; user-select: none; -webkit-user-select: none;
}
@media (max-width: 600px) { .ch-mini { width: min(240px, calc(100vw - 16px)); } }
.ch-mini.dragging { opacity: .85; cursor: grabbing; }
.ch-mini-item { display: grid; gap: 4px; }
.ch-mini-head { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; }
.ch-mini-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ch-mini-btn { flex: none; background: none; border: 0; color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.ch-mini-btn:hover { background: var(--panel-3); }
.ch-mini .ch-video { margin: 0; max-width: none; }
.ch-mini .ch-video video { max-height: 40vh; border-radius: 8px; }
.ch-mini .ch-video-info { display: none; }
.ch-vchip { max-width: 100%; }
.ch-vchip.bad { border-color: var(--rust); }
.ch-vbar-mini { display: inline-block; width: 60px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ch-vbar-mini b { display: block; height: 100%; background: var(--water); transition: width .2s; }
.vid-pick { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; margin-top: 6px; }


.ch-burn { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 14px; max-width: 320px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 120, 40, .16), rgba(255, 60, 60, .10)); border: 1px solid rgba(255, 120, 40, .45);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ch-burn.mine { cursor: default; }
.ch-burn:active { transform: scale(.98); }
.ch-burn-ico { font-size: 24px; line-height: 1; }
.ch-burn-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ch-burn-txt b { font-size: 14px; }
.ch-burn-st { font-size: 12px; }
.ch-burn-tog { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 8px; padding: 3px 7px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ch-burn-tog.on { background: rgba(255, 110, 40, .18); border-color: rgba(255, 110, 40, .7); color: var(--text); font-weight: 600; }
.ch-burn-view { position: fixed; inset: 0; z-index: 10000; background: #000; display: grid; place-items: center;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.ch-burn-cv { display: block; pointer-events: none; border-radius: 8px; }
.ch-burn-hud { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(260px, 70vw); text-align: center; color: #fff; font-size: 14px; pointer-events: none; }
.ch-burn-hud .ch-burn-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, #ff3d3d, #ff9a3d); }
.ch-note { font-size: 12px; margin-top: 4px; }
@media print { .ch-burn-view { display: none !important; } }


#view-contests.on { display: grid; gap: 12px; align-content: start; }
.ct-top { display: flex; gap: 10px; align-items: flex-start; }
.ct-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ct-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ct-tab.on { border-color: var(--water); background: rgba(var(--water-rgb), .14); font-weight: 700; }
.ct-tab.off { opacity: .6; }
.ct-wrap { display: grid; gap: 12px; }
.ct-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--panel-3);
  font-size: 22px; line-height: 1; overflow: hidden; }
.ct-ico img { width: 100%; height: 100%; object-fit: contain; }
.ct-ico.xl { width: 64px; height: 64px; font-size: 38px; border-radius: 14px; background: rgba(var(--sun-rgb), .12); border: 1px solid rgba(var(--sun-rgb), .4); }
.ct-ico.sm { width: 22px; height: 22px; font-size: 14px; border-radius: 6px; background: none; }
.ct-ico.xs { width: 18px; height: 18px; font-size: 13px; border-radius: 4px; background: none; }
.ct-hero { display: grid; gap: 10px; }
.ct-hero-top { display: flex; gap: 12px; align-items: center; }
.ct-hero-t { display: grid; gap: 4px; min-width: 0; }
.ct-hero-t h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.ct-dates { font-size: 12px; }
.ct-desc { white-space: pre-wrap; line-height: 1.45; font-size: 14px; }
.ct-prizes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.ct-prize { font-weight: 800; color: var(--sun); white-space: nowrap; }
.ct-winners { display: grid; gap: 6px; }
.ct-win { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.ct-medal { font-size: 18px; min-width: 24px; text-align: center; }
.ct-entry { display: grid; gap: 10px; }
.ct-search { max-width: 360px; }
.ct-items { display: grid; gap: 6px; }
.ct-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.ct-item.on { border-color: rgba(var(--ok-rgb), .7); background: rgba(var(--ok-rgb), .1); }
.ct-item-t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.ct-item-t b { overflow-wrap: anywhere; }
.ct-val { font-size: 12px; color: var(--water); }
.ct-item-d { font-size: 12px; }
.ct-qty { display: flex; gap: 4px; align-items: center; flex: none; }
.ct-qty input { width: 64px; text-align: center; padding: 6px 4px; }
.ct-qty .btn.sm { width: 30px; height: 32px; padding: 0; font-size: 16px; }
.ct-total { display: flex; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: rgba(var(--sun-rgb), .1);
  border: 1px solid rgba(var(--sun-rgb), .45); }
.ct-total-n { font-size: 22px; color: var(--sun); }
.ct-proofs { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-proof { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-3); }
.ct-proof img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.ct-proof-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--overlay);
  color: var(--text); cursor: pointer; font-size: 12px; }
.ct-proof-add { width: 92px; height: 92px; border-radius: 10px; border: 1px dashed var(--water-dim); background: rgba(var(--water-rgb), .06);
  color: var(--water); display: grid; place-content: center; gap: 2px; font: inherit; font-size: 12px; cursor: pointer; }
.ct-proof-add b { font-size: 24px; }
.ct-proof-wait { display: grid; place-content: center; font-size: 24px; animation: ct-wait 1.2s ease-in-out infinite; }
@keyframes ct-wait { 50% { opacity: .45; } }
.ct-proofs-need .ct-proof-add { border: 2px solid var(--bad, #e5484d); color: var(--bad, #e5484d); background: rgba(229, 72, 77, .08); }
.ct-proof-full img { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border-radius: 8px; }
.ct-my { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: rgba(var(--ok-rgb), .08); border: 1px solid rgba(var(--ok-rgb), .4); }
.ct-my.rejected { background: var(--danger-bg); border-color: var(--danger-line); }
.ct-my-st { font-size: 14px; }
.ct-my-st.bad { color: var(--danger-text); font-weight: 700; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--line); }
.ct-chip.bad { border-color: var(--danger-line); color: var(--danger-text); }
.ct-ok { color: var(--ok); }
.ct-friends { display: grid; gap: 8px; }
.ct-friend { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.ct-friend-f { display: grid; gap: 6px; flex: 1; min-width: 0; }
.ct-friend .ct-ed-val { flex-wrap: wrap; }
.ct-friend .ct-ed-val input { width: 100px; }
.ct-flag { font-size: 12px; font-weight: 700; }
.ct-flag.ok { color: var(--ok); }
.ct-flag.bad { color: var(--danger-text); }
.ct-growth { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.ct-rv-note.warn { color: var(--sun); }

.ct-set-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.ct-ed-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; }
.ct-ed-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.ct-prize-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-prize-in { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 110px; }
.ct-prize-in span { font-size: 20px; }
.ct-prize-in input { min-width: 0; width: 100%; }
.ct-icon-pick { display: flex; gap: 6px; align-items: center; }
.ct-icon-btn { padding: 0; border: 1px dashed var(--line); border-radius: 10px; background: none; cursor: pointer; }
input.ct-icon-emoji { width: 52px; flex: none; text-align: center; font-size: 18px; padding: 6px 4px; }
.ct-ed-items { display: grid; gap: 8px; }
.ct-ed-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); }
.ct-ed-item .ct-icon-pick { flex-direction: column; gap: 4px; }
.ct-ed-item input.ct-icon-emoji { width: 44px; font-size: 15px; padding: 4px 2px; }
.ct-ed-fields { display: grid; gap: 6px; flex: 1; min-width: 0; }
.ct-ed-val { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.ct-ed-val input[type="number"] { width: 110px; }
.ct-ed-on { flex-wrap: nowrap; align-items: flex-start; font-size: 14px; }
.ct-ed-on input { margin-top: 3px; flex: none; }
.ct-ed-move { display: grid; gap: 4px; }

.ct-rv { display: grid; gap: 10px; }
.ct-rv-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-rv-bar select { flex: 1; min-width: 0; }
.ct-rv-sum { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(var(--sun-rgb), .08); border: 1px solid rgba(var(--sun-rgb), .4); }
.ct-rv-row { display: grid; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.ct-rv-row.p1 { border-color: rgba(var(--sun-rgb), .8); }
.ct-rv-row.awarded { box-shadow: inset 4px 0 0 var(--ok); }
.ct-rv-row.rejected { opacity: .7; }
.ct-rv-head { display: flex; gap: 8px; align-items: baseline; }
.ct-rv-nick { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.ct-rv-score { font-weight: 800; color: var(--sun); white-space: nowrap; }
.ct-rv-note { font-size: 13px; color: var(--muted); }
.ct-rv-rej { font-size: 12px; color: var(--danger-text); }
.ct-rv-aw { font-size: 13px; color: var(--ok); font-weight: 700; }
@media (max-width: 560px) {
  .ct-hero-t h2 { font-size: 18px; }
  .ct-ico.xl { width: 52px; height: 52px; font-size: 30px; }
  .ct-item { gap: 8px; padding: 7px 8px; }
  .ct-item .ct-ico { width: 34px; height: 34px; font-size: 19px; }
  .ct-item-t b { font-size: 14px; line-height: 1.2; }
  .ct-qty { gap: 3px; }
  .ct-qty input { width: 46px; padding: 6px 2px; }
  .ct-qty .btn.sm { width: 26px; }
}


.rail-ico { width: 20px; height: 20px; display: block; object-fit: contain; border-radius: 4px; font-style: normal; }
.rail-ico.emo { font-size: 17px; line-height: 20px; text-align: center; }

.rail-btn > .rail-custom { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.tl-meter { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; }
.tl-list { display: grid; gap: 8px; margin-top: 10px; }
.tl-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); }
.tl-ico-btn { flex: none; border: 1px dashed var(--line); border-radius: var(--r); background: transparent; padding: 2px; cursor: pointer; color: inherit; }
.tl-ico-btn:hover { border-color: var(--water); }
.tl-prev { display: grid; pointer-events: none; }
.tl-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.tl-f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tl-f input { min-width: 0; width: 100%; }
.tl-warn { grid-column: 1 / -1; font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.tl-warn:empty { display: none; }
.tl-warn .bad { color: var(--sun); }
.tl-ico-prev { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r); }
.tl-ico-prev svg, .tl-ico-prev .rail-ico { width: 26px; height: 26px; }
.tl-ico-prev svg, .tl-ico-grid svg { stroke: currentColor; fill: none; stroke-width: 1.7; }
.tl-ico-prev .rail-ico.emo { font-size: 22px; line-height: 26px; }
.tl-ico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.tl-ico-grid button { height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.tl-ico-grid button svg { width: 22px; height: 22px; }
.tl-ico-grid button.on { border-color: var(--water); color: var(--water); background: rgba(var(--water-rgb), .10); }
@media (max-width: 600px) {
  .tl-fields { grid-template-columns: 1fr; }
}


.ch-game.ch-game-wait { justify-content: center; min-height: 48px; }


.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.ach-tile { --tier: var(--line); display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line-soft); }
.ach-tile.bronze { --tier: #c9824a; }
.ach-tile.silver { --tier: #c3cfd8; }
.ach-tile.gold { --tier: #f2c14e; }
.ach-tile.diamond { --tier: #7fe3f0; }
.ach-tile.none { opacity: .55; }
.ach-tile.none .ach-medal { filter: grayscale(1); }
.ach-tile.new { border-color: var(--tier); box-shadow: 0 0 0 1px var(--tier), 0 0 18px -6px var(--tier); }
.ach-medal { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  background: var(--panel-3); border: 3px solid var(--tier); }
.ach-body { min-width: 0; flex: 1; display: grid; gap: 3px; }
.ach-body b { font-size: 14px; }
.ach-tier { font-size: 12px; font-weight: 600; color: var(--tier); display: flex; gap: 6px; align-items: center; }
.ach-tile.none .ach-tier { color: var(--muted); }
.ach-new { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 6px;
  background: var(--tier); color: var(--ink); }
.ach-desc { font-size: 12px; line-height: 1.3; }
.ach-bar { height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin-top: 3px; }
.ach-bar i { display: block; height: 100%; background: var(--tier); }
.ach-tile.none .ach-bar i { background: var(--water); }
.ach-prog { font-size: 11px; font-family: var(--mono); }
.ach-levels { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; font-family: var(--mono); margin-top: 2px; }
.ach-levels > span:not(.faint) { padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); }
.ach-levels > span.got { color: #10131a; border-color: transparent; }
.ach-levels > span.bronze { background: #c9824a; } .ach-levels > span.silver { background: #c3cfd8; }
.ach-levels > span.gold { background: #f2c14e; } .ach-levels > span.diamond { background: #7fe3f0; }
.ach-ed { display: grid; gap: 10px; }
.ach-ed-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.ach-ed-row.off { opacity: .55; }
.ach-ed-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ach-ed-head b { flex: 1; min-width: 120px; }
.ach-ed-row input[type=text] { min-width: 0; }
.ach-ed-grid { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.ach-ed-grant { display: grid; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }


.cg-back { position: fixed; inset: 0; z-index: 1200; background: rgba(5, 9, 14, .78); display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.cg-wrap { --cg-green: #a8ef72; --cg-cell: #1a2535; width: min(850px, 100%); background: radial-gradient(ellipse at top, #20374b, var(--void) 65%);
  border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px; color: var(--text); box-shadow: 0 20px 60px var(--shadow); }
.cg-top { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.cg-top b { flex: 1; }
.cg-tag { color: var(--cg-green); font-size: 11px; letter-spacing: 1px; background: #a8ef7212; padding: 5px 9px; border: 1px solid #a8ef7233; border-radius: 30px; }
.cg-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.cg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.cg-stat { border: 1px solid var(--line); background: #111b2a; border-radius: 12px; padding: 8px 12px; }
.cg-stat small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.cg-stat strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.cg-stat:first-child strong { color: var(--cg-green); }
.cg-game { display: grid; grid-template-columns: 1fr 290px; gap: 12px; }
.cg-panel { background: linear-gradient(145deg, #19253a, #111b2b); border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-width: 0; }
.cg-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; font-weight: 750; letter-spacing: 1px; }
.cg-label span { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.cg-truck { margin: auto; max-width: 350px; }
.cg-board { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); aspect-ratio: 1;
  gap: 3px; padding: 7px; border: 3px solid #61728c; border-radius: 12px; background: #080e18; touch-action: none; user-select: none; -webkit-user-select: none; }
.cg-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #ffffff0a; background: var(--cg-cell); border-radius: 4px; }
.cg-cell.filled { background: color-mix(in srgb, var(--color) 40%, #1a2535); border-color: #ffffff40; box-shadow: inset 0 -3px 0 #0002; cursor: pointer; }
.cg-cell.good { outline: 2px solid var(--cg-green); outline-offset: -2px; }
.cg-cell.bad { background: #78384a; }
.cg-ico { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 1px 1px #0005); }
.cg-ico[hidden] { display: none; }
.cg-bumper { height: 12px; margin: 0 20px; background: #667487; border-radius: 0 0 8px 8px; box-shadow: 0 6px 0 -3px #060b13; }
.cg-bar { height: 5px; background: #2a3545; border-radius: 4px; margin-top: 16px; overflow: hidden; }
.cg-bar i { display: block; height: 100%; width: 0; background: var(--cg-green); transition: width .2s; }
.cg-hint { font-size: 12px; margin: 10px 0 0; min-height: 32px; color: var(--muted); }
.cg-controls { display: flex; gap: 8px; margin-top: 8px; }
.cg-controls .btn { flex: 1; font-size: 13px; padding: 10px 6px; }
.cg-controls .btn[hidden] { display: none; }
.cg-supply { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; touch-action: none; }
.cg-piece { height: 100px; padding: 6px 3px 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: #0e1726; color: var(--text); cursor: grab; touch-action: none; user-select: none; min-width: 0; }
.cg-piece.selected { border-color: var(--cg-green); background: #a8ef7210; }
.cg-piece.used { opacity: .28; }
.cg-piece:disabled { cursor: default; }
.cg-piece small { font-size: 10px; color: #c4d0df; white-space: nowrap; }
.cg-stock-ico { height: 30px; width: 40px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 2px #0007); }
.cg-shape { display: grid; grid-template-columns: repeat(var(--cols), 9px); grid-auto-rows: 9px; gap: 2px; pointer-events: none; }
.cg-shape .sq { background: var(--color); border-radius: 2px; box-shadow: inset 0 -2px 0 #0002; }
.cg-shape .sq.off { visibility: hidden; }
.cg-key { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 12px; }
.cg-key b { color: var(--text); }
.cg-status { margin-top: 12px; padding: 12px; border-radius: 12px; background: #a8ef7210; border: 1px solid #a8ef7225; color: #dcebd2; line-height: 1.5; font-size: 13px; }
.cg-foot { margin-top: 12px; border: 1px dashed #35465e; border-radius: 12px; padding: 10px 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.cg-foot summary { cursor: pointer; }
.cg-foot p { margin: 6px 0 0; }
.cg-ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1300; display: grid; opacity: .85; filter: drop-shadow(0 8px 10px #0009); will-change: transform; }
.cg-ghost > div { position: relative; overflow: hidden; background: var(--color); border-radius: 4px; }
.cg-ghost > div.off { visibility: hidden; }
@media (max-width: 650px) {
  .cg-back { padding: 0; }
  .cg-wrap { border-radius: 0; min-height: 100%; padding: 8px 10px 12px; border: 0; }
  .cg-top { font-size: 15px; }
  .cg-tag { font-size: 9px; padding: 3px 7px; }
  .cg-stats { gap: 5px; margin: 6px 0; }
  .cg-stat { padding: 4px 10px; border-radius: 10px; line-height: 1.1; }
  .cg-stat small { font-size: 9px; }
  .cg-stat strong { font-size: 20px; }
  .cg-game { grid-template-columns: 1fr; gap: 7px; }
  .cg-panel { padding: 9px; border-radius: 13px; }
  .cg-label { font-size: 10px; margin-bottom: 6px; }
  .cg-truck { width: clamp(150px, calc(100dvh - 420px), 300px); max-width: 100%; }
  .cg-board { padding: 5px; border-width: 2px; gap: 2px; border-radius: 8px; }
  .cg-bumper { height: 7px; margin: 0 14px; }
  .cg-bar { margin-top: 7px; height: 3px; }
  .cg-hint { margin-top: 5px; font-size: 11px; min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-controls { gap: 5px; margin-top: 6px; }
  .cg-controls .btn { padding: 8px 3px; font-size: 12px; min-height: 34px; }
  .cg-supply { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .cg-piece { height: 70px; padding: 3px 1px; gap: 2px; border-radius: 7px; }
  .cg-piece small { font-size: 9px; }
  .cg-stock-ico { height: 22px; width: 30px; }
  .cg-shape { grid-template-columns: repeat(var(--cols), 6px); grid-auto-rows: 6px; gap: 1px; }
  .cg-key { margin-top: 6px; gap: 8px; font-size: 10px; }
  .cg-status { margin-top: 6px; padding: 7px; font-size: 11px; line-height: 1.4; }
  .cg-foot { margin-top: 7px; font-size: 11px; padding: 8px 10px; }
}

.ch-game.cg-card { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; border-color: rgba(168, 239, 114, .45);
  background: linear-gradient(160deg, rgba(168, 239, 114, .10), rgba(var(--water-rgb), .05)); }
.ch-game.cg-card.st-moved, .ch-game.cg-card.st-expired, .ch-game.cg-card.st-cancelled, .ch-game.cg-card.st-declined { opacity: .7; }
.cg-resbox { display: grid; gap: 4px; padding: 0 12px; }
.cg-res { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.cg-res.win { background: rgba(168, 239, 114, .12); }
.cg-res span { color: var(--muted); white-space: nowrap; }


.sk-back { position: fixed; inset: 0; z-index: 1200; background: rgba(5, 9, 14, .8); display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.sk-wrap { --sk-gold: #edc671; --sk-green: #8fe36b; width: min(720px, 100%); background: radial-gradient(ellipse at top, #2c2a3f, var(--void) 70%);
  border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px; color: var(--text); box-shadow: 0 20px 60px var(--shadow); }
.sk-top { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.sk-top b { flex: 1; }
.sk-tag { color: var(--sk-gold); font-size: 11px; letter-spacing: 1px; background: #edc67112; padding: 5px 9px; border: 1px solid #edc67133; border-radius: 30px; }
.sk-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.sk-levels { display: grid; gap: 6px; margin-top: 10px; }
.sk-tabs { display: flex; gap: 6px; }
.sk-tab { flex: 1; border: 1px solid var(--line); background: #141c2a; color: var(--muted); border-radius: 10px; padding: 7px 4px; font-size: 13px; cursor: pointer; }
.sk-tab small { opacity: .7; }
.sk-tab.on { color: var(--text); border-color: var(--sk-gold); background: #edc67114; }
.sk-nums { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.sk-num { width: 34px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #111824; color: var(--muted); cursor: pointer; font-size: 13px; }
.sk-num.ok { color: var(--sk-green); border-color: #8fe36b55; }
.sk-num.on { color: var(--text); border-color: var(--sk-gold); background: #edc6711a; }
.sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.sk-stat { border: 1px solid var(--line); background: #141b28; border-radius: 12px; padding: 6px 12px; }
.sk-stat small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 1px; }
.sk-stat strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.sk-stat strong.low { color: #ff8a7a; }
.sk-stat:last-child strong { color: var(--sk-gold); }
.sk-stage { display: flex; justify-content: center; align-items: center; min-height: 160px; padding: 2px; touch-action: none; user-select: none; -webkit-user-select: none; }
.sk-board { position: relative; --cs: 30px; filter: drop-shadow(0 10px 18px #0008); }
.sk-board.done .sk-box::before { animation: sk-glow .7s ease 2; }
.sk-board.over { opacity: .75; }
.sk-tiles { display: grid; position: absolute; inset: 0; }
.sk-tiles i { display: block; }
.sk-o { visibility: hidden; }
.sk-f { background: #222b3a; box-shadow: inset 0 0 0 1px #ffffff08; }
.sk-f:nth-child(2n) { background: #252f3f; }
.sk-g { position: relative; }
.sk-g::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; border: 2px solid var(--sk-gold); box-shadow: 0 0 10px #edc67188, inset 0 0 6px #edc67166; }
.sk-w { background: linear-gradient(160deg, #5d6680, #3d4459); box-shadow: inset 0 2px 0 #ffffff26, inset 0 -3px 0 #0005; border-radius: 3px; }
.sk-box, .sk-man { position: absolute; left: 0; top: 0; width: var(--cs); height: var(--cs); transition: transform 70ms linear; will-change: transform; }
.sk-board.still .sk-box, .sk-board.still .sk-man { transition: none; }
.sk-box::before { content: ''; position: absolute; inset: 7%; border-radius: 4px; border: 2px solid #6b4318;
  background: linear-gradient(45deg, transparent 44%, #6b431899 45%, #6b431899 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #6b431899 45%, #6b431899 55%, transparent 56%), linear-gradient(#d0954c, #a96b2c);
  box-shadow: inset 0 2px 0 #ffffff40, 0 3px 4px #0006; }
.sk-box.on::before { border-color: #2f6a1d; background: linear-gradient(45deg, transparent 44%, #2f6a1d99 45%, #2f6a1d99 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #2f6a1d99 45%, #2f6a1d99 55%, transparent 56%), linear-gradient(#a6ec7c, #5fae3b);
  box-shadow: inset 0 2px 0 #ffffff50, 0 0 12px #8fe36b99; }
.sk-man i { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8fd3ff, #2f78d8 60%, #1b4c97); box-shadow: 0 3px 5px #0007, inset 0 -2px 0 #0003; }
.sk-man i::before, .sk-man i::after { content: ''; position: absolute; width: 18%; height: 18%; border-radius: 50%; background: #fff; top: 38%; transition: transform 70ms; }
.sk-man i::before { left: 26%; } .sk-man i::after { right: 26%; }
.sk-man.face-u i::before, .sk-man.face-u i::after { transform: translateY(-70%); }
.sk-man.face-d i::before, .sk-man.face-d i::after { transform: translateY(70%); }
.sk-man.face-l i::before, .sk-man.face-l i::after { transform: translateX(-70%); }
.sk-man.face-r i::before, .sk-man.face-r i::after { transform: translateX(70%); }
@keyframes sk-glow { 50% { box-shadow: inset 0 2px 0 #ffffff50, 0 0 22px #d8ff9a; filter: brightness(1.25); } }
.sk-wait { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 24px 10px; color: var(--muted); font-size: 13px; }
.sk-wait b { color: var(--text); font-size: 16px; }
.sk-wait-ico { font-size: 44px; filter: drop-shadow(0 4px 8px #0008); }
.sk-hint { font-size: 12px; margin: 8px 0 0; min-height: 20px; color: var(--muted); text-align: center; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sk-controls { display: flex; gap: 8px; margin-top: 8px; }
.sk-controls .btn { flex: 1; font-size: 13px; padding: 10px 6px; }
.sk-controls .btn[hidden] { display: none; }
.sk-pad { display: none; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 46px); gap: 6px; justify-content: center; margin-top: 10px; }
.sk-pad .btn { padding: 0; font-size: 18px; touch-action: none; user-select: none; -webkit-user-select: none; }
.sk-pad-u { grid-column: 2; } .sk-pad-l { grid-column: 1; grid-row: 2; } .sk-pad-d { grid-column: 2; grid-row: 2; } .sk-pad-r { grid-column: 3; grid-row: 2; }
.sk-foot { margin-top: 12px; border: 1px dashed #3d4459; border-radius: 12px; padding: 10px 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.sk-foot summary { cursor: pointer; }
.sk-foot p { margin: 6px 0 0; }
@media (pointer: coarse), (max-width: 650px) { .sk-pad { display: grid; } }
@media (max-width: 650px) {
  .sk-back { padding: 0; }
  .sk-wrap { border-radius: 0; min-height: 100%; padding: 8px 10px 12px; border: 0; }
  .sk-top { font-size: 15px; }
  .sk-tag { font-size: 9px; padding: 3px 7px; }
  .sk-levels { margin-top: 6px; gap: 5px; }
  .sk-tab { padding: 5px 2px; font-size: 12px; }
  .sk-num { width: 30px; height: 26px; font-size: 12px; }
  .sk-stats { gap: 5px; margin: 6px 0; }
  .sk-stat { padding: 3px 10px; border-radius: 10px; line-height: 1.1; }
  .sk-stat small { font-size: 9px; }
  .sk-stat strong { font-size: 18px; }
  .sk-controls { gap: 5px; margin-top: 6px; }
  .sk-controls .btn { padding: 8px 3px; font-size: 12px; min-height: 34px; }
  .sk-hint { margin-top: 5px; font-size: 11px; }
  .sk-pad { margin-top: 6px; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 44px); }
  .sk-foot { margin-top: 7px; font-size: 11px; padding: 8px 10px; }
}

.ch-game.sk-card { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; border-color: rgba(237, 198, 113, .45);
  background: linear-gradient(160deg, rgba(237, 198, 113, .10), rgba(var(--water-rgb), .05)); }
.ch-game.sk-card.st-moved, .ch-game.sk-card.st-expired, .ch-game.sk-card.st-cancelled, .ch-game.sk-card.st-declined { opacity: .7; }
.sk-resbox { display: grid; gap: 4px; padding: 0 12px; }
.sk-res { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.sk-res.win { background: rgba(237, 198, 113, .14); }
.sk-res span { color: var(--muted); white-space: nowrap; }


.pw-ipbind { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--line, rgba(255,255,255,.12)); }
.ipb { gap: 12px; }
.ipb-cur { font-size: 14px; }
.ipb-modes { margin: 0; }
.ipb-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.ipb-net { font-size: 12px; }
.ipb-bad { background: rgba(var(--rust-rgb), .12); border: 1px solid rgba(var(--rust-rgb), .4); color: #f4b39d; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.ipb-list { display: grid; gap: 8px; }
.ipb-row { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 10px; background: var(--panel-2, transparent); min-width: 0; }
.ipb-row.me { border-color: rgba(var(--water-rgb), .45); }
.ipb-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ipb-entries { overflow-wrap: anywhere; font-size: 13px; }
.ipb-acts { gap: 6px; flex-wrap: wrap; }
.ipb-hist summary { cursor: pointer; font-size: 13px; }
html[data-theme="light"] .ipb-bad { color: #8a2d12; }
textarea.ipb-input { resize: vertical; min-height: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }


.vc-add { margin-left: auto; font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-soft); }
.vc-add:hover { border-color: var(--ok); color: var(--ok); }
.vc-room.vc-temp .ch-room-ico { filter: saturate(1.2); }
.ch-room, .ch-person, .ch-dm-row { -webkit-touch-callout: none; }
.ch-pop .ch-pop-h { padding: 6px 10px 4px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pop button.danger { color: var(--danger-text); }
.vt-adm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; flex-wrap: wrap; }
.vt-adm-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; font-size: 13px; }

.vc-box:has(.vc-text) .vc-people { max-height: 22vh; }
.vc-text { display: grid; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 8px; min-width: 0; }
.vc-thead { font-size: 11px; }
.vc-tlist { max-height: 24vh; min-height: 48px; overflow: auto; display: grid; gap: 6px; align-content: start; font-size: 13px; line-height: 1.35; overscroll-behavior: contain; }
.vc-tmsg { padding: 5px 8px; border-radius: 10px; background: var(--panel); overflow-wrap: anywhere; user-select: text; }
.vc-tmsg.me { background: rgba(var(--water-rgb), .14); }
.vc-ttime { font-size: 11px; }
.vc-tempty { font-size: 12px; padding: 4px 2px; }
.vc-trow { display: flex; gap: 6px; }
.vc-trow .vc-tin { flex: 1; min-width: 0; }
.vc-tunread { font-size: 12px; color: var(--ok); white-space: nowrap; }

.vt-pick-box { display: grid; gap: 6px; }
.vt-pick-list { max-height: 34vh; overflow: auto; display: grid; gap: 2px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px; }
.vt-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.vt-pick:hover { background: var(--panel-2); }
.vt-pick input { flex: none; }
.vt-pick.auto { opacity: .7; }
.vt-rank { margin-left: auto; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--muted); }

.ipb-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.ipb-item.here { border-color: rgba(var(--ok-rgb), .55); }
.ipb-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ipb-addr { font-size: 14px; overflow-wrap: anywhere; }
.ipb-item.here .ipb-meta { color: var(--ok); }
.ipb-x { padding: 4px 10px; min-height: 32px; flex: none; }
.ipb-plus, .ipb-have { flex: none; }
.ipb-addrow { gap: 8px; align-items: flex-end; flex-wrap: nowrap; }
.ipb-addrow .field { flex: 1 1 auto; min-width: 0; margin: 0; }
.ipb-addrow > .btn { flex: none; }


.dk-card { --cw: 50px; position: relative; flex: none; width: var(--cw); aspect-ratio: 5 / 7; border-radius: calc(var(--cw) * .12); background: #f7f4ec;
  border: 1px solid #0003; color: #1b1d22; box-shadow: 0 2px 4px #0006; padding: 0; font: inherit; display: block; user-select: none; -webkit-user-select: none; }
.dk-card.red { color: #c62828; }
.dk-card .dk-r { position: absolute; left: 7%; top: 4%; font-weight: 800; font-size: calc(var(--cw) * .3); line-height: 1; display: flex; flex-direction: column; align-items: center; }
.dk-card .dk-r i { font-style: normal; font-size: calc(var(--cw) * .24); }
.dk-card .dk-s { position: absolute; right: 9%; bottom: 5%; font-size: calc(var(--cw) * .52); line-height: 1; }
.dk-card.back { background: repeating-linear-gradient(45deg, #2b4c8c 0 4px, #1d3768 4px 8px); border: 2px solid #f7f4ec; }
button.dk-card { cursor: pointer; transition: transform .12s; }
.dk-card.ok { box-shadow: 0 0 0 2px #a8ef72aa, 0 2px 4px #0006; }
.dk-card.dim { filter: brightness(.6); }

.dk-card.pend { opacity: .55; filter: grayscale(.6); animation: dk-pend 1.1s ease-in-out infinite; }
.dk-card.pend.acked { opacity: 1; filter: none; animation: none; }
@keyframes dk-pend { 50% { opacity: .35; } }
.dk-hand.dk-busy .dk-card, .dk-btns.dk-busy .btn { opacity: .5; filter: grayscale(.4); }
.dk-status.wait { color: #cfd8cf; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .dk-card.pend { animation: none; } }
.dk-card.sel { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--sun, #f5c542), 0 6px 10px #0008; }
.dk-card.mini { --cw: 24px; box-shadow: 0 1px 2px #0005; }
.dk-wrap { width: min(760px, 100%); background: radial-gradient(ellipse at 50% 35%, #1f5a3a, #0f2c1f 70%, #0b1712); border: 1px solid #ffffff1a; border-radius: 18px;
  padding: 12px 14px 14px; color: #eef3ee; box-shadow: 0 20px 60px #000a; display: grid; gap: 10px; }
.dk-wrap .cg-top b { flex: 1; }
.dk-wrap .cg-tag { color: #f5d77a; background: #f5d77a14; border-color: #f5d77a44; }
.dk-opps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dk-opp { flex: 1 1 0; min-width: 0; max-width: 220px; background: #0006; border: 1px solid #ffffff1a; border-radius: 12px; padding: 6px 8px; display: grid; gap: 4px; }
.dk-opp.turn { border-color: #f5d77a; box-shadow: 0 0 0 1px #f5d77a66; }
.dk-opp.out { opacity: .55; }
.dk-opp-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dk-opp-top b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-opp-cards { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.dk-backs { display: flex; }
.dk-backs i { width: 12px; height: 18px; border-radius: 2px; margin-right: -5px; background: repeating-linear-gradient(45deg, #2b4c8c 0 2px, #1d3768 2px 4px); border: 1px solid #f7f4ec; }
.dk-backs i.up { transform: translateY(-6px); box-shadow: 0 3px 4px #0009; }
.dk-n { font-weight: 700; font-size: 13px; margin-left: 6px; }
.dk-role { font-size: 11px; color: #cfe3d4; min-height: 14px; }
.dk-badge { font-size: 12px; }
.dk-felt { display: flex; gap: 12px; align-items: center; min-height: 150px; padding: 10px; border-radius: 14px; background: #0003; border: 1px dashed #ffffff22; }
.dk-deck { flex: none; display: grid; justify-items: center; gap: 6px; font-size: 11px; color: #cfe3d4; width: 74px; }
.dk-stack { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.dk-stack .dk-card { --cw: 42px; position: absolute; }
.dk-stack .dk-card.trump { transform: rotate(90deg) translateY(-14px); }
.dk-stack .dk-card.top { left: 6px; }
.dk-cnt { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 42px; text-align: center; font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 1px 3px #000; z-index: 1; }
.dk-trumplbl { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 8px; border-radius: 999px; background: #f5d77a1f; border: 1px solid #f5d77a66;
  color: #fff4cf; font-size: 12px; font-weight: 600; }
.dk-trumplbl b { font-size: 18px; line-height: 1; color: #f7f4ec; }
.dk-trumplbl b.red { color: #ff6b6b; }
.dk-stack.empty { width: 46px; height: 62px; border: 1px dashed #ffffff40; border-radius: 8px; }
.dk-trumpbig { font-size: 34px; line-height: 1; color: #eef3ee; }
.dk-trumpbig.red { color: #ff6b6b; }
.dk-table { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; align-content: flex-start; justify-content: center; }
.dk-pair { position: relative; width: 62px; height: 84px; border-radius: 8px; }
.dk-pair > .dk-card { --cw: 50px; position: absolute; left: 0; top: 0; }
.dk-pair > .dk-card.def { left: 12px; top: 14px; transform: rotate(8deg); }
.dk-pair.can { cursor: pointer; }
.dk-pair.can > .dk-card { box-shadow: 0 0 0 3px #a8ef72, 0 4px 10px #0008; }
.dk-empty { align-self: center; font-size: 13px; text-align: center; color: #cfe3d4; }
.dk-statusrow { display: flex; align-items: center; gap: 10px; }
.dk-status { flex: 1; font-size: 13px; line-height: 1.35; padding: 8px 10px; border-radius: 10px; background: #0005; border: 1px solid #ffffff1a; }
.dk-status.turn { border-color: #f5d77a; background: #f5d77a1a; }
.dk-time { flex: none; font-variant-numeric: tabular-nums; font-size: 15px; min-width: 52px; text-align: right; }
.dk-time.low { color: #ff8a80; }
.dk-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 12px; min-height: 84px; }
.dk-hand .dk-card { --cw: 54px; }
.dk-hand .dk-card.tr { background: #fff7dc; }
.dk-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dk-btns .btn { flex: 1 1 120px; max-width: 220px; }
.dk-btns .dk-give { flex: 0 0 auto; }
.dk-wrap .cg-foot { border-color: #ffffff22; color: #cfe3d4; }
.dk-opp { position: relative; }
.dk-bubble { position: absolute; left: 6px; right: 6px; top: calc(100% + 4px); z-index: 3; background: #fffdf5; color: #1d2a22; font-size: 12px; line-height: 1.3; padding: 5px 8px;
  border-radius: 10px; box-shadow: 0 4px 14px #0008; overflow-wrap: anywhere; animation: dk-pop .18s ease-out; pointer-events: none; }
.dk-bubble::before { content: ''; position: absolute; top: -5px; left: 14px; border: 5px solid transparent; border-top: 0; border-bottom-color: #fffdf5; }
@keyframes dk-pop { from { transform: scale(.85); opacity: 0; } }
.dk-handbar { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.dk-sortbtn { font-size: 12px; padding: 3px 10px; color: #cfe3d4; border-color: #ffffff2a; background: #0004; }
.dk-handbar { gap: 6px; }
.dk-sortbtn.on { color: #fff4cf; border-color: #f5d77a88; }

.dk-lefty .dk-handbar { justify-content: flex-start; }

.dk-hand .dk-card.ok { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dk-hand .dk-card.dk-dragging { opacity: .25; }
.dk-drag { position: fixed; left: 0; top: 0; z-index: 10050; pointer-events: none; display: flex; will-change: transform; filter: drop-shadow(0 10px 14px #000a); }
.dk-drag .dk-card { --cw: 54px; transform: rotate(-4deg); }
.dk-drag .dk-card.more { margin-left: calc(var(--cw) * -.62); }
.dk-felt.dk-drop { border-color: #a8ef72; background: #a8ef7214; }
.dk-pair.dk-drop-pair > .dk-card:first-child { box-shadow: 0 0 0 3px #f5d77a, 0 4px 10px #0008; }
.dk-offer:empty { display: none; }
.dk-offer-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; background: #f5d77a1f; border: 1px solid #f5d77a66;
  color: #fff4cf; border-radius: 12px; padding: 8px 10px; font-size: 13px; animation: dk-pop .2s ease-out; }
.dk-offer-btns { display: flex; gap: 6px; }
.dk-msg.sys { color: #a9c4b1; font-style: italic; font-size: 12px; text-align: center; }
.dk-nohand { align-self: center; text-align: center; font-size: 13px; color: #a9c4b1; padding: 24px 8px; }
.dk-talk { display: grid; gap: 6px; background: #0005; border: 1px solid #ffffff1a; border-radius: 12px; padding: 8px; color: #e8f1ea; }
.dk-talk-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.dk-talk-h small { font-weight: 400; color: #a9c4b1; }
.tk-auto { margin-left: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #cfe3d5; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.tk-auto.on { background: rgba(80,200,140,.18); border-color: rgba(80,200,140,.5); color: #bff2d4; }
.dk-log { max-height: 96px; overflow-y: auto; display: grid; gap: 3px; font-size: 13px; line-height: 1.35; overscroll-behavior: contain; }
.dk-log-empty { font-size: 12px; color: #a9c4b1; }
.dk-msg { overflow-wrap: anywhere; }
.dk-msg b { color: #f5d77a; font-weight: 600; }
.dk-msg.me { text-align: right; color: #cfe8ff; }
.dk-msg.watcher b { color: #b9c7ff; }
.dk-watchnote { padding: 14px 8px; display: grid; gap: 4px; }
.pk-me .dk-watchnote { width: 100%; }
.dk-say { display: flex; gap: 6px; }
.dk-say input { flex: 1; min-width: 0; background: #ffffff12; border: 1px solid #ffffff2a; color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 16px; }
.dk-say input::placeholder { color: #a9c4b1; }
@media (prefers-reduced-motion: reduce) { .dk-bubble { animation: none; } }
@media (max-width: 650px) {
  .dk-back { padding: 0; }
  .dk-wrap { border-radius: 0; min-height: 100%; padding: 8px 8px 12px; border: 0; gap: 8px; align-content: start; }
  .dk-opp { padding: 5px 6px; }
  .dk-felt { gap: 8px; padding: 8px 6px; min-height: 130px; }
  .dk-deck { width: 58px; }
  .dk-stack { width: 58px; height: 62px; }
  .dk-stack .dk-card { --cw: 36px; }
  .dk-cnt { width: 36px; }
  .dk-pair { width: 52px; height: 72px; }
  .dk-pair > .dk-card { --cw: 42px; }
  .dk-pair > .dk-card.def { left: 10px; top: 12px; }
  .dk-hand { gap: 4px; }
  .dk-hand .dk-card { --cw: 46px; }
  .dk-drag .dk-card { --cw: 46px; }
}

.ch-game.dk-card-feed { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; border-color: rgba(96, 200, 130, .5);
  background: linear-gradient(160deg, rgba(40, 140, 80, .18), rgba(var(--water-rgb), .05)); }
.ch-game.dk-card-feed.st-expired, .ch-game.dk-card-feed.st-cancelled { opacity: .7; }
.dk-mode { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-left: auto; margin-right: 8px; }
.dk-seats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 10px; }
.dk-seat { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 20px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); font-size: 13px; }
.dk-seat.free { opacity: .6; border-style: dashed; }
.dk-mini { display: grid; gap: 6px; padding: 0 10px; }
.dk-mini-ppl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dk-mini-p { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px 2px 2px; border-radius: 14px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.dk-mini-p.turn { border-color: var(--sun); }
.dk-mini-p.out { opacity: .55; }
.dk-last { display: grid; gap: 6px; justify-items: center; width: 100%; }
.dk-last-h { font-size: 12px; color: #a9c4b1; }
.dk-last.mini .dk-last-h { color: var(--muted, #8a9a90); }
.dk-last-table { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dk-last-res { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #a8ef7222; border: 1px solid #a8ef7266; color: #d9f7c4; }
.dk-last-res.took { background: #ff6b6b22; border-color: #ff6b6b66; color: #ffd0d0; }
.dk-last.mini .dk-last-res { color: inherit; font-size: 12px; }
.dk-mini-table { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 38px; }
.dk-mini-trump { font-size: 20px; font-weight: 700; }
.dk-mini-trump.red { color: #e53935; }
.dk-mini-trump small { font-size: 12px; color: var(--muted); font-weight: 400; }
.dk-mini-pair { position: relative; display: inline-block; width: 34px; height: 40px; }
.dk-mini-pair .dk-card { position: absolute; left: 0; top: 0; }
.dk-mini-pair .dk-card.def { left: 8px; top: 6px; }
.dk-res { display: grid; gap: 4px; padding: 0 12px; }
.dk-res-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 8px 3px 3px; border-radius: 14px; background: rgba(0, 0, 0, .15); }
.dk-res-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-res-row.win { border: 1px solid rgba(var(--sun-rgb), .6); }
.dk-res-row.loser { border: 1px solid rgba(229, 57, 53, .6); }
.dk-pick { display: flex; gap: 6px; flex-wrap: wrap; }

.dk-pile { flex: none; position: relative; width: 66px; height: 92px; display: grid; place-items: center; }
.dk-pile .dk-card.pile { --cw: 38px; position: absolute; left: calc(50% - 19px); top: 14px; box-shadow: 0 1px 3px #0007; }
.dk-pile-n { position: absolute; bottom: -4px; left: 0; right: 0; text-align: center; font-size: 11px; color: #cfe3d4; }
.dk-ghost { position: fixed; z-index: 1300; margin: 0; pointer-events: none; will-change: transform, opacity; }
.dk-auto { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 12px; color: #cfe3d4; cursor: pointer; }
.dk-auto.dk-nolimit { justify-content: flex-start; align-items: flex-start; font-size: 13px; color: inherit; margin-top: 4px; line-height: 1.35; }
.dk-nolimit input { margin-top: 2px; flex: none; }
.dk-auto input { flex: none; width: auto; }
@media (max-width: 650px) {
  .dk-pile { width: 50px; height: 80px; }
  .dk-pile .dk-card.pile { --cw: 32px; left: calc(50% - 16px); top: 10px; }
}


.pk-wrap .cg-top b { font-size: 16px; }
.pk-opps { align-items: stretch; }
.pk-seat { max-width: 200px; }
.pk-seat.win { border-color: #f5d77a; box-shadow: 0 0 0 2px #f5d77a88, 0 0 18px #f5d77a55; animation: pk-glow 1.2s ease-in-out 2; }
@keyframes pk-glow { 50% { box-shadow: 0 0 0 3px #f5d77a, 0 0 26px #f5d77a99; } }
.pk-seat-mid { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 40px; }
.pk-cards { display: flex; gap: 4px; perspective: 600px; }
.pk-cards .dk-card.sm, .pk-cards.sm .dk-card { --cw: 28px; }
.pk-sub { color: #f5d77a; }
.pk-net { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.pk-net.up { color: #a8ef72; }
.pk-net.down { color: #ff8a80; }
.pk-btn-d { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #111; font-size: 11px; font-weight: 800; flex: none; margin-left: 4px; box-shadow: 0 1px 2px #0008; }
.pk-blind { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; background: #ffffff1f; color: #cfe3d4; margin-left: 4px; }
.pk-bet { justify-self: center; }
.pk-won { justify-self: center; color: #a8ef72; font-weight: 800; font-size: 13px; }
.pk-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; }
.pk-chip i { width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle, #e53935 0 35%, #fff 36% 46%, #e53935 47%); box-shadow: 0 0 0 1px #0006, 0 1px 2px #0008; }
.pk-chip.stack i { background: radial-gradient(circle, #1e88e5 0 35%, #fff 36% 46%, #1e88e5 47%); }
.pk-chip.pot { font-size: 15px; }
.pk-chip.pot i { width: 18px; height: 18px; background: radial-gradient(circle, #f5c542 0 35%, #fff 36% 46%, #f5c542 47%); }
.pk-chip.fly { position: fixed; z-index: 1300; }
.pk-chip.fly i { width: 18px; height: 18px; }
.pk-felt { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px 10px; border-radius: 90px / 60px; background: radial-gradient(ellipse at 50% 40%, #2a7a4b, #17462c 75%);
  border: 6px solid #5b3a1e; box-shadow: inset 0 0 24px #0009, 0 4px 14px #0007; min-height: 170px; }
.pk-dealer { display: grid; justify-items: center; gap: 4px; color: #e8f1ea; }
.pk-dealer:empty { display: none; }
.pk-dealer-h { font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.pk-dealer .dk-card { --cw: 40px; }
.pk-dealer-note { font-size: 11px; color: #cfe3d4; }
.pk-board { display: flex; gap: 6px; justify-content: center; perspective: 700px; }
.pk-board .dk-card, .pk-slot { --cw: 50px; width: var(--cw); aspect-ratio: 5 / 7; }
.pk-slot { border-radius: 6px; border: 1px dashed #ffffff33; background: #0002; }
.dk-card.hl { box-shadow: 0 0 0 3px #f5d77a, 0 4px 10px #0008; transform: translateY(-4px); }
.dk-card.lo { filter: brightness(.55); }
.pk-pot { min-height: 22px; font-size: 13px; color: #e8f1ea; display: flex; align-items: center; gap: 6px; }
.pk-banner:empty { display: none; }
.pk-res { font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 20px; background: #000a; border: 1px solid #ffffff2a; text-align: center; }
.pk-res.win { color: #f5d77a; border-color: #f5d77a88; }
.pk-res.push { color: #e8f1ea; }
.pk-res.lose { color: #ffb4ab; }
.pk-me { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.pk-me-info { display: flex; align-items: center; gap: 8px; font-size: 13px; position: relative; }
.pk-me-info .faint { font-size: 12px; color: #cfe3d4; }
.pk-hole { display: flex; gap: 8px; perspective: 700px; }
.pk-hole .dk-card { --cw: 64px; }
.pk-hole.folded { opacity: .45; }
.pk-cat { font-weight: 700; color: #f5d77a; font-size: 14px; }
.pk-btns { align-items: center; }
.pk-raise { flex: 1 1 100%; max-width: 420px; display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: #0005; border: 1px solid #ffffff1a; }
.pk-raise-row { display: flex; gap: 6px; align-items: center; }
.pk-raise-row input[type=range] { flex: 1; min-width: 0; accent-color: #f5c542; }
.pk-raise-row .btn { flex: 1; }
.pk-raise-v { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.pk-allin { border-color: #e5393588; }
@media (max-width: 650px) {
  .pk-felt { border-radius: 40px / 30px; border-width: 4px; padding: 10px 6px; min-height: 140px; gap: 8px; }
  .pk-board { gap: 4px; }
  .pk-board .dk-card, .pk-slot { --cw: 46px; }
  .pk-dealer .dk-card { --cw: 34px; }
  .pk-hole .dk-card { --cw: 56px; }
  .pk-cards .dk-card.sm, .pk-cards.sm .dk-card { --cw: 24px; }
  .pk-seat { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) { .pk-seat.win { animation: none; } }
.pk-card-feed .ch-duel-head { flex-wrap: wrap; row-gap: 2px; }
.pk-card-feed .dk-res-row > span { flex: none; white-space: nowrap; }
.pk-card-feed .dk-mini-table .dk-card.mini { --cw: 26px; }
.pk-raise-row input.pk-raise-in { width: 96px; max-width: 96px; flex: 0 0 96px; font-weight: 700; text-align: center; padding: 6px 8px; }
.pk-handrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pk-handrow small { opacity: .85; }
.pk-bank { font-weight: 400; font-size: 11px; opacity: .85; }
.pk-rules-c { display: grid; gap: 8px; font-size: 13px; text-align: left; }
.pk-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.pk-pay { width: 100%; border-collapse: collapse; font-size: 12px; }
.pk-pay th, .pk-pay td { padding: 4px 6px; border-bottom: 1px solid #ffffff1a; text-align: left; }
.pk-pay th { font-weight: 600; opacity: .8; }
.pk-anteTable { font-size: 12px; color: #f3d98b; }
small.pk-anteTable { display: block; font-size: 11px; text-align: center; padding: 0 6px; }
.pk-res-parts { display: block; margin-top: 2px; opacity: .85; font-size: 12px; }
.pk-cashline { flex: 1 1 100%; text-align: center; font-size: 12px; color: #cfe3d4; }

.bj-felt { min-height: 0; padding: 12px 10px 10px; }
.bj-dealer { display: grid; justify-items: center; gap: 6px; color: #e8f1ea; }
.bj-dealer-row { display: flex; align-items: center; gap: 12px; }
.bj-dealer .pk-cards .dk-card, .bj-dealer .pk-slot { --cw: 46px; width: var(--cw); aspect-ratio: 5 / 7; }
.bj-shoe { width: 14px; height: 52px; border-radius: 4px; border: 1px solid #ffffff44; background: #0004; display: flex; align-items: flex-end; overflow: hidden; }
.bj-shoe i { display: block; width: 100%; background: repeating-linear-gradient(0deg, #2b4c8c 0 2px, #f7f4ec 2px 3px); }
.bj-cards { gap: 3px; flex-wrap: wrap; justify-content: center; }
.bj-cards .dk-card + .dk-card { margin-left: -14px; }
.bj-cards.sm .dk-card + .dk-card { margin-left: -10px; }
.bj-dcards .dk-card + .dk-card { margin-left: -12px; }
.bj-opps { align-items: stretch; }
.bj-seat { max-width: 230px; }
.bj-hands { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bj-hand { display: grid; justify-items: center; gap: 3px; padding: 4px 6px; border-radius: 10px; border: 1px solid transparent; }
.bj-hand.cur { border-color: #f5d77a; background: #f5d77a14; }
.bj-hand.o-bust, .bj-hand.o-lose, .bj-hand.o-sur { opacity: .6; }
.bj-hand.o-win, .bj-hand.o-bj { border-color: #a8ef7288; background: #a8ef7214; }
.bj-hand.big .dk-card { --cw: 58px; }
.bj-hand-info { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bj-total { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.bj-hand.big .bj-total { font-size: 16px; color: #f5d77a; }
.bj-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; background: #f5d77a33; color: #f5d77a; }
.bj-tag.split { background: #b9c7ff26; color: #cfd8ff; }
.bj-out { font-size: 12px; font-weight: 700; color: #e8f1ea; white-space: nowrap; }
.bj-insline { font-size: 12px; color: #cfe3d4; text-align: center; }
.bj-me { display: grid; justify-items: center; gap: 8px; padding-top: 4px; }
.bj-me .dk-watchnote { width: 100%; }
.bj-bet { flex: 1 1 100%; max-width: 440px; display: grid; gap: 8px; padding: 8px; border-radius: 10px; background: #0005; border: 1px solid #ffffff1a; color: #e8f1ea; font-size: 13px; text-align: center; }
.bj-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.bj-chipbtn { background: #ffffff12; border: 1px solid #ffffff2a; border-radius: 16px; padding: 5px 10px; cursor: pointer; }
.bj-chipbtn:hover { border-color: #f5d77a; }
.bj-betin { width: 110px; font-weight: 700; text-align: center; padding: 6px 8px; font-size: 16px; }
.bj-bet a { color: #f5d77a; }
@media (max-width: 650px) {
  .bj-hand.big .dk-card { --cw: 50px; }
  .bj-dealer .pk-cards .dk-card, .bj-dealer .pk-slot { --cw: 40px; }
  .bj-seat { max-width: none; flex: 1 1 45%; }
  .bj-btns .btn { flex: 1 1 40%; }
}


.sh-wrap { display: flex; flex-direction: column; gap: 12px; }
.sh-card { display: flex; flex-direction: column; gap: 10px; }
.sh-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.sh-maps, .sh-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-mapbtn { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 5px 14px; font-weight: 700; cursor: pointer; }
.sh-mapbtn.on { color: var(--text); border-color: var(--water); box-shadow: 0 0 0 1px var(--water) inset; }
.sh-palette { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.sh-palette .hint { white-space: normal; }
.sh-swatch { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 5px 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.sh-swatch.on { border-color: var(--water); box-shadow: 0 0 0 2px var(--water) inset; }
.sh-swatch i, .sh-tag i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; }
i.sh-none { background: repeating-linear-gradient(45deg, var(--panel-3) 0 3px, var(--line) 3px 6px); }
.sh-stage { position: relative; height: min(68vh, 640px); min-height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 40%, var(--panel-3), var(--stage)); }
.sh-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sh-ctl { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sh-cbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--overlay); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.sh-cbtn:active { background: var(--panel-3); }
.sh-hint { position: absolute; left: 10px; bottom: 8px; right: 56px; font-size: 11px; color: var(--muted); pointer-events: none; text-shadow: 0 1px 2px #000; }
.sh-tilt { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.sh-tilt input { flex: 1; }
.sh-editor { border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sh-ed-head { display: flex; align-items: center; gap: 4px; }
.sh-ed-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sh-ed-l { flex: none; width: 74px; font-size: 12px; color: var(--muted); }
.sh-ed-row .sh-palette { flex: 1; min-width: 0; }
.sh-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.sh-seg button { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 7px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
.sh-seg button.on { color: var(--text); border-color: var(--water); background: rgba(var(--water-rgb), .14); }
.sh-lvl { width: 64px; text-align: center; }
.sh-stats-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-stats-head h2 { margin: 0; margin-right: auto; }
.sh-table-wrap { overflow-x: auto; margin-top: 8px; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sh-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.sh-table td { padding: 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sh-table .num { text-align: right; white-space: nowrap; }
.sh-table tbody tr { cursor: pointer; }
.sh-table tbody tr:hover, .sh-table tbody tr.on { background: rgba(var(--water-rgb), .08); }
.sh-table tfoot td { color: var(--muted); border-bottom: 0; }
.sh-tag { display: inline-flex; align-items: center; gap: 6px; }
.sh-bar { height: 4px; border-radius: 2px; background: var(--line-soft); margin-top: 5px; overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 2px; }
.sh-empty-al { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; }
.sh-empty-al .sh-swatch { padding: 3px 7px; font-size: 12px; }
.sh-al-list { display: flex; flex-direction: column; gap: 6px; }
.sh-al-row { display: flex; gap: 6px; align-items: center; }
.sh-al-row input[type=color] { width: 40px; height: 34px; padding: 2px; flex: none; }
.sh-al-row .sh-al-tag { width: 80px; flex: none; }
.sh-al-row input[type=text]:not(.sh-al-tag) { flex: 1; min-width: 0; }
.sh-wrap.sh-full .sh-card { position: fixed; inset: 0; z-index: 60; border-radius: 0; overflow-y: auto; margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); }
.sh-wrap.sh-full .sh-stage { height: auto; flex: 1 1 auto; min-height: 0; }

.sh-wrap.sh-full .sh-card { overflow: hidden; gap: 8px; }
.sh-wrap.sh-full .sh-card > :not(.sh-stage):not(.sh-head),
.sh-wrap.sh-full .sh-head > :not(.sh-stages),
.sh-wrap.sh-full .sh-hint { display: none !important; }
.sh-wrap.sh-full .sh-head:has(.sh-stages[style*="none"]) { display: none; }
body.sh-noscroll { overflow: hidden; }
@media (max-width: 600px) {
  .sh-stage { height: min(62vh, 112vw); min-height: 300px; }
  .sh-cbtn { width: 34px; height: 34px; font-size: 16px; }
  .sh-ed-l { width: 56px; }
  .sh-table td, .sh-table th { padding: 5px 4px; }
}
.sh-editor .sh-palette { flex-wrap: wrap; overflow: visible; }
.sh-carto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-left: 4px; cursor: pointer; }
.sh-ro { font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 5px 10px; }
.sh-cartos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sh-carto-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.sh-stats-head + .hint { margin-top: 6px; }

.sh-maps-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-season { width: auto; padding: 5px 8px; font-weight: 700; }
.sh-stages { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-stages:empty { display: none; }
.sh-stagebtn { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sh-stagebtn small { font-weight: 500; opacity: .8; margin-left: 4px; }
.sh-stagebtn.on { color: var(--text); border-color: var(--gold, #ecbe48); box-shadow: 0 0 0 1px var(--gold, #ecbe48) inset; }
.sh-arc { border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.sh-arc:empty { display: none; }
.sh-arc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; }
.sh-arc-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.sh-arc-item { flex: none; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 5px 9px; font-size: 12px; color: var(--muted); }
.sh-arc-item.now { border-color: var(--gold, #ecbe48); color: var(--text); background: rgba(236, 190, 72, .1); }
.sh-rating { font-size: 11px; color: var(--muted); margin-left: 6px; }
.sh-full-lim { color: var(--gold, #ecbe48); font-weight: 700; }
.sh-settings { display: flex; flex-direction: column; gap: 14px; }
.sh-set-sec { display: flex; flex-direction: column; gap: 6px; }
.sh-set-sec .sec-title { font-weight: 700; }
.sh-shape { width: 130px; flex: none; }
.sh-x-ph { width: 34px; flex: none; }
.sh-rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.sh-rate { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 4px 6px; }
.sh-rate .sh-lvl { width: 56px; }
.sh-settings .sh-al-row .sh-lvl { width: 60px; flex: none; }
.sh-al-row > select:not(.sh-shape) { flex: 0 1 150px; width: auto; min-width: 0; }
@media (max-width: 600px) { .sh-shape { width: 96px; } .sh-settings .sh-al-row .sh-lvl { width: 52px; } .sh-settings .sh-al-row .sh-al-tag { width: 90px; } }
.sh-export { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sh-export-img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.sh-size-box { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.sh-size-box .sh-size { width: 64px; }

.sh-legend { position: absolute; left: 8px; bottom: 8px; max-width: min(46%, 210px); max-height: calc(100% - 50px); display: flex; flex-direction: column;
  background: var(--overlay); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; z-index: 2; }
.sh-legend.closed { max-width: none; }
.sh-legend-head { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 12px; text-align: left; padding: 6px 9px; cursor: pointer; }
.sh-legend-list { overflow-y: auto; padding: 0 8px 6px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; }
.sh-legend-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sh-legend-row i { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; }
.sh-legend-row b { color: var(--text); }
.sh-legend-row .faint { margin-left: auto; padding-left: 6px; }
.sh-legend-row.mine { background: rgba(255, 213, 74, .14); border-radius: 6px; margin: 0 -4px; padding: 2px 4px; box-shadow: 0 0 0 1px #ffd54a inset; }
.sh-legend-me { font-size: 10px; font-weight: 800; color: #ffd54a; text-transform: uppercase; }
.sh-cbtn-txt { font-size: 13px; font-weight: 800; }
.sh-abbr { width: 64px !important; flex: none !important; text-align: center; }
.sh-abbr-ph { width: 64px; flex: none; }
.sh-pts-grid { display: grid; grid-template-columns: 90px 120px 40px; gap: 6px; align-items: center; justify-content: start; }
.sh-pts-grid .sh-lvl { width: 100%; }
.sh-pts-miss { font-size: 12px; color: var(--sun, #e5a50a); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sh-lvl-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sh-carto-al { display: inline-flex; align-items: center; gap: 6px; }
.sh-carto-al i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sh-carto-al select { width: auto; padding: 4px 8px; }
.sh-export-modes { display: grid; gap: 8px; }
.sh-export-modes button { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.sh-export-modes button small { color: var(--muted); font-weight: 400; }

.sh-stage .sh-hint { top: 8px; bottom: auto; }


.gm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 14px var(--gm-chat-w, 400px); column-gap: 2px; row-gap: 14px; align-items: start; }

.gm-split { position: sticky; top: 10px; height: calc(100vh - 150px); min-height: 460px; cursor: col-resize; touch-action: none; display: grid; place-items: center; border-radius: 8px; }
.gm-split::before { content: ''; width: 4px; height: 56px; border-radius: 4px; background: var(--line); transition: background .15s, height .15s; }
.gm-split:hover::before, .gm-split.drag::before { background: var(--water); height: 96px; }
.gm-wrap.resizing { user-select: none; cursor: col-resize; }
.gm-wrap.resizing iframe { pointer-events: none; }
.gm-main { min-width: 0; display: grid; gap: 10px; }
.gm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; }
.gm-bal { font-size: 15px; display: flex; align-items: baseline; gap: 4px; }
.gm-turns { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.gm-turn { animation: gm-pulse 1.6s ease-in-out infinite; }
@keyframes gm-pulse { 50% { box-shadow: 0 0 0 4px rgba(var(--water-rgb, 55, 200, 214), .25); } }
.gm-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.gm-tabs::-webkit-scrollbar { display: none; }
.gm-tab { flex: none; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; cursor: pointer; position: relative; }
.gm-tab.on { background: var(--water); color: #06141a; border-color: var(--water); font-weight: 600; }
.gm-dot { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; margin-left: 6px; border-radius: 99px; background: var(--sun); color: #1a1208; font-size: 11px; text-align: center; padding: 0 4px; }
.gm-content { display: grid; gap: 10px; min-width: 0; }
.gm-sec-t { font-weight: 650; font-size: 14px; margin: 6px 2px 0; }
.gm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.gm-card { display: grid; gap: 7px; align-content: start; }
.gm-card-h { display: flex; align-items: center; gap: 8px; font-size: 16px; }

.ai-level { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line, #ffffff22); border-radius: 12px; background: #ffffff08; }
.ai-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai-num { font-size: 22px; min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.ai-name { font-weight: 600; }
.ai-row { display: flex; align-items: center; gap: 8px; }
.ai-step { min-width: 34px; padding-inline: 0; }
.ai-range { flex: 1; height: 28px; }
.ai-scale { display: flex; justify-content: space-between; font-size: 11px; }
.ai-desc { font-size: 12px; }
.ai-fair { font-size: 12px; }
.gm-ai-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-ai-row .btn { flex: 1; }
.ai-color { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-ico { font-size: 22px; line-height: 1; }
.gm-lobby { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px; border-radius: 8px; background: var(--panel-2); }
.gm-lobby-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:is(.gm-wrap, .bg-wrap) .ch-ava { flex: none; aspect-ratio: 1; }
.gm-hubgames { display: grid; gap: 10px; }
.gm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gm-row.turn { border-color: var(--water); }
.gm-row-b { flex: 1; min-width: 0; }
.gm-row-b .faint { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-place { width: 22px; text-align: center; font-weight: 700; color: var(--muted); }
.gm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gm-stat { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.gm-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gm-people { max-height: 240px; }


.gm-chat { position: sticky; top: 10px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; height: calc(100vh - 150px); min-height: 460px; min-width: 0; }
.gm-chat-bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.gm-chat-bar::-webkit-scrollbar { display: none; }
.gm-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-chip.on { border-color: var(--water); box-shadow: 0 0 0 1px var(--water) inset; }
.gm-chip-n { background: var(--water); color: #06141a; border-radius: 99px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.gm-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gm-start-t { font-weight: 650; font-size: 13px; }
.gm-start-sw { display: inline-flex; gap: 6px; }
.gm-start-h { font-size: 12px; }
.gm-chat-top { display: none; }
.gm-chat-root { position: relative; min-height: 0; }
#gm-chat-root .ch-wrap { grid-template-columns: 1fr; height: 100%; min-height: 0; }
#gm-chat-root .ch-side { display: none; }
#gm-chat-root .ch-side-btn { display: inline-flex; }
#gm-chat-root .ch-wrap.side-open .ch-side { display: flex; position: absolute; inset: 44px 6px 6px; z-index: 40; box-shadow: 0 20px 60px var(--shadow); }
#gm-chat-root .ch-wrap.side-open .ch-side-back { display: block; position: absolute; inset: 0; z-index: 39; background: rgba(0, 0, 0, .35); }
.gm-fab, .gm-chat-back { display: none; }
@media (max-width: 1100px) and (min-width: 901px) { .gm-wrap { grid-template-columns: minmax(0, 1fr) 340px; } }

@media (max-width: 900px) {
  .gm-wrap { grid-template-columns: 1fr; gap: 8px; }
  .gm-split { display: none; }
  .gm-head { padding: 8px 10px; }
  .gm-chat { position: fixed; left: 0; right: 0; top: 11dvh; bottom: auto; z-index: 60; height: auto; min-height: 0; display: block; padding: 6px 0 0;
    background: var(--bg, var(--void)); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px var(--shadow); transform: translateY(105%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .gm-chat.open { transform: none; visibility: visible; transition: transform .22s ease; }
  .gm-chat-bar { padding: 0 8px 6px; }
  .gm-chat-top { display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 2px 8px 6px; min-height: 34px; touch-action: none; }
  .gm-grab { position: absolute; left: 50%; top: 4px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line); }
  .gm-fold { font-weight: 600; }
  #gm-chat-root .ch-wrap.side-open .ch-side { position: fixed; inset: 14dvh 8px 80px; }
  .gm-chat-back.on { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .45); }
  .gm-fab { display: flex; position: fixed; right: 14px; z-index: 55; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center;
    border: 0; background: var(--water); color: #06141a; font-size: 24px; box-shadow: 0 8px 24px var(--shadow); cursor: pointer; }
  .gm-fab .ch-badge { top: -2px; right: -2px; }
  .gm-content { padding-bottom: 70px; }
}
.ch-game.hub .ch-game-ico { font-size: 26px; }


.bg-wrap { width: min(760px, 100%); background: radial-gradient(ellipse at top, #20374b, var(--void) 65%); border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 14px 14px; color: var(--text); box-shadow: 0 20px 60px var(--shadow); display: grid; gap: 10px; }
.bg-wrap .cg-top b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-wrap .cg-top .cg-tag { white-space: nowrap; flex-shrink: 0; }

.bg-wrap .cg-top .bg-time { flex: none; min-width: 0; }
.bg-wrap .cg-tag.on { color: #06141a; background: var(--water); border-color: var(--water); }
.bg-time.low { color: #ff6b6b; }
.bg-players { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-pl { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 99px; background: #ffffff0d; border: 1px solid #ffffff1a; font-size: 13px; min-width: 0; }
.bg-pl.turn { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc) inset; }
.bg-pl-n { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-pl-x { color: var(--muted); font-size: 12px; white-space: nowrap; }
.bg-body { position: relative; display: grid; justify-items: center; }
.bg-status { font-size: 13px; color: #dbe7f3; min-height: 18px; text-align: center; }
.bg-result { font-size: 18px; font-weight: 700; }
.bg-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bg-btns:empty { display: none; }
.bg-lobby { display: grid; gap: 6px; text-align: center; padding: 20px 10px; font-size: 15px; }
.bg-talk .dk-log { max-height: 110px; }

.ck-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: min(100%, 480px, calc(100dvh - 330px)); min-width: 260px; aspect-ratio: 1; border: 4px solid #5b3d22; border-radius: 6px; overflow: hidden; touch-action: manipulation; }
.ck-cell { border: 0; padding: 0; position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.ck-cell.light { background: #e9d2a6; cursor: default; }
.ck-cell.dark { background: #8a5a35; }
.ck-cell.last { background: #a9773f; }
.ck-board.live { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ck-cell.can .ck-pc { cursor: grab; box-shadow: 0 0 0 3px #ffd34a, 0 0 14px 3px #ffd34a99, inset 0 -4px 0 #0003; animation: ck-ready 1.6s ease-in-out infinite; }
@keyframes ck-ready { 50% { box-shadow: 0 0 0 3px #ffd34a, 0 0 4px 1px #ffd34a55, inset 0 -4px 0 #0003; } }
.ck-cell.sel { background: #c79a3a; }
.ck-cell.sel .ck-pc { cursor: grabbing; box-shadow: 0 0 0 3px #fff6c8, 0 0 16px 4px #ffd34acc, inset 0 -4px 0 #0003; }
.ck-cell.to::before { content: ''; position: absolute; width: 32%; height: 32%; border-radius: 50%; background: #9dff9dcc; box-shadow: 0 0 10px #9dff9d; pointer-events: none; }
.ck-cell.end::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 3px dashed #9dff9daa; pointer-events: none; }
.ck-cell.hover { background: #4f7f34; }
.ck-cell.hover::before { width: 60%; height: 60%; }
.ck-pc.lifted { opacity: .25; }
.ck-pc.moving { position: relative; z-index: 3; }
.ck-pc.ck-ghost { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; filter: drop-shadow(0 10px 10px #000b); will-change: transform; }
.ck-pc.ck-dying { position: absolute; left: 12%; top: 12%; width: 76%; pointer-events: none; }
.ck-pc { position: relative; width: 76%; height: auto; aspect-ratio: 1; box-sizing: border-box; flex: none; border-radius: 50%; box-shadow: inset 0 -4px 0 #0003, 0 2px 3px #0007; display: grid; place-items: center; }
.ck-pc.w { background: radial-gradient(circle at 35% 30%, #fff, #e3dccd); border: 2px solid #bfb6a3; }
.ck-pc.b { background: radial-gradient(circle at 35% 30%, #59606b, #15181d); border: 2px solid #000; }
.ck-pc.king::after { content: '♛'; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(16px, 5.6vw, 30px); line-height: 1; color: #d4a017; text-shadow: 0 1px 1px #0008; }
.ck-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }
.ck-dot.w { background: #f1ece2; border: 1px solid #aaa; }
.ck-dot.b { background: #22262c; border: 1px solid #000; }

.bs-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; width: 100%; }
.bs-field { display: grid; gap: 4px; justify-items: center; }
.bs-cap { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.bs-left { display: flex; gap: 3px; }
.bs-left i { width: calc(var(--n) * 7px); height: 6px; border-radius: 3px; background: #7fb3e6; }
.bs-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: min(100%, 360px); aspect-ratio: 1; padding: 4px; background: #0b2a46; border-radius: 8px; border: 2px solid #1f5684; touch-action: manipulation; }
.bs-grid.small { width: min(100%, 300px); }
.bs-cell { border: 0; padding: 0; border-radius: 2px; background: #134671; position: relative; cursor: default; }
.bs-field.aim .bs-cell:not(.hit):not(.miss) { cursor: crosshair; background: #18578a; }
.bs-field.aim .bs-cell:not(.hit):not(.miss):active { background: #2a78b8; }
.bs-cell.ship { background: #8fa3b8; }
.bs-cell.picked { background: #e6c35c; }
.bs-cell.bad { background: #c0504d; }
.bs-cell.miss::after { content: ''; position: absolute; inset: 38%; border-radius: 50%; background: #9fc6ea; }
.bs-cell.hit { background: #d9534f; }
.bs-cell.hit::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }
.bs-cell.sunk { background: #5a1f1f; }
.bs-cell.last { outline: 2px solid #ffd34a; outline-offset: -2px; }

.mn-board { position: relative; display: grid; grid-template-columns: 1.5fr repeat(9, 1fr) 1.5fr; grid-template-rows: 1.5fr repeat(9, 1fr) 1.5fr; gap: 1px;
  width: min(100%, 640px); aspect-ratio: 1; background: #1c3b2c; border: 2px solid #2f5d45; border-radius: 6px; padding: 1px; }
.mn-cell { position: relative; border: 0; padding: 1px; background: #e8efe4; color: #1b2a20; font-size: 8px; line-height: 1.05; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; min-width: 0; min-height: 0;
  box-shadow: inset 0 0 0 2px var(--own, transparent); }
.mn-cell.go, .mn-cell.jail, .mn-cell.park, .mn-cell.gojail { font-size: 16px; background: #d6e6d0; }
.mn-cell.chance, .mn-cell.chest, .mn-cell.tax { font-size: 13px; }
.mn-cell.owned { background: #dfe7da; background: color-mix(in srgb, var(--own) 42%, #eef3ea); box-shadow: inset 0 0 0 2px var(--own); }
.mn-cell.mort { opacity: .55; background-image: repeating-linear-gradient(45deg, #0000 0 5px, #0002 5px 7px); }

.mn-toks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mn-tk { position: absolute; width: 4.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px #000a, 0 0 0 1px #0006;
  display: grid; place-items: center; color: #fff; font: 800 9px/1 system-ui, sans-serif; font-style: normal; text-shadow: 0 1px 1px #000; transition: left .17s ease-in-out, top .17s ease-in-out; }
.mn-tk.turn { box-shadow: 0 0 0 3px #ffd34a, 0 2px 6px #000a; z-index: 1; }
.mn-dice2 { display: flex; gap: 12px; padding: 4px 0 2px; }
.mn-d { width: 38px; height: 38px; border-radius: 8px; background: #fbfbf6; box-shadow: inset 0 -3px 0 #d8d6cc, 0 3px 8px #000a; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px; gap: 1px; }
.mn-d i { border-radius: 50%; background: #1d1f22; margin: 1px; }
.mn-d[data-v="1"] i { background: #c8262c; }
.mn-log > div.now { color: #fff; }
.mn-log > div:not(.now) { opacity: .65; }
.mn-cell.pend { animation: gm-pulse 1.2s ease-in-out infinite; outline: 2px solid #ffd34a; z-index: 1; }
.mn-strip { position: absolute; left: 0; right: 0; top: 0; height: 22%; }
.mn-cell.side-t .mn-strip { top: auto; bottom: 0; }
.mn-cell.side-l .mn-strip { height: auto; width: 22%; top: 0; bottom: 0; left: auto; right: 0; }
.mn-cell.side-r .mn-strip { height: auto; width: 22%; top: 0; bottom: 0; right: auto; left: 0; }
.mn-cell.prop.side-l { padding-right: 22%; }
.mn-cell.prop.side-r { padding-left: 22%; }
.mn-cell.prop.side-t { padding-bottom: 22%; }
.mn-cell.prop.side-b { padding-top: 22%; }
.mn-name { overflow-wrap: anywhere; hyphens: manual; max-width: 100%; }
.mn-houses { font-size: 7px; letter-spacing: -2px; }
.mn-tokens { position: absolute; bottom: 1px; left: 1px; right: 1px; display: flex; gap: 1px; justify-content: center; }
.mn-tok { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #000a; box-shadow: 0 1px 2px #0008; }
.mn-center { grid-row: 2 / 11; grid-column: 2 / 11; display: grid; align-content: start; justify-items: center; gap: 4px; padding: 6px; background: #12301f; color: #e7f2e9; overflow: hidden; min-height: 0; }
.mn-round { font-size: 12px; color: #a9c4b1; }
.mn-dice { display: flex; gap: 6px; font-size: 34px; line-height: 1; }
.mn-card { font-size: 12px; background: #fff3; padding: 4px 8px; border-radius: 6px; text-align: center; }
.mn-log { display: grid; gap: 2px; font-size: 11px; width: 100%; overflow: hidden; }
.mn-log > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-deal { display: grid; gap: 4px; text-align: left; margin: 0 auto 8px; width: min(100%, 520px); padding: 8px 10px; border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff1a; font-size: 13px; }
.mn-deal.me { border-color: var(--water); box-shadow: 0 0 0 1px var(--water) inset; }
.mn-deal-h { font-weight: 700; }
.mn-deal-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.mn-bid { display: inline-flex; gap: 4px; }
.mn-bid input { width: 84px; padding: 4px 8px; }
.mn-trade { display: grid; gap: 10px; }
.mn-trade-side { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff14; }
.mn-trade-list { display: grid; gap: 2px; max-height: 168px; overflow-y: auto; }
.mn-trade-row { display: flex; align-items: center; gap: 8px; font-size: 13px; min-height: 30px; }
.mn-trade-row input[type=number] { width: 96px; margin-left: auto; }
.mn-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mn-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 320px); z-index: 5; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 34px 12px 12px; display: grid; gap: 4px; font-size: 13px; box-shadow: 0 10px 40px #000a; }
.mn-pop-x { position: absolute; top: 4px; right: 4px; }
.mn-to3d { justify-self: end; padding: 2px 8px; font-size: 12px; }

.mn3 { position: relative; width: min(100%, 720px); aspect-ratio: 1 / 0.86; max-height: min(72dvh, 720px); border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 25%, #2b4f63 0%, #16283a 55%, #0c1622 100%); touch-action: none; user-select: none; -webkit-user-select: none; }
.mn3-cv { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.mn3-cv:active { cursor: grabbing; }
.mn3-bar { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.mn3-bar .btn { min-width: 38px; background: #0b1520cc; border-color: #ffffff2a; backdrop-filter: blur(4px); }
.mn3-hint { position: absolute; left: 10px; top: 8px; right: 100px; font-size: 11px; color: #d6e4f0; text-shadow: 0 1px 2px #000; pointer-events: none; transition: opacity .4s; }
.mn3-hint.off { opacity: 0; }
.mn3-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #c9d8e6; font-size: 14px; }
.mn-info { display: grid; justify-items: center; gap: 4px; width: min(100%, 720px); margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #12301f; color: #e7f2e9; }

.un-card { --uc: #444; position: relative; flex: none; width: 58px; height: 86px; border-radius: 9px; padding: 0; border: 3px solid #fff; background: var(--uc);
  box-shadow: 0 2px 6px #0007; color: #fff; display: grid; place-items: center; overflow: hidden; font: 900 15px/1 system-ui, sans-serif; cursor: default; }
button.un-card { cursor: pointer; }
.un-card.wild, .un-card.back { background: #161616; }
.un-card .un-oval { width: 78%; height: 58%; border-radius: 50%; background: #fff; color: var(--uc); transform: rotate(-28deg); display: grid; place-items: center; font-size: 22px; letter-spacing: -1px; }
.un-card .un-oval > * { transform: rotate(28deg); }
.un-card.wild .un-oval { background: conic-gradient(#e5383b 0 25%, #2f6fd6 0 50%, #2fa84f 0 75%, #f2c12e 0); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.un-card.back .un-oval { background: #e5383b; color: #ffd34a; font-style: italic; font-size: 15px; text-shadow: 1px 1px 0 #000; }
.un-card .un-tl, .un-card .un-br { position: absolute; font-style: normal; font-size: 11px; text-shadow: 0 1px 1px #0008; }
.un-card .un-tl { left: 4px; top: 3px; }
.un-card .un-br { right: 4px; bottom: 3px; transform: rotate(180deg); }
.un-card.sm { width: 22px; height: 32px; border-width: 2px; border-radius: 4px; box-shadow: 0 1px 2px #0008; }
.un-card.sm .un-oval { font-size: 0; }
.un-card.on { transform: translateY(-8px); box-shadow: 0 0 0 2px #ffd34a, 0 6px 14px #000a; }
.un-card.off { filter: saturate(.45) brightness(.7); }
.un-table, .un-table3 { width: min(100%, 640px); display: grid; gap: 10px; }
.un-table { padding: 12px; border-radius: 18px; background: radial-gradient(120% 100% at 50% 40%, #237a4f 0%, #145236 70%, #0f3d29 100%); border: 3px solid #5a3820; }
.un-opps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; }
.un-opp { display: grid; justify-items: center; gap: 3px; padding: 6px 8px; border-radius: 12px; background: #0006; min-width: 84px; color: #e8f2ec; font-size: 12px; border: 2px solid transparent; }
.un-opp.turn { border-color: var(--pc); box-shadow: 0 0 12px var(--pc); }

.un-opp.turn::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 24px 4px var(--pc); opacity: 0; pointer-events: none; animation: un-turn 1.6s ease-in-out infinite; }
@keyframes un-turn { 50% { opacity: 1; } }
.un-opp.next { border-color: #ffffff4d; border-style: dashed; }
.un-opp { position: relative; }
.un-uno-tag { position: absolute; top: -8px; right: -6px; padding: 1px 6px; border-radius: 6px; background: #e5383b; color: #ffd34a; font: italic 900 11px/1.4 system-ui, sans-serif; box-shadow: 0 2px 4px #0008; }

.un-flow { align-self: center; font: 900 22px/1 system-ui, sans-serif; color: #ffffffb3; font-style: normal; animation: un-nudge 1.1s ease-in-out infinite; }
.un-flow.back { animation-name: un-nudge-b; }
@keyframes un-nudge { 50% { transform: translateX(4px); } }
@keyframes un-nudge-b { 50% { transform: translateX(-4px); } }
.un-opp.out { opacity: .5; }
.un-opp b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-fan { display: flex; justify-content: center; min-height: 32px; }
.un-fan .un-card + .un-card { margin-left: -14px; }
.un-mid { position: relative; display: flex; align-items: center; justify-content: center; gap: 34px; min-height: 178px; padding: 6px 0; }
.un-pile { position: relative; display: grid; justify-items: center; gap: 2px; color: #cfe3d6; }
.un-pile > .un-card { box-shadow: 2px 2px 0 #ddd, 4px 4px 0 #bbb, 5px 6px 10px #000a; }
.un-top { position: relative; }
.un-top .un-card { width: 76px; height: 112px; font-size: 18px; box-shadow: 0 0 0 4px var(--tc, #fff), 0 8px 18px #000a; transition: box-shadow .4s; }
.un-top .un-card .un-oval { font-size: 30px; }
.un-top .un-under { position: absolute; inset: 0; }
.un-top .un-under .un-card { box-shadow: 0 2px 6px #0008; filter: brightness(.82); }

.un-fly { position: relative; transform-style: preserve-3d; }
.un-fly > .un-card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.un-fly.hide { visibility: hidden; }
.un-top.un-ghost .un-fly { visibility: visible; }
.un-fly > .un-backface { position: absolute; inset: 0; transform: rotateY(180deg); box-shadow: 0 8px 18px #000a; }

.un-ring { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.un-ring svg { width: 100%; height: 100%; max-width: 340px; overflow: visible; }
.un-ring svg > path { fill: none; stroke: #ffffffa6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 7; animation: un-dash 1s linear infinite; }
@keyframes un-dash { to { stroke-dashoffset: -17; } }
.un-next-t { font-size: 12px; color: #cfe3d6; }
.un-table3 .un-next-t { color: var(--muted, #9fb0c0); }
.un-ghost { position: fixed; z-index: 1300; pointer-events: none; margin: 0; }
.un-bubble { position: fixed; z-index: 1301; pointer-events: none; padding: 4px 12px; border-radius: 999px; font: 900 16px/1.2 system-ui, sans-serif; color: #fff;
  background: #0b1520eb; border: 2px solid #ffffff40; box-shadow: 0 4px 14px #000a; white-space: nowrap; }
.un-bubble.uno { background: #e5383b; color: #ffd34a; border-color: #ffd34a; font-style: italic; font-size: 22px; text-shadow: 1px 1px 0 #000; }
.un-bubble.hit { background: #3a0e0e; color: #ff9b9b; border-color: #e5383b; font-size: 20px; }
.un-bubble.skip, .un-bubble.rev { background: #10263a; color: #9fd4ff; border-color: #4aa3ff; }
.un-card.fresh { animation: un-fresh 1.8s ease-out; }
@keyframes un-fresh { 0%, 45% { box-shadow: 0 0 0 3px #7fd3ff, 0 0 18px #7fd3ff; } }
@media (prefers-reduced-motion: reduce) { .un-opp.turn::after, .un-flow, .un-ring svg > path, .un-card.fresh { animation: none; } }
.un-strip { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.un-color { padding: 3px 12px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 1px #0008; }
.un-view { padding: 3px 10px; font-size: 12px; }
.un-log { width: min(100%, 640px); display: grid; gap: 2px; font-size: 12px; color: var(--muted, #9fb0c0); margin-top: 6px; }
.un-log > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-hand { display: flex; gap: 6px; overflow-x: auto; padding: 12px 6px 6px; margin: 0 auto 6px; max-width: min(640px, calc(100vw - 28px)); justify-content: safe center; scrollbar-width: thin; }
.un-hand:not(.mine) .un-card { opacity: .9; }

.un-hand.many { gap: 0; }
.un-hand.many .un-card + .un-card { margin-left: -16px; }
.un-hand.lots .un-card + .un-card { margin-left: -28px; }
.un-shout { animation: gm-pulse 1.2s ease-in-out infinite; }
.un-pick { padding-right: 34px; }
.un-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.un-pick-c { border: 0; border-radius: 10px; min-height: 52px; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 2px #000a; cursor: pointer; display: grid; place-items: center; }
.un-pick-c small { font-weight: 600; opacity: .9; }
.un3 { aspect-ratio: 1 / 0.8; }

.tt-wrap { display: grid; gap: 10px; justify-items: center; width: min(100%, 560px); }
.tt-game { display: grid; gap: 10px; width: 100%; justify-items: center; }
.tt-main { display: flex; gap: 10px; align-items: flex-start; justify-content: center; width: 100%; }
.tt-field { position: relative; flex: 0 1 auto; min-width: 0; width: min(66vw, 320px); display: grid; justify-items: center; }
.tt-cv { display: block; border-radius: 8px; border: 2px solid #2a3b52; touch-action: none; user-select: none; -webkit-user-select: none; background: #0d1622; }
.tt-side { display: grid; gap: 8px; width: 76px; flex: none; }
.tt-hold, .tt-next { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: #ffffff0a; border: 1px solid #ffffff14; }
.tt-side small { font-size: 11px; color: var(--muted, #9fb0c0); }
.tt-pc { width: 56px; height: 34px; }
.tt-stats { display: grid; gap: 4px; }
.tt-stats > div { display: grid; padding: 4px 6px; border-radius: 8px; background: #ffffff0a; }
.tt-stats b { font-size: 16px; }
.tt-banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font: 900 24px system-ui, sans-serif; color: #ffd34a; text-shadow: 0 2px 6px #000; opacity: 0; pointer-events: none; }
.tt-banner.on { animation: tt-pop 1.2s ease-out; }
@keyframes tt-pop { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: translateY(-30px); } }
.tt-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 420px); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.tt-b { min-height: 48px; font-size: 20px; padding: 0; }
.tt-b.w2 { grid-column: span 2; min-height: 42px; font-size: 15px; }
.tt-b.w3 { grid-column: span 3; min-height: 42px; font-size: 15px; }
.tt-msg { font-size: 13px; text-align: center; }
.tt-opps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tt-opp { display: grid; justify-items: center; gap: 3px; padding: 5px; border-radius: 10px; border: 2px solid var(--pc); background: #ffffff08; }
.tt-opp.out { opacity: .55; }
.tt-mini { width: 70px; height: 140px; border-radius: 4px; }
.tt-opp-n { display: grid; justify-items: center; font-size: 11px; }
.tt-opp-n b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 650px) {
  .bg-back { padding: 0; }
  .bg-wrap { border-radius: 0; min-height: 100%; padding: 8px 8px 12px; border: 0; gap: 8px; align-content: start; }
  .ck-board { min-width: 0; width: min(100%, calc(100dvh - 300px)); }
  
  .bs-fields.duo { gap: 8px; }
  .bs-fields.duo .bs-field.foe .bs-grid { width: min(100%, 360px, max(260px, calc(100dvh - 420px))); }
  .bs-fields.duo .bs-field.mine { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 12px; }
  .bs-fields.duo .bs-field.mine .bs-cap { flex-direction: column; gap: 6px; max-width: 110px; text-align: center; }
  .bs-fields.duo .bs-field.mine .bs-left { flex-wrap: wrap; justify-content: center; }
  .bs-fields.duo .bs-grid.small { width: min(48vw, 190px, max(150px, calc(100dvh - 640px))); gap: 1px; padding: 3px; border-width: 1px; }
  .bs-fields.duo .bs-grid.small .bs-cell.hit::after { font-size: 9px; }
  .mn-cell { font-size: 6.5px; }
  .mn-cell.go, .mn-cell.jail, .mn-cell.park, .mn-cell.gojail { font-size: 12px; }
  .mn-cell.chance, .mn-cell.chest, .mn-cell.tax { font-size: 10px; }
  .mn-dice { font-size: 26px; }
  .mn-log { font-size: 10px; }
  .mn-tok { width: 7px; height: 7px; }
  .mn-d { width: 30px; height: 30px; padding: 4px; }
}


.pp { display: grid; gap: 6px; }
.pp-q { width: 100%; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; max-height: 216px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.pp-tile { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pp-tile:hover { border-color: var(--water); }
.pp-tile.on { border-color: var(--water); background: color-mix(in srgb, var(--water) 22%, var(--panel-2)); box-shadow: 0 0 0 1px var(--water) inset; font-weight: 700; }
.pp-tile .ch-ava { flex: none; aspect-ratio: 1; }
.pp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-any { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #ffffff14; font-size: 14px; }
.pp-none { grid-column: 1 / -1; padding: 6px; }
.pp-tile.any { grid-column: 1 / -1; }
.pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pp-count { font-size: 12px; font-weight: 400; }
.pp-tile.full { opacity: .55; }
.ch-stealth { font-size: 11px; margin: 0 0 4px; }


.bs-mine-btn { display: none; }
.bs-mine-btn.on { border-color: var(--water); box-shadow: 0 0 0 1px var(--water) inset; }
.bs-mine-btn.ping { animation: bs-ping 1s ease-out 2; }
.bs-mine-btn.ping-hit { animation: bs-ping-hit 1s ease-out 3; }
@keyframes bs-ping { 0% { box-shadow: 0 0 0 0 #9fc6eacc; } 100% { box-shadow: 0 0 0 10px #9fc6ea00; } }
@keyframes bs-ping-hit { 0% { box-shadow: 0 0 0 0 #ff5a4fdd; background: #d9534f55; } 100% { box-shadow: 0 0 0 12px #ff5a4f00; } }
@media (max-width: 650px) {
  .bs-mine-btn { display: inline-flex; }
  .bs-fields.duo:not(.show-mine) .bs-field.mine { display: none; }
  .bs-fields.duo:not(.show-mine) .bs-field.foe .bs-grid { width: min(100%, 360px, max(260px, calc(100dvh - 345px))); }
}
.bs-grid.place { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bs-grid.place .bs-cell.ship { cursor: grab; }
.bs-grid.place.dragging, .bs-grid.place.dragging .bs-cell { cursor: grabbing; }
.bs-grid.place.dragging { touch-action: none; }
.bs-cell.lift { opacity: .35; }
.bs-cell.drop { background: #4fbf72; box-shadow: 0 0 8px #4fbf72aa; }
.bs-cell.drop-bad { background: #e0605c; box-shadow: 0 0 8px #e0605caa; }


.bs-grid { position: relative; }
.bs-cell { overflow: visible; }
.bs-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bs-fx::before, .bs-fx::after { content: ''; position: absolute; border-radius: 50%; opacity: 0; animation-delay: var(--d, 0ms); animation-fill-mode: forwards; }
.bs-fx > b { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; opacity: 0;
  transform: rotate(var(--a)) translateX(0); animation: bs-spark .65s ease-out var(--d, 0ms) forwards; }
.bs-fx.hit::before, .bs-fx.sunk::before { inset: -70%; background: radial-gradient(circle, #fffbe6 0 12%, #ffd34a 24%, #ff8a1f 44%, #e0331f 62%, transparent 72%); animation-name: bs-boom; animation-duration: .7s; animation-timing-function: ease-out; }
.bs-fx.hit::after, .bs-fx.sunk::after { inset: -50%; background: radial-gradient(circle, #5a5a5acc 0 30%, #3a3a3a66 55%, transparent 70%); animation-name: bs-smoke; animation-duration: 1.3s; animation-timing-function: ease-out; }
.bs-fx.hit > b, .bs-fx.sunk > b { background: #ffd34a; box-shadow: 0 0 6px #ff8a1f; }
.bs-fx.sunk::before { inset: -110%; animation-duration: .9s; }
.bs-fx.sunk > b { width: 7px; height: 7px; margin: -3.5px; animation-duration: .85s; }
.bs-fx.miss::before { inset: 8%; border: 2px solid #b9dcff; animation-name: bs-ripple; animation-duration: .8s; animation-timing-function: ease-out; }
.bs-fx.miss::after { inset: 8%; border: 2px solid #b9dcff99; animation-name: bs-ripple; animation-duration: .9s; animation-timing-function: ease-out; animation-delay: calc(var(--d, 0ms) + 160ms); }
.bs-fx.miss > b { background: #cfe7ff; animation-name: bs-drop; }
@keyframes bs-boom { 0% { opacity: 1; transform: scale(.1); } 55% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes bs-smoke { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.8) translateY(-30%); } }
@keyframes bs-ripple { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes bs-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(34px) scale(.4); } }
@keyframes bs-drop { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(16px) scale(.5); } }
.bs-grid.shake { animation: bs-shake .35s ease-in-out; }
.bs-grid.shake2 { animation: bs-shake2 .7s ease-in-out; }
@keyframes bs-shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } }
@keyframes bs-shake2 { 10%, 50% { transform: translate(-6px, 2px) rotate(-.6deg); } 30%, 70% { transform: translate(6px, -2px) rotate(.6deg); } 90% { transform: translate(-2px, 1px); } }
.dk-say .bg-emoji { flex: none; width: 38px; min-width: 38px; padding: 0; font-size: 18px; line-height: 1; display: inline-grid; place-items: center; }


.tv-btn { flex: none; white-space: nowrap; font-size: 13px; padding: 5px 10px; border-radius: 30px; }
.tv-btn.on { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.tv-btn.busy { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.tv-btn .tv-n { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .tv-btn .tv-l { display: none; } .tv-btn { padding: 4px 8px; } }
.cg-lock { flex: none; background: none; border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; font-size: 15px; cursor: pointer; color: var(--text); }
.cg-lock.on { border-color: #ffd34a; box-shadow: 0 0 0 1px #ffd34a inset; }
.cg-lock:disabled { cursor: default; opacity: .9; }

.sh-hist-undo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px;
  border: 1px solid var(--water); background: rgba(var(--water-rgb), .12); font-size: 13px; }
.sh-hist-undo span { flex: 1 1 200px; }
.sh-hist-pvbox { margin-bottom: 8px; }
.sh-hist-cap { font-size: 12px; margin-bottom: 4px; }
.sh-hist-pv { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 520 / 380; margin: 0 auto; border-radius: 8px; background: var(--panel); }
.sh-hist-list { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.sh-hist-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; text-align: left; width: 100%;
  border: 1px solid transparent; background: none; color: var(--text); border-radius: 6px; padding: 7px 8px; font-size: 13px; cursor: pointer; }
.sh-hist-row:hover { background: rgba(var(--water-rgb), .06); }
.sh-hist-row.on { border-color: var(--water); background: rgba(var(--water-rgb), .14); }
.sh-hist-row.gone:not(.on) .sh-hist-what { text-decoration: line-through; opacity: .6; }
.sh-hist-row.rb .sh-hist-what { color: var(--water); }
.sh-hist-at { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.sh-hist-what { min-width: 0; overflow-wrap: anywhere; }
.sh-hist-by { white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }


.ch-album { margin-top: 6px; width: 360px; max-width: 100%; overflow-x: clip; }
.ch-album-box { position: relative; border-radius: 10px; overflow: hidden; overflow: clip; background: #0b0f14; touch-action: pan-y; cursor: zoom-in; -webkit-user-select: none; user-select: none; }
.ch-album-track { display: flex; transition: transform .28s ease; will-change: transform; }
.ch-album-track.pending { opacity: .55; }
.ch-album-slide { flex: 0 0 100%; width: 100%; height: 280px; overflow: hidden; }
.ch-album-slide img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-touch-callout: none; }
.ch-album-n { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 99px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }
.ch-album-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  font-size: 20px; line-height: 28px; color: #fff; background: rgba(0, 0, 0, .45); cursor: pointer; }
.ch-album-nav.prev { left: 6px; } .ch-album-nav.next { right: 6px; }
.ch-album-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) { .ch-album-nav { display: none; } }
.ch-album-dots { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.ch-album-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.ch-album-dots i.on { background: var(--water); }

.ch-lb-album { touch-action: pan-y; }
.ch-lb-album img { -webkit-user-select: none; user-select: none; }
.ch-lb-n { position: fixed; top: 12px; width: max-content; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px; color: #fff; background: rgba(0, 0, 0, .55); font-size: 13px; }
.ch-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 28px; line-height: 40px;
  color: #fff; background: rgba(0, 0, 0, .45); cursor: pointer; }
.ch-lb-nav.prev { left: 10px; } .ch-lb-nav.next { right: 10px; }
.ch-lb-foot { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 6px 14px; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: 13px; }
.ch-lb-foot a { color: #fff; }
.ch-pics { display: flex; gap: 6px; align-items: center; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: thin; }
.ch-pics-n { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; padding: 0 2px; }
.ch-pic { position: relative; flex: none; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.ch-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-pic button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; font-size: 11px; line-height: 18px;
  color: #fff; background: rgba(0, 0, 0, .6); cursor: pointer; }
.ch-pic-st { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; background: rgba(0, 0, 0, .55); }
.ch-pic-st span { color: #fff !important; font-size: 10px !important; opacity: 1; }


.m3-wrap { width: min(880px, 100%); }
.m3-wrap .m3-coins { margin-left: auto; font-size: 13px; }
.m3-opts { display: flex; gap: 4px; flex: none; }
.m3-opt { padding: 4px 8px; border-radius: 99px; border: 1px solid #ffffff22; background: #ffffff0d; color: var(--text); font-size: 12px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.m3-opt.on { border-color: #ffd36a88; background: #ffd36a1f; }

.m3-crystal .m3-plate { background: linear-gradient(160deg, #f6dc8a, #b98a2e 30%, #7a5418 55%, #d9b45a 80%, #8a6420); box-shadow: 0 14px 34px #000a, 0 0 0 1px #3a2608, inset 0 1px 0 #fff6, inset 0 -2px 0 #0006; }
.m3-crystal .m3-cells { background: #160f2a; box-shadow: inset 0 3px 12px #000c; }
.m3-crystal .m3-cells i { background: #2a1f4a; box-shadow: inset 0 0 0 1px #c9a24a2e, inset 0 6px 10px #0005; }
.m3-crystal .m3-cells i.b { background: #241a40; }
.m3-crystal .m3-in.shaped .m3-cells { background: transparent; }
.m3-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m3-hud-b { display: grid; justify-items: center; padding: 6px 4px; border-radius: 12px; background: linear-gradient(180deg, #ffffff10, #ffffff05); border: 1px solid #ffffff14; }
.m3-hud-b span { font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.m3-hud-b b { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.m3-hud-b.mv b { color: #8fe3ff; }
.m3-hud-b .m3-week { color: #ffe08a; }
.m3-hud-b.low b { color: #ff8f8f; animation: m3-blink 1s ease-in-out infinite; }
.m3-score.bump { animation: m3-bump .35s ease-out; }
.m3-main { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.m3-col { display: grid; gap: 10px; align-content: start; }
.m3-plate { width: min(100%, calc((100dvh - 210px) * var(--ar, 1))); min-width: 260px; justify-self: center; padding: 7px; border-radius: 18px;
  background: linear-gradient(160deg, #2a3f5c, #16233a 60%, #101a2b); box-shadow: 0 14px 34px #0009, inset 0 1px 0 #ffffff22, inset 0 -2px 0 #0006; }
.m3-in { position: relative; aspect-ratio: var(--ar, 1); border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.m3-in.shake { animation: m3-shake .38s ease-out; }
.m3-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--w, 8), 1fr); grid-template-rows: repeat(var(--h, 8), 1fr); border-radius: 12px; overflow: hidden;
  background: #0d1626; box-shadow: inset 0 3px 10px #000a; }
.m3-cells i { background: #1a2942; box-shadow: inset 0 0 0 1px #ffffff07; }
.m3-cells i.b { background: #15223a; }
.m3-board { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; cursor: pointer; }
.m3-board.aim { cursor: crosshair; box-shadow: inset 0 0 0 2px #ffd36a99; }
.m3-t { position: absolute; left: 0; top: 0; width: calc(100% / var(--w, 8)); height: calc(100% / var(--h, 8)); will-change: transform;
  transform: translate3d(calc(var(--c) * 100%), calc(var(--r) * 100%), 0); transition: transform var(--d, .2s) cubic-bezier(.32, .02, .35, 1.12);
  backface-visibility: hidden; contain: layout style; }
.m3-g { position: absolute; inset: 5%; transition: transform .15s; }

.m3-g::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, #ffffffa0 0, #ffffff40 45%, transparent 70%); opacity: 0; pointer-events: none; }
.m3-g svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.m3-spc { animation: m3-pulse 1.6s ease-in-out infinite; }
.m3-spc.m3-sp-plane { animation: m3-bob 1.6s ease-in-out infinite; }

.m3-lite .m3-spc, .m3-lite .m3-g .m3-spark, .m3-lite .m3-bird .m3-wing, .m3-lite .m3-t.bird .m3-g, .m3-lite .m3-gift.ready::after, .m3-lite .m3-lv.open::after { animation: none; }
.m3-lite .m3-gift.ready::after, .m3-lite .m3-lv.open::after { opacity: .8; }
.m3-lite .m3-t.hint .m3-g { animation-iteration-count: 3; }
.m3-lite .m3-t.sel .m3-g::before { animation: none; opacity: .9; }
.m3-lite .m3-spk { box-shadow: none; }
.m3-lite .m3-beam::before { box-shadow: 0 0 6px 2px #ffd56a88; }
.m3-sp-bomb .m3-spark, .m3-g .m3-spark { animation: m3-blink .45s ease-in-out infinite; }
.m3-t.sel .m3-g { transform: scale(1.13); }
.m3-t.sel .m3-g::before { animation: m3-halo .9s ease-in-out infinite; }
.m3-t.hint .m3-g { animation: m3-hint 1.1s ease-in-out infinite; }
.m3-t.nope .m3-g { animation: m3-nope .26s ease-in-out; }
.m3-t.pop { z-index: 2; }
.m3-board.shuffling .m3-t { transition-timing-function: cubic-bezier(.6, -.3, .3, 1.3); }
.m3-board.shuffling .m3-g { animation: m3-whirl .55s ease-in-out; }
.m3-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.m3-f { position: absolute; left: calc(var(--c) * 100% / var(--w, 8)); top: calc(var(--r) * 100% / var(--h, 8)); width: calc(100% / var(--w, 8)); height: calc(100% / var(--h, 8)); }
.m3-beam.row { left: 0; width: 100%; }
.m3-beam.col { top: 0; height: 100%; }
.m3-beam::before { content: ''; position: absolute; inset: 30% -2%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, #fff6c8 12%, #fff 50%, #fff6c8 88%, transparent); box-shadow: 0 0 18px 6px #ffd56a88, 0 0 4px 2px #fff;
  animation: m3-beam .55s ease-out forwards; }
.m3-beam.col::before { inset: -2% 30%; background: linear-gradient(180deg, transparent, #fff6c8 12%, #fff 50%, #fff6c8 88%, transparent); animation-name: m3-beamv; }
.m3-boom { width: calc(500% / var(--w, 8)); height: calc(500% / var(--h, 8)); margin: calc(-200% / var(--w, 8)) 0 0 calc(-200% / var(--w, 8)); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffe27a 22%, #ff8a3c 42%, #ff4d2e55 58%, transparent 70%); animation: m3-boom .6s ease-out forwards; }
.m3-boom.small { width: calc(200% / var(--w, 8)); height: calc(200% / var(--h, 8)); margin: calc(-50% / var(--w, 8)) 0 0 calc(-50% / var(--w, 8)); }
.m3-wave { border-radius: 50%; border: 3px solid var(--wc); box-shadow: 0 0 16px var(--wc), inset 0 0 12px var(--wc); animation: m3-wave .85s ease-out forwards; }
.m3-hammer::before { content: '🔨'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 200%; animation: m3-hammer .5s ease-in forwards; transform-origin: 80% 80%; }
.m3-planef { z-index: 4; filter: drop-shadow(0 6px 4px #0008); }
.m3-planef svg { width: 100%; height: 100%; }
.m3-planef .m3-cargo { position: absolute; left: 6%; top: 30%; width: 44%; height: 44%; }
.m3-boom.mega { width: calc(700% / var(--w, 8)); height: calc(700% / var(--h, 8)); margin: calc(-300% / var(--w, 8)) 0 0 calc(-300% / var(--w, 8)); }
.m3-wave.nova { border-width: 6px; background: radial-gradient(circle, #fff8 0, transparent 70%); }
.m3-mflash { z-index: 4; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #ffe27acc 36%, transparent 70%); animation: m3-boom .55s ease-out forwards; }
.m3-lg-i.duo { width: 40px; }
.m3-lg-i.duo svg { width: 28px; height: 28px; }
.m3-lg-i.duo svg + svg { left: 12px; }
.m3-float { display: grid; place-items: center; width: calc(300% / var(--w, 8)); margin-left: calc(-100% / var(--w, 8)); font-weight: 800; font-size: clamp(14px, 4vw, 20px); color: #fff;
  text-shadow: 0 2px 0 #0008, 0 0 10px #ffd56a; animation: m3-float 1.05s ease-out forwards; }
.m3-spk { position: absolute; left: calc((var(--c) + .5) * 100% / var(--w, 8)); top: calc((var(--r) + .5) * 100% / var(--h, 8)); width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  box-shadow: 0 0 6px currentColor; animation: m3-spk .55s ease-out forwards; }
.m3-banner { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); white-space: nowrap; font-size: clamp(22px, 7vw, 34px); font-weight: 900;
  color: #fff; letter-spacing: .5px; text-shadow: 0 3px 0 #c2410c, 0 0 18px #ffb347, 0 6px 14px #000a; animation: m3-banner .95s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.m3-banner.big { color: #fff5c2; font-size: clamp(26px, 8.5vw, 42px); }
.m3-over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.m3-over:empty { display: none; }
.m3-card { pointer-events: auto; width: min(94%, 380px); max-height: 96%; overflow: auto; display: grid; gap: 8px; padding: 12px; border-radius: 16px;
  background: #0f1828e8; border: 1px solid #ffffff22; box-shadow: 0 18px 40px #000b; backdrop-filter: blur(4px); animation: m3-born .4s ease-out; }
.m3-card-t { font-size: 18px; font-weight: 800; text-align: center; }
.m3-card.end { text-align: center; justify-items: center; }
.m3-final { font-size: 46px; font-weight: 900; color: #ffe08a; text-shadow: 0 3px 0 #a0520e, 0 0 20px #ffb34788; }
.m3-go { justify-self: center; min-width: 180px; font-size: 16px; }
.m3-legend { display: grid; gap: 4px; }
.m3-lg { display: flex; gap: 8px; align-items: center; font-size: 12px; line-height: 1.25; }
.m3-lg-i { position: relative; flex: none; width: 28px; height: 28px; }
.m3-small { font-size: 11.5px; text-align: center; }
.m3-card .hint { font-size: 12px; margin: 0; line-height: 1.3; }
.m3-card .m3-legend { gap: 2px; }
.m3-lg-i svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m3-tip { display: none; font-size: 13px; color: #ffd36a; text-align: center; }
.m3-tip.on { display: block; }
.m3-boosts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m3-bst { position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 4px 6px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, #2b4466, #1a2b45); border: 1px solid #ffffff1f; box-shadow: 0 3px 0 #0b1322, inset 0 1px 0 #ffffff26; transition: transform .1s, box-shadow .1s; }
.m3-bst:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0b1322; }
.m3-bst:disabled { opacity: .5; cursor: default; }
.m3-bst.on { background: linear-gradient(180deg, #8a6a1f, #5a4210); border-color: #ffd36a; box-shadow: 0 0 0 2px #ffd36a55, 0 3px 0 #2a1e06; }
.m3-bst-i { font-size: 22px; line-height: 1; font-weight: 900; }
.m3-bst.cross .m3-bst-i { color: #ffd36a; }
.m3-bst-n { font-size: 11.5px; }
.m3-bst-c { font-size: 11px; font-weight: 700; color: #8ff0b0; }
.m3-bst-c.pay { color: #ffd36a; }
.m3-gifts, .m3-side { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: #ffffff08; border: 1px solid #ffffff12; }
.m3-gifts-t { font-size: 12.5px; font-weight: 700; }
.m3-gifts-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m3-gift { display: grid; justify-items: center; gap: 1px; padding: 5px 2px; border-radius: 10px; border: 1px dashed #ffffff2a; background: none; color: var(--muted); font-size: 12px; }
.m3-gift-d { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.m3-gift-s { font-size: 10.5px; }
.m3-gift.ready { cursor: pointer; color: #fff; border: 1px solid #ffd36a; background: linear-gradient(180deg, #5a4210, #3a2a08); position: relative; }
.m3-gift.ready .m3-gift-s { color: #ffd36a; font-weight: 700; }
.m3-gift.taken { opacity: .55; border-style: solid; }
.m3-gift.taken .m3-gift-s { color: #8ff0b0; }
.m3-top { display: grid; gap: 3px; }
.m3-top-r { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.m3-top-p { width: 16px; text-align: right; color: var(--muted); font-size: 11px; }
.m3-top-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-top-r.me { margin: 0 -4px; padding: 1px 4px; border-radius: 8px; background: #ffd36a1f; box-shadow: inset 0 0 0 1px #ffd36a55; }
.m3-top-s { font-weight: 600; font-size: 11px; color: #ffd36a; }
.m3-top-gap { text-align: center; color: var(--muted); font-size: 11px; line-height: 1; }
.m3-rtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: #00000033; }
.m3-rtab { padding: 5px 2px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.m3-rtab.on { color: #fff; background: linear-gradient(180deg, #2b4466, #1a2b45); box-shadow: inset 0 1px 0 #ffffff26; }
.m3-rhint { font-size: 11px; }
.m3-quit { justify-self: start; }
.gm-card.match3 .gm-ico { filter: drop-shadow(0 0 6px #6cc8ff88); }

.m3-gift.ready::after, .m3-lv.open::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 10px 1px #ffd36a99; opacity: 0; pointer-events: none; animation: m3-glowo 1.6s ease-in-out infinite; }
@keyframes m3-glowo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

body.m3-on .ch-glow { animation: none; }
@keyframes m3-hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-5deg); } }
@keyframes m3-nope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8%); } 75% { transform: translateX(8%); } }
@keyframes m3-whirl { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.7); } }
@keyframes m3-shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, 3px); } 80% { transform: translate(2px, -1px); } }
@keyframes m3-beam { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(.2); opacity: 0; } }
@keyframes m3-beamv { 0% { transform: scaleY(0); opacity: 1; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) scaleX(.2); opacity: 0; } }
@keyframes m3-boom { 0% { transform: scale(.15); opacity: 1; } 60% { opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes m3-wave { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(var(--wave, 14)); opacity: 0; } }
@keyframes m3-hammer { 0% { transform: translate(40%, -60%) rotate(-50deg); opacity: 0; } 45% { transform: translate(10%, -20%) rotate(-60deg); opacity: 1; } 75% { transform: rotate(15deg); } 100% { transform: rotate(5deg); opacity: 0; } }
@keyframes m3-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { transform: translateY(-20%) scale(1.15); opacity: 1; } 100% { transform: translateY(-160%) scale(1); opacity: 0; } }
@keyframes m3-spk { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes m3-banner { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 75% { transform: translate(-50%, -60%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.95); opacity: 0; } }
@keyframes m3-spin { to { transform: rotate(360deg); } }
@keyframes m3-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes m3-halo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes m3-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6%) rotate(-6deg); } }
@keyframes m3-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes m3-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: #ffe08a; } 100% { transform: scale(1); } }
@media (max-width: 900px) {
  .m3-main { grid-template-columns: 1fr; }
  .m3-plate { width: min(100%, calc((100dvh - 250px) * var(--ar, 1))); }
}
@media (max-width: 650px) {
  .m3-hud-b b { font-size: 19px; }
  .m3-plate { padding: 5px; border-radius: 14px; min-width: 0; width: min(100%, calc((100dvh - 200px) * var(--ar, 1))); }
}
@media (prefers-reduced-motion: reduce) {
  .m3-t { transition-duration: .05s !important; }
  .m3-spc, .m3-g .m3-spark, .m3-bird .m3-wing, .m3-t.bird .m3-g, .m3-gift.ready::after, .m3-lv.open::after, .m3-t.sel .m3-g::before, .m3-t.hint .m3-g { animation: none !important; }
}

.m3-hud.lv { grid-template-columns: 2.2fr 1fr; }
.m3-hud-b.goal { grid-template-rows: auto 1fr; align-items: center; }
.m3-lvl { font-size: 11px; color: var(--muted); }
.m3-goals { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.m3-goal { display: inline-flex; align-items: center; gap: 4px; }
.m3-goal i { width: 26px; height: 26px; display: inline-block; }
.m3-goal i svg, .m3-need-r i svg { width: 100%; height: 100%; overflow: visible; }
.m3-goal b { font-size: 19px; font-variant-numeric: tabular-nums; }
.m3-goal.done b { color: #8ff0b0; }
.m3-goal.done i { animation: m3-bump .4s ease-out; }
.m3-t.ice { z-index: 1; }
.m3-t.ice .m3-g { inset: 1%; }
.m3-t.bird .m3-g { inset: 2%; animation: m3-birdbob 1.8s ease-in-out infinite; }
.m3-bird .m3-wing { transform-origin: 32px 58px; animation: m3-flap .5s ease-in-out infinite alternate; transform-box: view-box; }
.m3-t.fly { z-index: 4; transition: none; }
.m3-t.fly .m3-g { animation: m3-fly .95s cubic-bezier(.5, -.3, .7, .6) forwards; }
.m3-t.fly .m3-wing { animation-duration: .12s; }
.m3-float.bird { color: #bfe2ff; text-shadow: 0 2px 0 #0008, 0 0 10px #7fb0f5; }
.m3-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m3-mode { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, #23527a, #173350); border: 1px solid #6cc8ff55; box-shadow: 0 3px 0 #0b1322, inset 0 1px 0 #ffffff26; }
.m3-mode.lv { background: linear-gradient(180deg, #6a4a12, #43300b); border-color: #ffd36a77; }
.m3-mode:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b1322; }
.m3-mode b { font-size: 15px; }
.m3-mode span:last-child { font-size: 11px; color: var(--muted); text-align: center; }
.m3-mode-i { font-size: 24px; line-height: 1; }
.m3-card-h { display: flex; align-items: center; gap: 8px; }
.m3-card-h .m3-card-t { flex: 1; }
.m3-card.lvmap { width: min(96%, 420px); height: 94%; grid-template-rows: auto 1fr; }
.m3-lvgrid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; overflow: auto; align-content: start; padding: 2px; }
.m3-lv { display: grid; justify-items: center; gap: 0; padding: 5px 2px 3px; border-radius: 12px; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, #2b4466, #1a2b45); border: 1px solid #ffffff1f; box-shadow: 0 2px 0 #0b1322; }
.m3-lv b { font-size: 16px; line-height: 1.1; }
.m3-lv-more { grid-column: 1 / -1; justify-self: center; }
.m3a-gen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.m3a-gen input { max-width: 90px; }
.m3a-rr { display: grid; gap: 6px; padding-top: 4px; }
.m3a-jump { max-width: 90px; }
.m3a-els { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: #ffffff08; }
.m3a-el { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.m3a-el > span:first-child { min-width: 150px; }
.m3a-el input[type=number] { max-width: 80px; }
.m3a-el select { width: auto; max-width: 170px; }
.m3a-t thead th { position: sticky; top: 0; z-index: 2; background: #161f2c; }
.m3a-jump { height: auto; }
.m3-lv-g { font-size: 11px; min-height: 14px; }
.m3-lv-s { font-size: 10px; color: #ffd36a; min-height: 12px; letter-spacing: -1px; }
.m3-lv.open { background: linear-gradient(180deg, #8a6a1f, #5a4210); border-color: #ffd36a; position: relative; }
.m3-lv.lock { opacity: .4; cursor: default; }
.m3-need { display: grid; gap: 6px; }
.m3-need-r { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.m3-need-r i { width: 30px; height: 30px; display: inline-block; flex: none; }
.m3-stars { display: flex; gap: 6px; justify-content: center; font-size: 40px; line-height: 1; }
.m3-stars span { color: #ffffff22; text-shadow: none; }
.m3-stars span.on { color: #ffd84d; text-shadow: 0 3px 0 #a0520e, 0 0 16px #ffb347; animation: m3-star .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--k) * .22s); }
.m3-stars.small { font-size: 20px; color: #ffd84d; display: block; text-align: center; }
.m3-card.win { border-color: #ffd36a66; }
@keyframes m3-fly { 0% { transform: translateY(0) scale(1); } 20% { transform: translateY(12%) scale(1.1, .9); } 100% { transform: translate(40%, -900%) scale(1.25) rotate(-12deg); opacity: .2; } }
@keyframes m3-flap { from { transform: rotate(-8deg); } to { transform: rotate(-38deg); } }
@keyframes m3-birdbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes m3-star { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .m3-t.bird .m3-g, .m3-bird .m3-wing, .m3-lv.open { animation: none !important; } }

.m3a { display: grid; gap: 8px; margin-top: 6px; }
.m3a-wrap { max-height: 60vh; overflow: auto; }
.m3a-t td, .m3a-t th { white-space: nowrap; }
.m3a-r { cursor: pointer; }
.m3a-r:hover td, .m3a-r.on td { background: #ffffff0a; }
.m3a-r.hid td { opacity: .55; }
.m3a-g { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.m3a-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.m3a-bad { color: #ff8f8f; font-weight: 700; }
.m3a-ed { display: grid; gap: 8px; padding: 6px 0; white-space: normal; position: sticky; left: 0; width: min(560px, calc(100vw - 64px)); }
.m3a-ed td, .m3a-ed th { white-space: normal; }
.m3a-ed-top { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.m3a-grid { display: grid; grid-template-columns: repeat(var(--w, 8), 14px); gap: 2px; padding: 4px; border-radius: 8px; background: #0d1626; }
.m3a-grid i { width: 14px; height: 14px; border-radius: 3px; background: #1a2942; font-size: 9px; font-style: normal; display: grid; place-items: center; color: #0d2a40; font-weight: 700; }
.m3a-grid i.ice.i1 { background: #bfe6fa; } .m3a-grid i.ice.i2 { background: #86c9ee; } .m3a-grid i.ice.i3 { background: #4b9fd2; color: #fff; }

.m3-cells i.void { background: transparent !important; box-shadow: none; }
.m3-in.shaped .m3-cells { background: transparent; box-shadow: none; }
.m3-in.shaped .m3-cells i:not(.void) { box-shadow: inset 0 0 0 1px #ffffff07, 0 0 0 1px #0d1626; }
.m3a-grid i { width: 14px; height: 14px; }
.m3a-grid i.void { background: transparent; }


.dk-say .dk-field { background: #ffffff12; border-color: #ffffff2a; border-radius: 12px; align-items: center; padding: 0 3px 0 0; }
html[data-theme="light"] .dk-say .dk-field { background: #ffffff12; }
.dk-say .dk-field:focus-within { border-color: #ffffff5a; box-shadow: 0 0 0 1px #ffffff1f; }
.dk-say .dk-field input { background: transparent; border: 0; border-radius: 12px 0 0 12px; padding: 8px 4px 8px 12px; outline: none; box-shadow: none; min-height: 38px; }
.dk-say .dk-field input:focus-visible { outline: none; }
.dk-say .dk-field .ch-ficons { height: 38px; align-self: center; }
.dk-say .dk-field .ch-fic { width: 34px; height: 34px; color: #a9c4b1; }
@media (hover: hover) { .dk-say .dk-field .ch-fic:hover { color: #fff; background: #ffffff14; } }
.dk-say .dk-field .ch-fic.ch-fsend { width: 32px; min-width: 32px; height: 32px; margin-left: 2px; border-radius: 50%; background: var(--water-dim); color: var(--on-accent); }
.dk-say .dk-field .ch-fsend .ch-ico { width: 18px; height: 18px; }
@media (hover: hover) { .dk-say .dk-field .ch-fic.ch-fsend:hover { background: var(--accent-hover); color: var(--on-accent); } }


.sh-rules { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.sh-rules-strip { position: relative; min-width: 0; }
.sh-rules-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.sh-rules-tabs::-webkit-scrollbar { display: none; }
.sh-rules-strip.can-r .sh-rules-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.sh-rules-strip.can-l .sh-rules-tabs { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.sh-rules-strip.can-l.can-r .sh-rules-tabs { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.sh-rules-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--overlay); color: var(--text); font-size: 18px; line-height: 1; padding: 0 0 2px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 1; }
.sh-rules-arr.l { left: 0; }
.sh-rules-arr.r { right: 0; }
.sh-rules-strip.can-l .sh-rules-arr.l, .sh-rules-strip.can-r .sh-rules-arr.r { opacity: .85; pointer-events: auto; }
.sh-rules-arr:hover { opacity: 1 !important; border-color: var(--water); }
.sh-rules-tabs > * { flex: 0 0 auto; white-space: nowrap; }
.sh-rules-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-rules-h { margin: 0; font-size: 1.05em; overflow-wrap: anywhere; }
.sh-rules-view { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sh-rules-view.sh-auto { border-style: dashed; }
.sh-rules-tr { margin: -2px 0 0; }

.sh-tr { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 1.3; }
.sh-tr-mark { color: var(--muted, var(--faint)); background: var(--panel-2); border: 1px dashed var(--line); border-radius: 999px; padding: 2px 8px; }
.sh-tr-btn { background: none; border: 0; padding: 2px 0; color: var(--accent, #4a8cff); text-decoration: underline; cursor: pointer; font: inherit; }
.sh-rules-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-rules-lbl { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.sh-rules-lbl input, .sh-rules-text { width: 100%; box-sizing: border-box; font-weight: 400; }
.sh-rules-text { min-height: 40vh; resize: vertical; line-height: 1.45; }

.sh-rules-float { display: none; position: absolute; left: 8px; top: 8px; z-index: 2; border: 1px solid var(--line); background: var(--overlay);
  color: var(--text); border-radius: 10px; padding: 7px 11px; font-weight: 700; font-size: 13px; cursor: pointer; }
.sh-rules-float:active { background: var(--panel-3); }
.sh-wrap.sh-full .sh-rules-float { display: block; }


.g48-wrap { width: min(820px, 100%); }
.g48-wrap .cg-top .g48-new { flex: none; }
.g48-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g48-hud-b { position: relative; display: grid; justify-items: center; padding: 6px 4px; border-radius: 12px; background: linear-gradient(180deg, #ffffff10, #ffffff05); border: 1px solid #ffffff14; }
.g48-hud-b span { font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.g48-hud-b b { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.g48-hud-b.sc b { color: #ffe08a; }
.g48-hud-b.wk b { color: #8fe3ff; }
.g48-plus { position: absolute; left: 80%; top: 30%; font-weight: 800; font-size: 16px; color: #ffe08a; pointer-events: none; text-shadow: 0 2px 6px #000a;
  animation: g48-plus .8s ease-out forwards; }
@keyframes g48-plus { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -34px); } }
.g48-main { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.g48-col { display: grid; gap: 10px; align-content: start; }
.g48-rules { margin: 0; font-size: 12px; line-height: 1.35; }
.g48-plate { width: min(100%, calc(100dvh - 210px)); min-width: 260px; justify-self: center; padding: 8px; border-radius: 18px;
  background: linear-gradient(160deg, #2a3d5c, #142036); box-shadow: inset 0 1px 0 #ffffff22, inset 0 -3px 0 #0006, 0 12px 30px #0008; }
.g48-in { position: relative; aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.g48-in.nudge[data-nudge="left"] { animation: g48-nl .22s ease-out; }
.g48-in.nudge[data-nudge="right"] { animation: g48-nr .22s ease-out; }
.g48-in.nudge[data-nudge="up"] { animation: g48-nu .22s ease-out; }
.g48-in.nudge[data-nudge="down"] { animation: g48-nd .22s ease-out; }
@keyframes g48-nl { 40% { transform: translateX(-6px); } }
@keyframes g48-nr { 40% { transform: translateX(6px); } }
@keyframes g48-nu { 40% { transform: translateY(-6px); } }
@keyframes g48-nd { 40% { transform: translateY(6px); } }
.g48-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.g48-cells i { margin: 5.5%; border-radius: 12%; background: #0d1626; box-shadow: inset 0 2px 6px #000a, inset 0 0 0 1px #ffffff08; }
.g48-board, .g48-fx { position: absolute; inset: 0; pointer-events: none; }
.g48-t { position: absolute; left: 0; top: 0; width: 25%; height: 25%; will-change: transform;
  transform: translate3d(calc(var(--c) * 100%), calc(var(--r) * 100%), 0); transition: transform .12s ease-out; }
.g48-t.gone { z-index: 0; }
.g48-g { position: absolute; inset: 5.5%; display: grid; place-items: center; border-radius: 12%;
  background: linear-gradient(160deg, var(--a), var(--b)); color: var(--fg, #fff);
  box-shadow: inset 0 2px 0 #ffffff55, inset 0 -4px 0 #0000004d, 0 4px 8px #0007, 0 0 var(--glow, 0) var(--gc, transparent); }
.g48-g::after { content: ''; position: absolute; left: 10%; right: 10%; top: 6%; height: 34%; border-radius: 40% 40% 50% 50%; background: linear-gradient(180deg, #ffffff40, #ffffff00); pointer-events: none; }
.g48-g span { position: relative; font-weight: 900; font-size: clamp(18px, 8vmin, 46px); line-height: 1; letter-spacing: -.5px; text-shadow: 0 2px 0 #0004; font-variant-numeric: tabular-nums; }
.g48-t.d3 .g48-g span { font-size: clamp(16px, 6.6vmin, 38px); }
.g48-t.d4 .g48-g span { font-size: clamp(13px, 5.2vmin, 30px); }
.g48-t.d5 .g48-g span, .g48-t.d6 .g48-g span { font-size: clamp(11px, 4.2vmin, 24px); }
.g48-t.born .g48-g { animation: g48-born .2s ease-out .08s both; }
.g48-t.pop .g48-g { animation: g48-pop .2s ease-out; }
.g48-t.pop { z-index: 2; }
@keyframes g48-born { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes g48-pop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }

.v2 { --a: #4a5d7e; --b: #34445f; --fg: #e8f0ff; }
.v4 { --a: #4d79b3; --b: #2f5487; --fg: #eef5ff; }
.v8 { --a: #ffae5a; --b: #f07c1d; }
.v16 { --a: #ff8a5c; --b: #e8572e; }
.v32 { --a: #ff6b78; --b: #d9364c; }
.v64 { --a: #ff4766; --b: #b81d3c; }
.v128 { --a: #ffe17a; --b: #f2b51c; --fg: #5b3700; --glow: 10px; --gc: #ffcf4d66; }
.v256 { --a: #ffd85a; --b: #e89a0c; --fg: #4d2c00; --glow: 14px; --gc: #ffbf3377; }
.v512 { --a: #c3ec6a; --b: #6fb52a; --fg: #1f3a00; --glow: 14px; --gc: #a6e34d77; }
.v1024 { --a: #5ee6d6; --b: #1f9c8e; --fg: #003a33; --glow: 18px; --gc: #4fd1c588; }
.v2048 { --a: #c18bff; --b: #6d33d6; --glow: 24px; --gc: #a35cffaa; }
.v4096 { --a: #ff7ae0; --b: #a42fd0; --glow: 24px; --gc: #ff5ad8aa; }
.v8192 { --a: #7aa8ff; --b: #2c3fd0; --glow: 24px; --gc: #5a7affaa; }
.vmax { --a: #3a3f4f; --b: #0f1118; --fg: #ffe08a; --glow: 24px; --gc: #ffe08a88; }
.g48-t.v2048 .g48-g::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, #ffffff55 50%, transparent 70%);
  background-size: 250% 100%; animation: g48-shine 2.4s linear infinite; pointer-events: none; }
@keyframes g48-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.g48-spk { position: absolute; left: calc((var(--c) + .5) * 25%); top: calc((var(--r) + .5) * 25%); width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: #fff6c8; box-shadow: 0 0 8px #ffd36a; animation: g48-spk .6s ease-out forwards; }
@keyframes g48-spk { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.g48-over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; }
.g48-over:empty { display: none; }
.g48-over:not(:empty) { background: #0a1220a0; border-radius: 12px; }
.g48-logo { justify-self: center; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 20px; font-size: 30px; font-weight: 900; color: #fff;
  background: linear-gradient(160deg, #c18bff, #6d33d6); box-shadow: inset 0 3px 0 #ffffff55, inset 0 -5px 0 #0005, 0 0 24px #a35cff88; }
.g48-logo.win { animation: g48-pop .6s ease-out 2; }
.g48-mini { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 6px; text-align: center; font-size: 11.5px; font-weight: 800;
  background: linear-gradient(160deg, var(--a), var(--b)); color: var(--fg, #fff); }
@media (max-width: 900px) {
  .g48-main { grid-template-columns: 1fr; }
  .g48-plate { width: min(100%, calc(100dvh - 250px)); }
}
@media (max-width: 650px) {
  .g48-hud-b b { font-size: 19px; }
  .g48-plate { padding: 6px; border-radius: 14px; min-width: 0; width: min(100%, calc(100dvh - 200px)); }
}
@media (prefers-reduced-motion: reduce) {
  .g48-t { transition-duration: .04s !important; }
  .g48-t.v2048 .g48-g::before { animation: none; }
}

.mj-hud { grid-template-columns: repeat(4, 1fr); }
.mj-hud .mj-time { color: #b9f3c8; }
.mj-hud .mj-mv.none { color: #ff8f8f; }
.mj-plate { padding: 8px; border-radius: 18px; min-width: 0;
  background: radial-gradient(ellipse at 50% 30%, #1f5a46, #123a2d 60%, #0b241c); box-shadow: 0 14px 34px #0009, inset 0 1px 0 #ffffff22, inset 0 -2px 0 #0006; }
.mj-in { position: relative; min-height: 380px; display: grid; place-items: center; user-select: none; -webkit-user-select: none; }
.mj-board { position: relative; margin: 0 auto; cursor: pointer; }

.mj-board { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.mj-board.aim .mj-t:not(.lock) .mj-face { box-shadow: inset 0 0 0 2px #7fd0ff; }
.mj-fx { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 20000; }
.mj-fx { left: 0; top: 0; right: 0; bottom: 0; }
.mj-fx > * { position: absolute; }
.mj-t { position: absolute; width: var(--tw); height: var(--th); border-radius: calc(var(--tw) * .14);
  background: linear-gradient(135deg, #e9dcbc, #c9b386);
  
  box-shadow: 0 0 0 1px #6b5532, calc(var(--d) * .5) calc(var(--d) * .5) 0 1px #b99d68, var(--d) var(--d) 0 1px #8a6d3c, var(--d) var(--d) 0 2px #4e3c1f,
    calc(var(--d) + 2px) calc(var(--d) + 3px) calc(var(--d) + 4px) #000a;
  transition: transform .14s ease-out; }
.mj-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; overflow: hidden;
  background: linear-gradient(160deg, #fffdf6 0%, #f6efdc 55%, #eadfc2 100%);
  box-shadow: inset 0 0 0 1px #fff8, inset 0 calc(var(--tw) * -.06) 0 #0000000f, inset 0 0 0 calc(var(--tw) * .05) #f3ead2; }
.mj-face::before { content: ''; position: absolute; inset: 6%; border-radius: calc(var(--tw) * .1); border: 1px solid #b89b6044; }
.mj-e { font-size: calc(var(--tw) * .62); line-height: 1; transform: translateY(2%); }
.mj-svg { width: 90%; height: 90%; display: block; pointer-events: none; }
.mj-t.flower .mj-face { background: linear-gradient(160deg, #fff7fb 0%, #fbe7f0 60%, #f2d2e1 100%); }

.mj-t.tint .mj-face { background: linear-gradient(160deg, hsl(var(--h) 95% 96%) 0%, hsl(var(--h) 80% 88%) 60%, hsl(var(--h) 60% 80%) 100%); }
.mj-t.tint .mj-face::before { border-color: hsl(var(--h) 55% 50% / .6); }
.mj-t.flower .mj-face::before { border-color: #e889b0aa; }
.mj-t.gem .mj-face { background: linear-gradient(160deg, #f7fcff 0%, #e2f1fb 60%, #cfe3f2 100%); }
.mj-t.gem .mj-face::before { border-color: #69aee0aa; }
.mj-t.lock .mj-face::after { content: ''; position: absolute; inset: 0; background: #3a2a1033; }


.mj-t::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgb(40 25 5 / calc(var(--lz, 0) * 7%)); }
.mj-t:not([data-z="0"]) { box-shadow: 0 0 0 1px #5a4627, calc(var(--d) * .5) calc(var(--d) * .5) 0 1px #b99d68, var(--d) var(--d) 0 1px #8a6d3c, var(--d) var(--d) 0 2px #4e3c1f,
    calc(var(--d) * 1.6) calc(var(--d) * 2) calc(var(--d) * 2.2) #000c; }
.mj-face { box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #d9c9a2, inset 0 calc(var(--tw) * -.06) 0 #0000001a !important; }
.mj-t.sel { transform: translateY(calc(var(--d) * -.8)); }
.mj-t.sel .mj-face { box-shadow: inset 0 0 0 calc(var(--tw) * .06) #ffc531, 0 0 calc(var(--tw) * .3) #ffd36a; }

.mj-hl { position: absolute; inset: -2px; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 calc(var(--tw) * .07) #3fe08a, 0 0 12px #3fe08a; animation: mj-hint .6s ease-in-out 4; will-change: opacity; }
@keyframes mj-hint { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.mj-board { contain: layout paint; transform: translateZ(0); }
.mj-fx { contain: strict; }
.mj-fx > * { will-change: transform, opacity; }
.mj-t.gone { pointer-events: none; }
.mj-spk { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.mj-ring { width: 46px; height: 46px; border-radius: 50%; border: 3px solid; }
.mj-conf { width: 7px; height: 11px; border-radius: 2px; }
.mj-float { font-weight: 900; font-size: 18px; color: #fff; white-space: nowrap; text-shadow: 0 2px 0 #0008, 0 0 10px #000a; }
.mj-float.combo { color: #ffe08a; font-size: 21px; }
.mj-float.big { color: #8ff0b0; font-size: 20px; }
.mj-float.pay { color: #ffd36a; font-size: 15px; }
.mj-boosts { grid-template-columns: repeat(4, 1fr); }
.mj-bst.undo .m3-bst-i { color: #8fe3ff; }
.mj-prize { font-size: 12px; padding: 6px 8px; border-radius: 10px; background: #ffd36a14; border: 1px solid #ffd36a44; display: grid; gap: 2px; }
.mj-wrap { width: min(980px, 100%); }
.mj-wrap .m3-main { grid-template-columns: minmax(0, 1fr) 250px; }

.mj-wrap .m3-col { min-width: 0; }
.mj-wrap .m3-col .mj-boosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mj-bst { min-width: 0; }
.mj-bst .m3-bst-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .mj-wrap .m3-main { grid-template-columns: minmax(0, 1fr); }
  .mj-wrap .m3-col .mj-boosts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .mj-plate { padding: 5px; border-radius: 14px; }
  .mj-in { min-height: 300px; }
  .mj-hud { gap: 5px; }
  .mj-hud .m3-hud-b b { font-size: 17px; }
}
@media (max-width: 400px) { .mj-bst .m3-bst-n { font-size: 10px; } .mj-boosts { gap: 5px; } }
@media (prefers-reduced-motion: reduce) { .mj-t { transition: none; } .mj-hl { animation-iteration-count: 1; } }


.gm-main { gap: 12px; }

[data-k] { --acc: var(--water-rgb); }
[data-k="checkers"] { --acc: 233, 169, 60; }
[data-k="battleship"] { --acc: 91, 141, 253; }
[data-k="monopoly"] { --acc: 216, 85, 47; }
[data-k="uno"] { --acc: 236, 82, 110; }
[data-k="tetris"] { --acc: 164, 120, 255; }
[data-k="king"] { --acc: 233, 169, 60; }
[data-k="match3"] { --acc: 108, 200, 255; }
[data-k="g2048"] { --acc: 237, 194, 46; }
[data-k="mahjong"] { --acc: 91, 201, 138; }
[data-k="duel"], [data-k="rps"] { --acc: 182, 156, 255; }

.gm-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--sun-rgb), .10), rgba(var(--water-rgb), .05) 55%, transparent), var(--panel); }
.gm-bal { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.gm-coin { font-size: 20px; line-height: 1; filter: drop-shadow(0 0 6px rgba(var(--sun-rgb), .45)); }
.gm-bal-n { font-size: 20px; color: var(--sun); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.gm-bal-t { color: var(--muted); font-size: 12px; }
.gm-turns { margin-left: 0; }
.gm-startbox { margin-left: auto; min-width: 0; }
.gm-start { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; flex-wrap: nowrap; }
.gm-start-t { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.gm-start-h { display: none; }
.gm-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); }
.gm-seg > button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 99px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.gm-seg > button.on { background: var(--water-dim); color: var(--on-accent); font-weight: 600; }

.gm-tabs { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto; }
.gm-tab { flex: 1 0 auto; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 14px; transition: background .15s, color .15s; }
.gm-tab:hover { color: var(--text); }
.gm-tab.on { background: var(--panel-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--water); font-weight: 600; }

.gm-content { gap: 14px; }
.gm-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.gm-filter::-webkit-scrollbar { display: none; }
.gm-fchip { flex: none; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; transition: all .15s; }
.gm-fchip:hover { color: var(--text); border-color: var(--water-dim); }
.gm-fchip.on { background: rgba(var(--water-rgb), .14); border-color: var(--water); color: var(--text); font-weight: 600; }

.gm-sec { display: grid; gap: 10px; min-width: 0; }
.gm-sec[hidden] { display: none; }
.gm-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; padding: 0 2px; }
.gm-sec-i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; }
.gm-sec-n { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel-2); border-radius: 99px; padding: 1px 7px; }
.gm-sec-n:empty { display: none; }
.gm-sec-hint { flex-basis: 100%; margin-left: 34px; margin-top: -6px; font-size: 12px; color: var(--faint); }


.gm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gm-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border-radius: 14px; cursor: pointer; outline: none;
  border: 1px solid var(--line); background: linear-gradient(160deg, rgba(var(--acc), .10), transparent 45%), var(--panel);
  transition: transform .15s ease, border-color .15s, box-shadow .15s; }
.gm-tile:hover, .gm-tile:focus-visible { border-color: rgba(var(--acc), .55); box-shadow: 0 6px 22px rgba(var(--acc), .12); transform: translateY(-1px); }
.gm-tile.hot { border-color: rgba(var(--acc), .8); box-shadow: 0 0 0 1px rgba(var(--acc), .5) inset; }
.gm-tile.off { opacity: .6; }
.gm-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.gm-tile-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; line-height: 1;
  background: linear-gradient(145deg, rgba(var(--acc), .32), rgba(var(--acc), .08)); border: 1px solid rgba(var(--acc), .35); }
.gm-tile-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(var(--acc), .18); color: rgb(var(--acc)); white-space: nowrap; }
.gm-tile.hot .gm-tile-badge { animation: gm-pulse 1.6s ease-in-out infinite; }
.gm-tile-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: 15px; min-width: 0; }
.gm-tile-name b { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-tile-name .g-tag { margin-left: 6px; }
.gm-tile-sub { font-size: 12px; color: var(--muted); margin-top: -3px; }
.gm-tile-desc { font-size: 12.5px; line-height: 1.4; color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-tile-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gm-tile-act { margin-top: auto; padding-top: 4px; display: flex; }
.gm-tile-act > .btn { flex: 1; padding-block: 7px; font-size: 13px; }
.gm-tile-note { font-size: 12px; color: var(--muted); }


.gm-active { display: grid; gap: 8px; }
.gm-act-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gm-act-row::-webkit-scrollbar { display: none; }
.gm-act { flex: 0 0 auto; min-width: 240px; max-width: 320px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.gm-act.hot { border-color: rgba(var(--acc), .7); background: linear-gradient(120deg, rgba(var(--acc), .14), transparent 70%), var(--panel); }
.gm-act .gm-tile-ico { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.gm-act-b { flex: 1; min-width: 0; display: grid; font-size: 13px; }
.gm-act-b span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.gm-sheet-back { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .5); display: grid; place-items: center; padding: 16px; animation: gm-fade .15s ease; }
.gm-sheet { width: min(460px, 100%); max-height: 86dvh; overflow: auto; border-radius: 18px; border: 1px solid var(--line); outline: none;
  background: linear-gradient(170deg, rgba(var(--acc), .14), transparent 40%), var(--panel); box-shadow: 0 24px 70px var(--shadow); animation: gm-rise .2s ease; }
.gm-sheet-h { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; }
.gm-sheet-h .gm-tile-ico { width: 52px; height: 52px; font-size: 28px; border-radius: 15px; }
.gm-sheet-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gm-sheet-t .gm-tile-name { font-size: 18px; }
.gm-sheet-t .gm-tile-sub { margin: 0; }
.gm-sheet-x { flex: none; align-self: flex-start; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 14px; }
.gm-sheet-b { padding: 4px 16px 16px; }
.gm-sheet-grid { display: grid; gap: 12px; }
.gm-sheet-desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); opacity: .9; }
.gm-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-facts:empty { display: none; }
.gm-fact { font-size: 12px; padding: 4px 9px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.gm-sheet-list { display: grid; gap: 6px; }
.gm-sheet-st { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.gm-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-sheet-acts { display: grid; gap: 8px; }
.gm-sheet-acts .btn { padding-block: 10px; font-size: 14px; }
@keyframes gm-fade { from { opacity: 0; } }
@keyframes gm-rise { from { transform: translateY(14px); opacity: 0; } }


.gm-hubgames { gap: 8px; }
.gm-hubgames:not(.in-sheet) > .ch-games-card { display: none; }
.gm-hubgames:not(.in-sheet):not(:has(> :not(.ch-games-card))) { display: none; }
.gm-hubgames.in-sheet > :not(.gm-shown) { display: none; }
.gm-hubgames.in-sheet > .gm-shown { display: grid; gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
.gm-hubgames.in-sheet > .gm-shown > .ch-games-h { display: none; }
.gm-hubgames .g-dup { display: none; }
.gm-hubgames .ch-games-card > .hint { font-size: 14px; line-height: 1.5; color: var(--text); opacity: .9; }
.gm-hubgames .ch-games-card .btn.primary { padding-block: 9px; }
.gm-daily-btn { border-color: rgba(var(--sun-rgb), .5); color: var(--sun); }


.gm-rows { display: grid; gap: 6px; }
.gm-row { border-radius: 14px; padding: 8px 10px; }
.gm-row > .gm-tile-ico { width: 36px; height: 36px; font-size: 19px; border-radius: 10px; }
.gm-row.turn { border-color: rgba(var(--acc), .8); background: linear-gradient(120deg, rgba(var(--acc), .12), transparent 70%), var(--panel); }
.gm-res { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gm-note { font-size: 12.5px; color: var(--muted); padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); }
.gm-empty { display: grid; justify-items: center; gap: 10px; padding: 34px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; }
.gm-empty-i { font-size: 38px; }
.gm-stats { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 8px; }
.gm-stat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.gm-stat .gm-tile-ico { width: 36px; height: 36px; font-size: 19px; border-radius: 10px; }
.gm-stat-b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gm-stat-n { font-size: 12px; color: var(--muted); }
.gm-stat b { font-size: 17px; }
.gm-bar { display: block; height: 4px; border-radius: 4px; background: var(--panel-3); overflow: hidden; margin-top: 3px; }
.gm-bar > i { display: block; height: 100%; border-radius: 4px; background: rgb(var(--acc)); }
.gm-pct { font-size: 13px; font-weight: 700; color: rgb(var(--acc)); font-variant-numeric: tabular-nums; }
.gm-top .gm-place { width: 28px; font-size: 18px; }
.gm-top .gm-row.p1 { border-color: rgba(var(--sun-rgb), .55); background: linear-gradient(120deg, rgba(var(--sun-rgb), .12), transparent 60%), var(--panel); }
.gm-top .gm-row.me { box-shadow: 0 0 0 1px var(--water) inset; }
.gm-top .gm-rv { font-variant-numeric: tabular-nums; }
.gm-solo-r .m3-rtabs { max-width: 420px; }
.gm-rhint { font-size: 12px; padding: 0 2px; }

@media (max-width: 900px) {
  .gm-head { padding: 10px; border-radius: 14px; }
  .gm-startbox { flex-basis: 100%; margin-left: 0; }
  .gm-start { justify-content: space-between; }
  .gm-seg { flex: 1; max-width: 260px; }
  .gm-seg > button { flex: 1; }
  .gm-tab { padding: 8px 6px; font-size: 13px; }
  .gm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gm-tile { padding: 10px; gap: 5px; }
  .gm-tile-desc { display: none; }
  .gm-tile-ico { width: 36px; height: 36px; font-size: 20px; border-radius: 11px; }
  .gm-tile-name { font-size: 14px; }
  .gm-tile-name .g-tag { margin-left: 0; }
  .gm-tile-sub { font-size: 11.5px; }
  .gm-act { min-width: 220px; }
  .gm-sheet-back { place-items: end stretch; padding: 0; }
  .gm-sheet { width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: gm-up .22s ease; }
  .gm-sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 0; }
  .gm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-stat { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .gm-stat .gm-tile-ico { width: 30px; height: 30px; font-size: 16px; border-radius: 9px; }
  .gm-stat-b { order: 3; flex-basis: 100%; }
  .gm-pct { margin-left: auto; }
}
@media (max-width: 340px) { .gm-tiles { grid-template-columns: 1fr; } }
@keyframes gm-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .gm-tile, .gm-sheet, .gm-sheet-back { animation: none; transition: none; } }
.gm-sec-body { display: grid; gap: 10px; min-width: 0; }


.gm-tile-img { margin: -12px -12px 0; height: 104px; border-radius: 13px 13px 0 0; overflow: hidden; background: rgba(var(--acc), .15); }
.gm-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-tile.has-img .gm-tile-top { margin-top: -26px; position: relative; }
.gm-tile.has-img .gm-tile-ico { background: var(--panel); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.gm-tile.has-img .gm-tile-badge { margin-top: 30px; }
.gm-tile-desc.own { color: var(--muted); }
.gm-sheet-img { height: 170px; overflow: hidden; border-radius: 17px 17px 0 0; }
.gm-sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-sheet:has(.gm-sheet-img)::before { display: none; }
.gm-sheet-hub { display: grid; gap: 12px; }
@media (max-width: 900px) {
  .gm-tile-img { margin: -10px -10px 0; height: 86px; }
  .gm-tile-desc.own { display: -webkit-box; font-size: 12px; }
  .gm-sheet-img { border-radius: 20px 20px 0 0; height: 150px; }
}

.gte { display: grid; gap: 12px; }
.gte-group { font-weight: 650; font-size: 13px; color: var(--muted); margin-top: 4px; }
.gte-row { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.gte-row > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; }
.gte-row > summary::-webkit-details-marker { display: none; }
.gte-row[open] > summary { border-bottom: 1px solid var(--line); }
.gte-ico { font-size: 18px; width: 24px; text-align: center; }
.gte-marks { margin-left: auto; font-size: 13px; letter-spacing: 2px; }
.gte-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 12px; align-items: start; }
.gte-prev { cursor: default; min-height: 190px; }
.gte-prev:hover { transform: none; }
.gte-prev .gm-tile-desc { display: -webkit-box; }
.gte-fields { gap: 10px; }
@media (max-width: 600px) { .gte-body { grid-template-columns: 1fr; } .gte-prev-box { max-width: 220px; } }


.gm-tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gm-tile { display: block; position: relative; padding: 0; gap: 0; overflow: hidden; aspect-ratio: 16 / 10; min-height: 150px; border-radius: 14px; isolation: isolate;
  border: 1px solid rgba(var(--water-rgb), .3);
  background: radial-gradient(110% 90% at 88% 8%, rgba(var(--acc), .5), transparent 62%), linear-gradient(160deg, rgba(var(--acc), .28), #0d151c 72%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.gm-tile:hover, .gm-tile:focus-visible { border-color: rgba(var(--water-rgb), .75); box-shadow: 0 0 0 1px rgba(var(--water-rgb), .35), 0 0 22px rgba(var(--water-rgb), .22); transform: translateY(-2px); }
.gm-tile.hot { border-color: var(--water); box-shadow: 0 0 0 1px rgba(var(--water-rgb), .6), 0 0 22px rgba(var(--water-rgb), .3); }
.gt-art { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.gt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }
.gt-emoji { position: absolute; right: 7%; top: 8%; font-size: 76px; line-height: 1; transform: rotate(-10deg); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); opacity: .92; }
.gt-shade { position: absolute; inset: 0; }
.gm-tile-badge { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 11.5px; padding: 3px 8px; border-radius: 99px; background: rgba(5, 10, 16, .72); color: #eaf7fb; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .12); }
.gm-tile.hot .gm-tile-badge { background: var(--water); color: #04161b; border-color: transparent; }
.gm-tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px 11px; display: grid; gap: 1px; }
.gm-tile .gm-tile-name { font-size: 17px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
.gm-tile .gm-tile-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.gm-tile-line { font-size: 12.5px; color: rgba(236, 244, 248, .86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.gm-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; min-width: 0; }
.gm-tile-ppl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: rgba(236, 244, 248, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-ppl-ico { display: inline-flex; flex: none; color: rgba(236, 244, 248, .8); }
.gm-tbtn.btn { flex: none; padding: 6px 13px; font-size: 12.5px; border-radius: 8px; color: #e9fbff; background: rgba(5, 12, 18, .55); border: 1px solid rgba(var(--water-rgb), .9); backdrop-filter: blur(4px); max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-tbtn.btn:hover, .gm-tile.hot .gm-tbtn.btn, .gm-tbtn.btn.primary { background: var(--water); color: #04161b; border-color: var(--water); box-shadow: 0 0 14px rgba(var(--water-rgb), .5); }
.gm-tbtn.btn:disabled { opacity: .5; box-shadow: none; }
span.gm-tbtn { font-size: 11.5px; color: rgba(236, 244, 248, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-tile.off { opacity: .55; }
.gm-sheet-img { position: relative; isolation: isolate; height: 180px; }
.gm-sheet-img .gt-emoji { display: none; }
@media (max-width: 900px) {
  .gm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gm-tile { aspect-ratio: auto; min-height: 196px; }
  .gt-emoji { font-size: 58px; right: 8%; top: 9%; }
  .gm-tile-body { padding: 9px 10px 10px; }
  .gm-tile .gm-tile-name { font-size: 15px; }
  .gm-tile-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; }
  .gm-tile-foot { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .gm-tile-ppl { flex-basis: 100%; }
  .gm-tbtn.btn { flex: 1; max-width: none; padding-block: 7px; }
}
.gte-prev { width: 100%; max-width: 280px; aspect-ratio: 16 / 10; min-height: 0; transform: none !important; }
.gte-body { grid-template-columns: 280px minmax(0, 1fr); }
.gte-prev-box { position: sticky; top: 70px; }
.gte-sliders { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gte-sl { display: grid; gap: 2px; font-size: 12.5px; }
.gte-sl-h { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
.gte-val { color: var(--text); font-variant-numeric: tabular-nums; }
.gte-sl input[type=range] { width: 100%; }
@media (max-width: 600px) { .gte-body { grid-template-columns: 1fr; } .gte-prev-box { position: static; max-width: none; } .gte-prev { max-width: none; } }


.gm-tile .gm-tile-body { position: absolute; inset: 0; bottom: 0; padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 6px; }
.gt-row { display: flex; gap: 8px; min-width: 0; }
.gt-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 0 1 auto; }
.gt-cell:empty { display: none; }
.gt-l { margin-right: auto; align-items: flex-start; text-align: left; }
.gt-c { margin-inline: auto; align-items: center; text-align: center; }
.gt-r { margin-left: auto; align-items: flex-end; text-align: right; }
.gt-row:has(.gt-c:not(:empty)) .gt-l:not(:empty), .gt-row:has(.gt-c:not(:empty)) .gt-r:not(:empty) { flex: 1 1 0; }
.gm-tile-text { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
.gt-c .gm-tile-text, .gt-r .gm-tile-text { justify-items: inherit; }
.gm-tile-ppl.ico { width: 30px; height: 30px; justify-content: center; border-radius: 50%; background: rgba(5, 10, 16, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.gm-tile-btn { display: flex; max-width: 100%; }
.gm-tile-btn .gm-tbtn.btn { max-width: 100%; }
@media (max-width: 900px) {
  .gm-tile .gm-tile-body { padding: 9px 10px 10px; }
  
  .gm-tile-body.btn-bottom .gt-row.gt-b { flex-wrap: wrap; }
  .gm-tile-body.btn-bottom .gt-b .gt-cell.only-btn { flex-basis: 100%; order: 2; margin: 0; max-width: none; }
  .gm-tile-body.btn-bottom .gt-b .gm-tile-btn, .gm-tile-body.btn-bottom .gt-b .gm-tile-btn .btn { width: 100%; }
}
.gte-lay { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gte-pads { display: flex; flex-wrap: wrap; gap: 14px; }
.gte-pad-w { display: grid; gap: 5px; justify-items: start; }
.gte-pad-t { font-size: 12px; color: var(--muted); }
.gte-pad { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 18px); gap: 3px; padding: 5px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); }
.gte-pad > button { border: 1px solid var(--line); border-radius: 4px; background: var(--panel-3); cursor: pointer; padding: 0; }
.gte-pad > button:hover { border-color: var(--water-dim); }
.gte-pad > button.on { background: var(--water); border-color: var(--water); box-shadow: 0 0 8px rgba(var(--water-rgb), .5); }
.gte-seg > button { font-size: 12px; padding: 4px 10px; }
.gm-tile-text.gt-al-l { text-align: left; justify-items: start; }
.gm-tile-text.gt-al-c { text-align: center; justify-items: center; }
.gm-tile-text.gt-al-r { text-align: right; justify-items: end; }
.gm-tile-text .gm-tile-name b { max-width: 100%; }
.gm-tile-text.gt-al-c .gm-tile-name, .gm-tile-text.gt-al-r .gm-tile-name { justify-content: inherit; }
.gm-tile-text.gt-al-l, .gm-tile-text.gt-al-c, .gm-tile-text.gt-al-r { justify-items: stretch; width: 100%; }
.gm-tile-text.gt-al-c .gm-tile-name { justify-content: center; }
.gm-tile-text.gt-al-r .gm-tile-name { justify-content: flex-end; }


.gm-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.gm-sum { display: grid; gap: 10px; align-content: start; min-height: 0; }
.gm-sum-card { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid rgba(var(--water-rgb), .22); background: linear-gradient(180deg, rgba(var(--water-rgb), .05), transparent 60%), var(--panel); }
.gm-sum-h { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px; }
.gm-sum-i { width: 22px; text-align: center; font-size: 15px; }
.gm-sum-n { color: var(--muted); font-weight: 600; }
.gm-sum-list { display: grid; gap: 6px; }
.gm-sum-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; border-radius: 11px; border: 1px solid transparent; background: var(--panel-2); color: var(--text); font: inherit; text-align: left; width: 100%; }
button.gm-sum-row { cursor: pointer; }
button.gm-sum-row:hover { border-color: rgba(var(--water-rgb), .45); }
.gm-sum-row.hot { border-color: var(--water); box-shadow: 0 0 12px rgba(var(--water-rgb), .2); }
.gm-sum-ava { flex: none; display: grid; place-items: center; }
.gm-sum-ava.gm-tile-ico { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }
.gm-sum-ava .ch-ava { box-shadow: 0 0 0 2px rgba(var(--water-rgb), .55); }
.gm-dot-on { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3bd671; box-shadow: 0 0 8px rgba(59, 214, 113, .7); }
.gm-sum-b { flex: 1; min-width: 0; display: grid; font-size: 13.5px; }
.gm-sum-b b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-sum-b span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-sum-tag { flex: none; font-size: 12px; color: var(--muted); }
.gm-sum-row.hot .gm-sum-tag { color: var(--water); font-weight: 600; }
.gm-sum-time { flex: none; font-size: 11.5px; color: var(--faint); }
.gm-sum-inv { flex: none; width: 38px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(var(--water-rgb), .45); background: rgba(var(--water-rgb), .08); color: var(--text); cursor: pointer; }
.gm-sum-inv:hover { background: var(--water); color: #04161b; border-color: var(--water); }
.gm-sum-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 14px 6px 8px; color: var(--muted); font-size: 13px; }
.gm-sum-empty b { color: var(--text); font-size: 14px; }
.gm-sum-big { font-size: 40px; opacity: .55; margin-bottom: 4px; }
.gm-sum-note { font-size: 12px; color: var(--muted); padding: 2px 4px; }
.gm-chatbar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(var(--water-rgb), .3); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; position: relative; }
.gm-chatbar:hover { border-color: rgba(var(--water-rgb), .7); }
.gm-chatbar-i { font-size: 20px; }
.gm-chatbar-arr { margin-left: auto; font-size: 18px; color: var(--muted); }
.gm-chatbar .ch-badge { position: static; margin-left: 4px; }
.gm-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.gm-inv-k { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.gm-inv-k:hover { border-color: var(--water); }
.gm-inv-k .gm-tile-ico { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
@media (min-width: 901px) {
  .gm-side { position: sticky; top: 10px; height: calc(100vh - 150px); min-height: 460px; }
  .gm-sum { flex: 1; overflow-y: auto; scrollbar-width: thin; }
  .gm-side .gm-chat { position: static; height: auto; min-height: 0; flex: 1; }
  .gm-side:not(.chat-open) .gm-chat { display: none; }
  .gm-side.chat-open .gm-sum { display: none; }
  .gm-side.chat-open .gm-chatbar { order: -1; padding-block: 8px; }
  .gm-split { position: sticky; }
}
@media (max-width: 900px) {
  .gm-chatbar { display: none; }
  .gm-sum { padding-bottom: 70px; }
  .gm-content { padding-bottom: 0; }
}

@media (min-width: 901px) { #gm-active { display: none; } }


.gm-tile .gm-tile-body > .gt-row { flex: none; }
.gm-tile .gm-tile-body > .gt-row.gt-t { align-items: flex-start; }
.gm-tile .gm-tile-body > .gt-row.gt-m { flex: 1; align-items: center; }
.gm-tile .gm-tile-body > .gt-row.gt-b { align-items: flex-end; margin-top: auto; }
.gm-tile .gm-tile-body > .gt-row.gt-m:not(:has(.gt-cell:not(:empty))) { flex: 1; }
.gm-tile .gm-tile-body > .gt-row:not(.gt-m):not(:has(.gt-cell:not(:empty))) { display: none; }
.gm-tile .gt-cell { flex: 0 0 auto; max-width: 100%; }
.gm-tile .gt-cell.has-text { flex: 1 1 0; }
.gm-tile .gt-cell.only-btn { max-width: 70%; }
.gm-tile .gt-row:has(.gt-cell.has-text) .gt-cell:not(.has-text):not(.only-btn):not(:empty) { flex: 0 0 auto; }
.gm-tile .gt-c.has-text { margin-inline: 0; }
.gte-ord { display: grid; gap: 4px; max-width: 320px; }
.gte-ord-i { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); font-size: 13px; }
.gte-ord-i .gte-ord-n { flex: 1; }
.gte-ord-i.shared { border-color: var(--water-dim); }
.gte-ord-i.off { opacity: .45; }
.gte-ord-i .btn { padding: 2px 9px; min-height: 0; }


.gm-tile-badge, .gm-tbtn.btn, .gm-tile-ppl.ico { backdrop-filter: none; -webkit-backdrop-filter: none; }
.gm-tile-badge { background: rgba(5, 10, 16, .86); }
.gm-tbtn.btn { background: rgba(5, 12, 18, .78); }
.gm-tile-ppl.ico { background: rgba(5, 10, 16, .78); }
.gt-emoji { filter: none; text-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.gm-tile { contain: layout paint style; content-visibility: auto; contain-intrinsic-size: auto 196px; }
.gt-art { contain: strict; transform: translateZ(0); backface-visibility: hidden; }
.gt-img { will-change: auto; }
.gm-tile.hot .gm-tile-badge { animation: none; }
.gm-tile.hot .gm-tile-badge::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 4px rgba(var(--water-rgb), .3); opacity: 0; animation: gm-glow 1.6s ease-in-out infinite; will-change: opacity; pointer-events: none; }
@keyframes gm-glow { 50% { opacity: 1; } }
.gm-tile { transition: border-color .15s; }
@media (hover: hover) { .gm-tile { transition: transform .15s ease, border-color .15s; } .gm-tile:hover { will-change: transform; } }
@media (prefers-reduced-motion: reduce) { .gm-tile.hot .gm-tile-badge::after { animation: none; } }
.mascot { contain: layout style; }

.mj-halloween .mj-plate { background: radial-gradient(ellipse at 50% 25%, #3b2350, #22132f 60%, #120a1a); }
.mj-halloween .mj-face { background: linear-gradient(160deg, #fbf3e0 0%, #efe0bd 55%, #dcc79a 100%); }
.mj-halloween .mj-t.flower .mj-face { background: linear-gradient(160deg, #fff4e6 0%, #ffdcb3 60%, #f7bf80 100%); }
.mj-halloween .mj-t.flower .mj-face::before { border-color: #e07a1aaa; }
.mj-halloween .mj-t.gem .mj-face { background: linear-gradient(160deg, #f6efff 0%, #e2d2f7 60%, #c9b2ea 100%); }
.mj-halloween .mj-t.gem .mj-face::before { border-color: #8a55c8aa; }


#bday-strip { padding: 16px 20px 0; }
.bd-strip {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(var(--sun-rgb), .45);
  background: linear-gradient(110deg, rgba(var(--sun-rgb), .20), rgba(255, 126, 182, .14) 55%, rgba(var(--water-rgb), .14));
  box-shadow: 0 4px 18px rgba(var(--sun-rgb), .12);
}
.bd-strip-avas { display: flex; flex: none; }
.bd-strip-avas > * + * { margin-left: -12px; }
.bd-strip-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sun); background: var(--panel-2); }
.bd-strip-ava.none, .bd-ava.none { display: grid; place-items: center; font-size: 20px; }
.bd-strip-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.bd-strip-txt b { font-size: 14px; overflow-wrap: anywhere; }
.bd-strip-sub { font-size: 12px; color: var(--muted); }
.bd-strip-btn { font-size: 18px; padding: 4px 8px; animation: bd-wiggle 2.4s ease-in-out infinite; }
.bd-strip-x { flex: none; }
@keyframes bd-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@media (max-width: 900px) {
  #bday-strip { padding: 10px 10px 0; }
  .bd-strip { gap: 9px; padding: 8px 8px 8px 10px; }
  .bd-strip-ava { width: 34px; height: 34px; }
}

.bd-back { overflow: hidden; z-index: 160; }
.bd-card { position: relative; text-align: center; width: min(420px, 100%); border-color: rgba(var(--sun-rgb), .5);
  background: linear-gradient(180deg, rgba(var(--sun-rgb), .14), transparent 45%), var(--panel);
  animation: bd-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.bd-card h3 { font-size: 19px; line-height: 1.3; margin: 4px 0 14px; }
.bd-card .actions { justify-content: center; }
.bd-cake { font-size: 64px; line-height: 1; animation: bd-bounce 1.6s ease-in-out infinite; }
.bd-person { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; margin-top: 8px;
  border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.bd-person.me { border-color: rgba(var(--sun-rgb), .6); }
.bd-ava { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--sun); background: var(--panel-3); }
.bd-person b { font-size: 15px; }
.bd-age { font-size: 12px; margin-top: 1px; }
.bd-wish { font-size: 13px; margin-top: 4px; line-height: 1.4; overflow-wrap: anywhere; }
@keyframes bd-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bd-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.bd-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bd-confetti i { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; opacity: .95;
  animation: bd-fall linear 1 both; }
.bd-confetti i.round { width: 10px; height: 10px; border-radius: 50%; }
@keyframes bd-fall {
  from { transform: translate(0, -20px) rotate(0); }
  to { transform: translate(var(--dx, 0), 105vh) rotate(var(--rot, 360deg)); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .bd-confetti { display: none; } }


.bd-list { display: flex; flex-direction: column; gap: 6px; }
.bd-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.bd-row.now { border-color: rgba(var(--sun-rgb), .6); background: rgba(var(--sun-rgb), .08); }
.bd-row.gone { opacity: .6; }
.bd-main { flex: 1; min-width: 0; }
.bd-sub { font-size: 12px; margin-top: 2px; }
.bd-text { font-size: 12px; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.bd-acts { display: flex; gap: 4px; flex: none; }
.bd-form { display: flex; flex-direction: column; gap: 8px; }
.bd-form select, .bd-form input, .bd-form textarea { width: 100%; }
.bd-date { gap: 10px; }
.bd-wish.big { font-size: 15px; line-height: 1.5; margin: 14px 2px 4px; white-space: pre-line; }
.bd-from { font-size: 12px; margin-top: 6px; }
.bd-close:disabled { opacity: .6; }
.bd-tpl { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; align-items: flex-start; }
.bd-tpl .field, .bd-tpl textarea { width: 100%; }
.bd-test-tag { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; margin-bottom: 14px;
  background: rgba(var(--water-rgb), .12); border: 1px solid rgba(var(--water-rgb), .4); color: var(--water); }
.bd-test-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px;
  padding: 8px 10px; border-radius: 10px; background: rgba(var(--water-rgb), .08); border: 1px dashed rgba(var(--water-rgb), .4); }


.gm-tbtns { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; max-width: 100%; }
.gm-tbtns .gm-tbtn.btn { max-width: 100%; }
.gm-tbtn.btn.gm-quick { border-color: rgba(255, 196, 70, .9); color: #fff3d6; }
.gm-tbtn.btn.gm-quick:hover { background: #ffc446; color: #241600; border-color: #ffc446; box-shadow: 0 0 14px rgba(255, 196, 70, .45); }
.gm-tile-fav { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  font-size: 17px; line-height: 1; cursor: pointer; color: rgba(236, 244, 248, .85); background: rgba(5, 10, 16, .55); border: 1px solid rgba(255, 255, 255, .14); }
.gm-tile-fav:hover { color: #ffc446; }
.gm-tile-fav.on { color: #ffc446; border-color: rgba(255, 196, 70, .7); }
.gm-fav-part { display: contents; }
.gm-tile[hidden] { display: none; }
@media (max-width: 900px) {
  .gm-tile-body.btn-bottom .gt-b .gm-tbtns { width: 100%; }
  .gm-tile-body.btn-bottom .gt-b .gm-tbtns .btn { width: 100%; }
}

.ch-tcount { font-size: 12px; text-align: right; padding: 0 6px 4px; color: var(--muted, #8a8f98); font-variant-numeric: tabular-nums; }
.ch-tcount.over { color: #ff7a6b; font-weight: 600; }