/* In-game screens at the title-screen standard: one pixel typeface, text set straight onto the
   tavern with dark outlines, gem-flanked headers, ruby-diamond menus, and boards as the hero.
   Loaded after theme.css. Presentation only. `:not(#_)` lifts specificity over older rules. */

body,input,select,textarea{font-family:var(--tt-ui)}
body{font-size:15px}
.muted,.fine-print,p{font-family:var(--tt-ui)}
.muted{font-size:14px;line-height:1.5}
.fine-print{font-size:13px;line-height:1.45}
h1,h2,h3,.eyebrow,strong,b{font-family:var(--tt-ui)}

/* ---------- headings: the title menu's gem-flanked label over a big outlined line ---------- */
.eyebrow{display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--tt-ui);letter-spacing:.22em;color:var(--gold);text-shadow:var(--px-o1);margin:0 0 10px}
.eyebrow::before{content:"";flex:none;width:13px;height:9px;background:url(ui/divider-gem.png) center/13px 9px no-repeat;image-rendering:pixelated}
.room-heading{align-items:end;margin-bottom:20px}
.room-heading h1,#app h1{font:600 38px/1.05 var(--tt-ui);letter-spacing:.01em;color:var(--parchment);
  text-shadow:0 3px 0 var(--crimson),var(--px-outline),0 5px 0 var(--tt-ink);margin:0}
#app h2{font:600 24px/1.15 var(--tt-ui);color:var(--parchment);text-shadow:0 2px 0 var(--tt-ink);letter-spacing:0}
#app h3{font:600 17px/1.2 var(--tt-ui);color:var(--parchment);letter-spacing:0}
.room-heading .eyebrow,.room-heading p,.room-heading h1{text-shadow:var(--px-outline)}
.room-heading h1{text-shadow:0 3px 0 var(--crimson),var(--px-outline),0 5px 0 var(--tt-ink)}

/* the short stepped fade the title menu uses when it swaps; dialogs open the same way */
@keyframes im-in{from{opacity:0}to{opacity:1}}
#app.im-enter>*{animation:im-in .18s steps(3) both}
#modal[open],.tutorial[open]{animation:im-in .15s steps(3) both}

/* ---------- top bar: Menu as a text item ---------- */
.topbar .tt-menu-open:not(#_){font-size:17px!important;color:var(--parchment);margin-left:auto;margin-right:14px}

/* ---------- rivals and blades: list rows that light up like menu items ---------- */
.opponents{display:grid;gap:2px}
.opponent{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 10px 8px 16px!important;border:0!important;border-image:none!important;background:none!important;box-shadow:none!important;color:var(--parchment)}
.opponent strong{display:block;font:600 17px/1.1 var(--tt-ui);color:#e3d3b2;text-shadow:var(--px-o1)}
.opponent small{display:block;font:400 12px/1.3 var(--tt-ui);color:var(--muted)}
.opponent .record{font:600 13px var(--tt-ui);color:var(--muted)}
.opponent::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-5px;background:var(--crimson);border:2px solid var(--gold);
  box-shadow:0 0 0 2px var(--tt-ink);transform:rotate(45deg) scale(0);transition:transform .12s steps(3)}
.opponent:hover strong{color:var(--parchment)}
.opponent.selected{background:linear-gradient(90deg,#7d1b2055,transparent 85%)!important}
.opponent.selected strong{color:var(--gold)}
.opponent.selected::before,.opponent:hover::before{transform:rotate(45deg) scale(1)}
.opponent-initial{width:34px;height:34px;font:700 16px var(--tt-ui)}
.equipped-blade{border:0!important;background:none!important;color:var(--parchment)}
.equipped-blade strong{font:600 20px var(--tt-ui)!important;color:var(--parchment);text-shadow:var(--px-o1)}
.equipped-blade small{color:var(--gold);font-family:var(--tt-ui)}
.equipped-blade:hover strong{color:var(--gold)}
#start-duel{display:block;margin:16px auto 4px}

/* lobby: record numbers float over the room like the title's corner text */
.record-numbers b{font:600 34px var(--tt-ui)}
.record-numbers span{font:600 11px var(--tt-ui);letter-spacing:.16em;color:#d8c49c;text-shadow:var(--px-o1)}
.lobby-table .table-label{font:600 12px var(--tt-ui);letter-spacing:.2em;color:var(--gold)}

/* ---------- tabs (workshop, settings): text items, the chosen one gold with a gem beneath ---------- */
.segmented,.settings-tabs{display:flex;gap:2px 6px;flex-wrap:wrap;border:0;background:none;padding:0;box-shadow:none}
.settings-tabs{justify-content:center;margin:6px 0 16px}
.segmented button:not(#_),.settings-tabs button:not(#_){font-size:17px}

/* challenge mode cards: two choices that read as a pair of menu entries */
.challenge-modes{gap:12px}
.challenge-modes button{position:relative;text-align:left;border:2px solid #5a391b!important;border-image:none!important;background:#0d080766!important;
  box-shadow:0 0 0 2px #0d0807;color:var(--parchment);padding:12px 14px!important;border-radius:0}
.challenge-modes button strong{font:600 18px var(--tt-ui);color:#e3d3b2}
.challenge-modes button span{font:400 13px/1.35 var(--tt-ui);color:var(--muted)}
.challenge-modes button b{font:600 22px var(--tt-ui);color:var(--gold)}
.challenge-modes button:hover{border-color:#8a5a26!important}
.challenge-modes button.selected{border-color:var(--gold)!important;background:linear-gradient(180deg,#7d1b2044,#0d080766)!important}
.challenge-modes button.selected strong{color:var(--gold)}

/* labels and rows inside slabs */
.field-label{font:600 13px var(--tt-ui);color:#d8c49c;letter-spacing:.04em}
.setting-row{font:400 15px var(--tt-ui)}
.stat-list{gap:12px;font-size:15px}
.stat-list span{color:#d8c49c;font-family:var(--tt-ui)}
.stat-list strong{font:600 17px var(--tt-ui);color:var(--parchment)}
.tag{font:600 11px var(--tt-ui)}

/* ---------- the duel: no boxes, the boards are the hero ---------- */
.game-heading{position:relative;align-items:center;margin-bottom:14px;min-height:64px}
.game-heading h1{font-size:30px!important}
.match-tools{gap:2px}
.match-tools>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important;
  font:600 44px/1 var(--tt-ui)!important;color:var(--gold);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  text-shadow:0 3px 0 var(--crimson),var(--px-outline),0 5px 0 var(--tt-ink)}
.match-tools button:not(#_){font-size:17px;padding:4px .8em}
.match-grid .table-surface,.match-grid .match-loadout,.challenge-main,.rogue-layout>.table-surface,
.challenge-arena .challenge-sidebar>.panel{background:none!important;border:0!important;border-image:none!important;box-shadow:none!important}
.match-grid .table-label{display:none}
.match-loadout,.match-notes,.challenge-main,.challenge-sidebar,.rogue-layout{text-shadow:var(--px-o1)}
.match-loadout .muted,.match-notes .muted,.match-notes .fine-print{color:#e3d2b0}
.board-header strong{font:600 18px var(--tt-ui)!important;color:var(--gold);text-shadow:var(--px-o1)}
.board-header>div>span{font:400 12px var(--tt-ui)!important;color:#d8c49c}
.next-piece span{font:600 10px var(--tt-ui)!important;letter-spacing:.14em;color:var(--gold)}
.board-bottom,.challenge-board-foot{font:400 12px var(--tt-ui);color:#d8c49c}
.board-bottom{display:flex;justify-content:space-between;gap:6px;margin-top:10px}
.exchange-entry{font-family:var(--tt-ui)}
.exchange-entry>span{color:var(--gold);letter-spacing:.12em}
@media(min-width:1000px){
  .match-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:start}
  .match-grid>.match-loadout{justify-self:end;width:230px;padding:0!important}
  .match-grid>.match-notes{display:block;justify-self:start;width:230px;padding:0}
  /* the side panels never make the page taller than the boards (it would grow a scrollbar mid-game and shift
     everything): each takes the boards' height and the combo list scrolls inside it */
  .match-grid>:is(.match-loadout,.match-notes):not(#_){align-self:stretch;height:0;min-height:100%;overflow:hidden}
  .match-grid>.match-notes:not(#_){display:flex;flex-direction:column}
  .match-grid>.match-notes>*{flex:none}
  .match-grid>.match-notes>.chain-log:not(#_){flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b4a22 transparent}
  .match-grid .boards{gap:56px}
  .match-grid .board-wrap{width:clamp(150px,calc((100dvh - 360px)*4/13),300px);max-width:none}
  .match-grid .boards.single #wrap-0{width:clamp(160px,calc((100dvh - 360px)*4/13),300px);max-width:none}
  .challenge-board{width:clamp(150px,calc((100dvh - 400px)*4/13),280px);max-width:none}
}
.match-loadout .divider,.match-notes .divider{opacity:.85}

/* count-in: a big gold number over the boards, no dimming */
.game-overlay:has(.count-in){background:none!important}
.count-in{font:700 120px/1 var(--tt-ui)!important;color:var(--gold);text-shadow:0 6px 0 var(--crimson),var(--px-outline),0 9px 0 var(--tt-ink);animation:im-pop .4s steps(4) infinite}
@keyframes im-pop{0%{transform:scale(1.25);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ---------- pause and results: full-room menus like the title screen ---------- */
.game-overlay.shown:has(.pause-card),#challenge-results:has(.challenge-result-card),#paired-results:has(.challenge-result-card),#ol-results:has(.challenge-result-card){
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;border-radius:0;
  background:var(--veil)!important;animation:im-fade .25s steps(3) both}
@keyframes im-fade{from{opacity:0}to{opacity:1}}
.pause-card,.challenge-result-card,.im-ask{background:none!important;border:0!important;border-image:none!important;box-shadow:none!important;
  max-width:min(640px,92vw)!important;width:auto!important;text-align:center;padding:0!important;display:flex;flex-direction:column;align-items:center}
.pause-card .eyebrow,.challenge-result-card .eyebrow,.im-head{justify-content:center;font:600 clamp(13px,1.9vmin,19px) var(--tt-ui);letter-spacing:.3em;
  color:var(--gold);text-shadow:var(--px-outline);margin:0 0 14px}
.pause-card .eyebrow::before,.challenge-result-card .eyebrow::before,.im-head::before,
.pause-card .eyebrow::after,.challenge-result-card .eyebrow::after,.im-head::after{content:"";display:inline-block;width:26px;height:18px;flex:none;vertical-align:middle;margin:0 .6em;
  background:url(ui/divider-gem.png) center/26px 18px no-repeat;image-rendering:pixelated}
#app .pause-card h2,#app .challenge-result-card h2,.im-ask h2{font:600 clamp(32px,6vmin,58px)/1.05 var(--tt-ui);color:var(--parchment);margin:0 0 12px;
  text-shadow:0 4px 0 var(--crimson),var(--px-outline),0 6px 0 var(--tt-ink)}
.pause-card .muted,.challenge-result-card .muted,.im-hint{font:400 clamp(14px,2vmin,19px)/1.4 var(--tt-ui);color:var(--parchment);text-shadow:var(--px-outline);margin:0 0 18px}
.challenge-result-card{gap:0}
.challenge-result-card>div{display:flex;flex-direction:column;align-items:center}
.pause-card button:not(#_),.challenge-result-card button:not(#_),.im-ask .im-menu button:not(#_){display:block;margin:2px auto;width:auto;
  font:600 clamp(20px,3.6vmin,36px)/1.2 var(--tt-ui);color:#d9cdb6;padding:2px .7em;text-shadow:var(--px-outline)}
.challenge-result-card .button-row,.im-ask .im-menu{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.8vh,8px)}
/* in these menus only the one in play is lit, whether reached by mouse or keys */
.pause-card button:not(#_)::before,.pause-card button:not(#_)::after,.challenge-result-card button:not(#_)::before,.challenge-result-card button:not(#_)::after,
.im-ask button:not(#_)::before,.im-ask button:not(#_)::after{transform:rotate(45deg) scale(0)}
.pause-card button.is-active:not(#_),.challenge-result-card button.is-active:not(#_),.im-ask button.is-active:not(#_){color:var(--gold);transform:scale(1.1)}
.pause-card button.is-active:not(#_)::before,.pause-card button.is-active:not(#_)::after,.challenge-result-card button.is-active:not(#_)::before,
.challenge-result-card button.is-active:not(#_)::after,.im-ask button.is-active:not(#_)::before,.im-ask button.is-active:not(#_)::after{transform:rotate(45deg) scale(1)}
.pause-card button:not(.is-active):not(#_):hover,.challenge-result-card button:not(.is-active):not(#_):hover{color:#d9cdb6}
.im-ask{position:fixed;inset:0;margin:auto;max-width:none!important;width:100vw!important;height:100vh;max-height:none;justify-content:center;color:var(--parchment)}
.im-ask[open]{display:flex;animation:im-fade .2s steps(3) both}
.im-ask::backdrop{background:radial-gradient(ellipse 60% 62% at 50% 50%,#0d0807d0,#0d0807f4)}
.im-ask button{outline:none}
.im-ask h2,.im-ask .im-hint{max-width:min(640px,90vw)}

/* ---------- dialogs: one dark slab, centred header like the title menu ---------- */
#modal{max-width:min(760px,94vw)}
#modal>.eyebrow,#settings-content>.eyebrow,#modal .sword-picker>.eyebrow{justify-content:center;letter-spacing:.3em}
#modal>.eyebrow::after,#settings-content>.eyebrow::after,#modal .sword-picker>.eyebrow::after{content:"";flex:none;width:13px;height:9px;background:url(ui/divider-gem.png) center/13px 9px no-repeat;image-rendering:pixelated}
#modal>h2,#settings-content>h2,#modal .sword-picker>h2{text-align:center;font-size:32px!important;text-shadow:0 3px 0 var(--crimson),var(--px-outline)!important;margin:0 0 14px}
#modal .modal-close:not(#_){font:600 30px/1 var(--tt-ui);color:var(--gold);top:12px;right:14px}
#modal .modal-close::before,#modal .modal-close::after{display:none}
#modal .modal-close:not(#_){position:absolute}
/* short confirms in the game's dialog read like the pause menu: no slab, big type, a menu */
#modal.im-plain{text-align:center;max-width:min(680px,94vw);background:none;border:0;box-shadow:none;overflow:visible}
#modal.im-plain>.eyebrow{font:600 clamp(13px,1.9vmin,19px) var(--tt-ui);letter-spacing:.3em;text-shadow:var(--px-outline);margin-bottom:14px}
#modal.im-plain>.eyebrow::before,#modal.im-plain>.eyebrow::after{width:26px;height:18px;background-size:26px 18px}
#modal.im-plain>h2{font:600 clamp(30px,5.6vmin,54px)/1.05 var(--tt-ui)!important;text-shadow:0 4px 0 var(--crimson),var(--px-outline),0 6px 0 var(--tt-ink)!important}
#modal.im-plain .muted{font-size:clamp(14px,2vmin,19px);color:var(--parchment);text-shadow:var(--px-outline)}
#modal.im-plain .modal-close{display:none}
#modal.im-plain .button-row.im-menu{flex-direction:column}
#modal.im-plain .button-row.im-menu button:not(#_){font-size:clamp(20px,3.6vmin,34px)}
#modal .button-row.im-menu{justify-content:center;gap:4px 18px;margin-top:10px}
#modal .button-row.im-menu button:not(#_){font-size:22px}
#modal .button-row.im-menu button:not(#_):not(.is-active)::before,#modal .button-row.im-menu button:not(#_):not(.is-active)::after{transform:rotate(45deg) scale(0)}
#modal .button-row.im-menu button:not(#_):not(.is-active){color:#d9cdb6}
#modal .button-row.im-menu button.is-active:not(#_){color:var(--gold)}
#modal .button-row.im-menu button.is-active:not(#_)::before,#modal .button-row.im-menu button.is-active:not(#_)::after{transform:rotate(45deg) scale(1)}
.key-bindings>div{font:400 15px var(--tt-ui)}
.sword-choice{border:2px solid #5a391b!important;background:#0d080766!important;border-image:none!important;font-family:var(--tt-ui)}
.sword-choice:hover{border-color:#8a5a26!important}
.sword-choice.selected{border-color:var(--gold)!important;background:linear-gradient(180deg,#7d1b2044,#0d080766)!important}

/* ---------- lists: replays, rack, history ---------- */
.replay-card h3{font-size:18px}
.replay-card button:not(#_)::before,.replay-card button:not(#_)::after{display:none!important}   /* their markers sat at the card's top edge */
/* replays by day: a heading per day that folds; the time leads each row */
.replay-tabs{margin:8px 0 6px}
.replay-day{margin:10px 0 0;border-top:1px solid #5a391b}
.replay-day>summary{display:flex;align-items:baseline;gap:10px;padding:10px 2px;cursor:pointer;list-style:none;font:600 17px var(--tt-ui);color:var(--gold)}
.replay-day>summary::-webkit-details-marker{display:none}
.replay-day>summary::before{content:"";align-self:center;width:0;height:0;border:5px solid transparent;border-left:7px solid #cdb98f;border-right:0;transition:transform .15s}
.replay-day[open]>summary::before{transform:rotate(90deg)}
.replay-day>summary small{font:400 13px var(--tt-ui);color:#a8987a}
.replay-day .replay-list{margin:4px 0 12px;gap:8px}
.replay-day .replay-card{padding:10px 14px;gap:14px}
.replay-day>summary .replay-day-export:not(#_):not(#_){margin:0 0 0 auto!important;width:auto!important;min-height:0;padding:3px 10px!important;font:400 13px var(--tt-ui)!important}
.replay-day>summary .replay-day-export:not(#_):not(#_)::before,.replay-day>summary .replay-day-export:not(#_):not(#_)::after{display:none!important}
.replay-day .replay-card[data-export-row]{cursor:pointer}
.replay-time{font:600 15px var(--tt-ui);color:#cdb98f;min-width:44px;font-variant-numeric:tabular-nums}
.replay-day .replay-card>div:nth-of-type(2){flex:1 1 150px;min-width:0}
/* combos: your own as a grid of stills, everyone's in the feed */
.combo-shelf{margin:16px 0 0}
.combo-shelf-head{display:flex;align-items:center;gap:14px}
.combo-shelf-head h2{margin:0;font-size:22px}
.combo-shelf-head button:not(#_):not(#_){margin:0!important;width:auto!important}
.combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px;margin-top:12px}
.combo-tile:not(#_):not(#_){display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px!important;min-height:0;background:#0d080799!important;border:2px solid #5a391b!important;font:400 13px var(--tt-ui)!important}
.combo-tile:not(#_):not(#_):hover{border-color:var(--gold)!important}
.combo-tile:not(#_):not(#_)::before,.combo-tile:not(#_):not(#_)::after{display:none!important}
.combo-tile canvas{width:100%;aspect-ratio:4/13;background:#050307}
.combo-tile b{color:var(--gold);font-weight:600}.combo-tile small{color:#a8987a;font-size:11px}
/* the combo feed: one framed clip a screen, scrolled like short videos, with up and down beside it */
.cf-feed{position:fixed;inset:0;z-index:1000;background:#050307e6;backdrop-filter:blur(3px);display:flex;flex-direction:column}
.cf-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font:600 16px var(--tt-ui);color:var(--gold)}
.cf-close:not(#_):not(#_){min-height:0;padding:2px 12px!important;font:400 28px/1 var(--tt-ui)!important;background:none!important;border:0!important;color:#d9cdb6!important}
.cf-close:not(#_):not(#_)::before,.cf-close:not(#_):not(#_)::after{display:none!important}
.cf-list{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.cf-list::-webkit-scrollbar{display:none}
.cf-item{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:8px 16px}
.cf-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 18px 12px;background:linear-gradient(180deg,#1c120c,#120b07);border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807,0 18px 40px #000c}
.cf-head{display:flex;align-items:baseline;gap:10px;font-family:var(--tt-ui)}
.cf-head b{font:600 22px var(--tt-ui);color:var(--gold);text-shadow:var(--px-o1)}
.cf-chain{font:600 16px var(--tt-ui);color:#0d0807;background:var(--gold);padding:1px 8px}
.cf-who{display:flex;align-items:center;gap:8px;margin:0;color:#e8dcc0;font:400 14px var(--tt-ui)}
.cf-board{height:min(calc(100dvh - 210px),560px);aspect-ratio:4/13;background:#050307;border:2px solid #4a2f16}
.cf-when{color:#a8916a;font:400 12px var(--tt-ui)}
.cf-wait{margin:0;color:#c28d88;font-family:var(--tt-ui)}
.cf-nav:not(#_){position:fixed;right:max(16px,calc(50% - 250px));top:50%;bottom:auto;left:auto;height:auto;width:auto;padding:0;background:none;border:0;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:400 13px var(--tt-ui);color:#cdb98f}
.cf-step:not(#_):not(#_){min-height:0;width:40px;height:40px;padding:0!important;font:400 16px var(--tt-ui)!important;background:#140c08!important;border:2px solid #6b4a22!important;color:var(--gold)!important}
.cf-step:not(#_):not(#_):disabled{opacity:.35}
.cf-step:not(#_):not(#_)::before,.cf-step:not(#_):not(#_)::after{display:none!important}
@media(max-width:600px){.cf-nav:not(#_){right:8px}.cf-board{height:min(calc(100dvh - 230px),560px)}}
.challenge-history-list,.challenge-rank{font-family:var(--tt-ui)}
.pattern-preset{font-family:var(--tt-ui)}
.pattern-preset strong{font:600 15px var(--tt-ui)!important}
.pattern-preset.selected strong{color:var(--gold)}
.empty-state h2{font-size:30px!important}

@media(max-width:720px){
  .room-heading h1,#app h1{font-size:28px}.game-heading h1{font-size:20px!important}
  .match-tools>span{position:static;transform:none;font-size:26px!important}
  .count-in{font-size:80px!important}
}
@media(prefers-reduced-motion:reduce){#app.im-enter>*,#modal[open],.tutorial[open],.count-in,.game-overlay.shown,.im-ask[open]{animation:none!important}}
.im-ask:not([open]){display:none!important}

label,.switch{font-family:var(--tt-ui)}
.match-loadout .pattern-preview{max-width:168px;margin:0 auto}
.lobby-table+.field-notes .text-button:not(#_){display:block;padding-left:0}
@media(min-width:1100px){.room-grid:not(.match-grid){grid-template-columns:290px minmax(420px,1fr) 220px;gap:26px}}
.loadout .pattern-preview{max-width:190px}
#modal:has(#settings-content){width:min(720px,94vw);max-width:none}
/* lobby: the table floats like the duel, boards larger */
.lobby-table{background:none!important;border:0!important;box-shadow:none!important;text-shadow:var(--px-o1)}
.lobby-table .table-label{justify-content:flex-end}.lobby-table .table-label>span:first-child{display:none}
@media(min-width:1000px){.lobby-table .board-wrap{width:clamp(140px,calc((100dvh - 380px)*4/13),260px);max-width:none}.lobby-table .boards{gap:48px}}
.lobby-table+.field-notes .record-numbers b{font-size:40px}
/* main actions sit centred at their own width, never stretched across a slab */
button.primary:not(#_){width:auto!important;display:block;margin-left:auto;margin-right:auto;flex:none}
.button-row button:not(#_){flex:none!important;width:auto}
.button-row:has(.primary){justify-content:center}
.button-row button.primary:not(#_){margin:6px 0 0}
/* blade rack: dark slabs like the gallery cards */
.rack-card{border:2px solid #5a391b!important;border-image:none!important;background:#120b08e6;box-shadow:0 0 0 2px #0d0807,0 10px 24px #0008;padding:14px!important}
.rack-card.equipped{border-color:var(--gold)!important;background:linear-gradient(180deg,#7d1b2033,#120b08e6)}
.rack-card .button-row{justify-content:center}
.im-ask::backdrop{background:radial-gradient(ellipse 60% 62% at 50% 50%,#0d0807ec,#0d0807fa)}
body:has(#im-ask[open]) .game-overlay .pause-card{visibility:hidden}

/* ---------- every piece outside the board uses the board's gem tiles ---------- */
.pattern-cell,.pattern-editor button,.editor-cell,.swatch{image-rendering:auto}
.pattern-cell[style*="df3939"],.pattern-editor button[style*="df3939"],.editor-cell[style*="#df3939"]:not(.breaker),.swatch[style*="df3939"]{background:var(--tile-0) center/100% 100% no-repeat!important}
.pattern-cell[style*="f2cf28"],.pattern-editor button[style*="f2cf28"],.editor-cell[style*="#f2cf28"]:not(.breaker),.swatch[style*="f2cf28"]{background:var(--tile-1) center/100% 100% no-repeat!important}
.pattern-cell[style*="47bf56"],.pattern-editor button[style*="47bf56"],.editor-cell[style*="#47bf56"]:not(.breaker),.swatch[style*="47bf56"]{background:var(--tile-2) center/100% 100% no-repeat!important}
.pattern-cell[style*="369dde"],.pattern-editor button[style*="369dde"],.editor-cell[style*="#369dde"]:not(.breaker),.swatch[style*="369dde"]{background:var(--tile-3) center/100% 100% no-repeat!important}
.editor-cell.breaker[style*="#df3939"]{background:#14151b var(--tile-breaker-0) center/62% 92% no-repeat!important}
.editor-cell.breaker[style*="#f2cf28"]{background:#14151b var(--tile-breaker-1) center/62% 92% no-repeat!important}
.editor-cell.breaker[style*="#47bf56"]{background:#14151b var(--tile-breaker-2) center/62% 92% no-repeat!important}
.editor-cell.breaker[style*="#369dde"]{background:#14151b var(--tile-breaker-3) center/62% 92% no-repeat!important}
.pattern-cell,.pattern-editor button,.swatch{box-shadow:none!important;border:0!important;border-radius:0!important}
.pattern-editor button,.swatch{font-size:0!important;color:transparent!important}
.pattern-preview{gap:3px}
.sword-icon{filter:drop-shadow(0 2px 0 #0009)}

/* ---------- Play vs AI: your blade, the difficulty, their blade ---------- */
.pm-heading{justify-content:center;text-align:center}.pm-heading .eyebrow{justify-content:center}
.pm-versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px) minmax(0,1fr);gap:28px;align-items:start;max-width:1180px;margin:0 auto}
.pm-side{display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:var(--px-o1)}
.pm-side .eyebrow{justify-content:center}
.pm-blade{display:flex;align-items:center;gap:6px;margin:4px 0 6px}
.pm-arrow:not(#_){font:600 44px/1 var(--tt-ui);color:#d9cdb6;padding:0 .3em}
.pm-arrow:not(#_)::before,.pm-arrow:not(#_)::after{display:none}
.pm-arrow:not(#_):hover{color:var(--gold)}
.pm-sword:not(#_){width:130px;height:230px;display:grid;place-items:center;padding:0;border-radius:0;
  background:radial-gradient(closest-side,#f0cf7a2e,transparent 75%)}
.pm-sword:not(#_)::before,.pm-sword:not(#_)::after{display:none}
.pm-sword .sword-icon{width:112px;height:224px;filter:drop-shadow(0 4px 0 #000a) drop-shadow(0 0 18px #f0cf7a33);transition:transform .15s steps(3)}
.pm-sword:hover .sword-icon{transform:translateY(-4px)}
.pm-random{font:700 120px/1 var(--tt-ui);color:#f0cf7a99;text-shadow:0 5px 0 var(--crimson),var(--px-outline)}
#app .pm-name{font-size:28px;margin:0 0 12px;color:var(--parchment);text-shadow:0 3px 0 var(--crimson),var(--px-outline)}
.pm-side .pattern-preview{width:min(210px,80%);margin:0 auto}
.pm-note{color:#d8c49c;font-size:15px}
.pm-center{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:30px}
.pm-center .eyebrow{justify-content:center;margin-top:8px}
.pm-vs{font:700 88px/1 var(--tt-ui);color:var(--gold);text-shadow:0 5px 0 var(--crimson),var(--px-outline),0 8px 0 var(--tt-ink);margin-bottom:14px}
.pm-diff{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}
.pm-diff-item:not(#_){display:flex;flex-direction:column;align-items:center;padding:4px 1em}
.pm-diff-item strong{font:600 26px/1.1 var(--tt-ui);color:#d9cdb6}
.pm-diff-item small{font:400 13px var(--tt-ui);color:var(--muted)}
.pm-diff-item.selected:not(#_){background:none;padding-bottom:4px}
.pm-diff-item.selected strong,.pm-diff-item:hover strong{color:var(--gold)}
.pm-diff-item:not(.selected):not(#_)::before,.pm-diff-item:not(.selected):not(#_)::after{transform:rotate(45deg) scale(0)}
.pm-diff-item.selected:not(#_)::before,.pm-diff-item.selected:not(#_)::after,.pm-diff-item:hover:not(#_)::before,.pm-diff-item:hover:not(#_)::after{transform:rotate(45deg) scale(1);top:16px}
.pm-record{font:400 15px var(--tt-ui);color:#d8c49c;text-shadow:var(--px-o1);margin:4px 0 2px}.pm-record b{color:var(--parchment);font-size:20px}.pm-record span{color:var(--gold);margin:0 .4em}
#start-duel:not(#_){font-size:30px;margin-top:12px}
.pm-center .enamel-controls{display:flex;gap:10px;margin-top:14px}
@media(max-width:900px){.pm-versus{grid-template-columns:1fr}.pm-center{order:-1;padding-top:0}.pm-vs{font-size:56px}}

/* ---------- combos: chain size coloured and growing with each stage ---------- */
.chain-log{display:flex;flex-direction:column;gap:8px}
.chain-entry{--tc:#cdb894;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;padding:6px 10px 6px 4px;
  background:color-mix(in srgb,var(--tc) 12%,#0d080799);border-left:3px solid var(--tc)}
.chain-entry.enter{animation:chain-in .35s steps(4) both}
.chain-entry.theirs{opacity:.72;border-left-style:dashed}
.chain-n{justify-self:center;font:700 22px/1 var(--tt-ui);color:var(--tc);text-shadow:0 2px 0 #0d0807,var(--px-o1)}
.chain-entry strong{display:block;font:600 16px/1.1 var(--tt-ui);color:var(--tc);text-shadow:var(--px-o1)}
.chain-entry small{display:block;font:400 12px var(--tt-ui);color:#d8c49c;margin:1px 0 3px}
.chain-entry.theirs small{color:#ff9d8a}
.chain-sent{display:flex;flex-wrap:wrap;gap:4px 8px}
.sent-sword,.sent-sprinkle,.sent-none{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--tt-ui);color:var(--parchment)}
.sent-sword::before{content:"";width:7px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 16'%3E%3Cpath d='M3.5 0l1.6 2v8.6H1.9V2z' fill='%23dfe4ea'/%3E%3Cpath d='M0 10.6h7v1.4H0z' fill='%23ecc66c'/%3E%3Cpath d='M2.6 12h1.8v2.6H2.6z' fill='%235a3a22'/%3E%3Ccircle cx='3.5' cy='15' r='1' fill='%23ecc66c'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(180deg)}
.sent-sprinkle::before{content:"";width:12px;height:12px;background:radial-gradient(circle at 25% 30%,#f0cf7a 1.6px,transparent 2px),radial-gradient(circle at 75% 35%,#d43838 1.6px,transparent 2px),radial-gradient(circle at 45% 78%,#47bf56 1.6px,transparent 2px)}
.sent-sprinkle::after{content:" sprinkles";font-weight:400;color:#d8c49c}
.sent-none{font-weight:400;color:#a8967a}
.chain-entry.tier-2{--tc:#74e283}
.chain-entry.tier-3{--tc:#6ec8ff}.chain-entry.tier-3 .chain-n{font-size:26px}
.chain-entry.tier-4{--tc:#cf98ff}.chain-entry.tier-4 .chain-n{font-size:30px}
.chain-entry.tier-5{--tc:#ffa257}.chain-entry.tier-5 .chain-n{font-size:34px;text-shadow:0 3px 0 #0d0807,var(--px-o1)}.chain-entry.tier-5 strong{font-size:18px}
.chain-entry.tier-6{--tc:#ffd75e}.chain-entry.tier-6 .chain-n{font-size:38px;text-shadow:0 3px 0 #7d1b20,var(--px-o1)}.chain-entry.tier-6 strong{font-size:20px;letter-spacing:.06em}
@keyframes chain-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.match-notes .chain-entry .muted{margin:0}
.sent-sword i{font-style:normal;font-weight:400;color:#d8c49c;margin-left:1px}
.chain-entry.live{border-left-style:solid;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--tc) 50%,transparent)}
.chain-steps{list-style:none;margin:4px 0 0;padding:3px 0 0;border-top:1px solid color-mix(in srgb,var(--tc) 30%,transparent);display:flex;flex-wrap:wrap;gap:1px 10px;font:400 11px/1.35 var(--tt-ui);color:#b9a684}
.chain-steps b{font-weight:600;color:var(--tc);margin-right:4px}

/* ---------- Zen ---------- */
body[data-scene=zen]{background:#150d1d url(vista.png) center 62%/cover fixed no-repeat}
body[data-scene=zen]::before{background:radial-gradient(ellipse 58% 70% at 50% 50%,rgba(14,8,20,.55),rgba(14,8,20,.3) 65%,rgba(14,8,20,.7))}
.zen-grid .table-surface{filter:drop-shadow(0 0 40px #8f7cff22)}
.zen-panel .eyebrow,.zen-music .eyebrow{color:#e6d4ff}
.zen-level{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.zen-level>b{display:grid;place-items:center;min-width:54px;height:54px;font:700 34px/1 var(--tt-ui);color:#fff3c8;text-shadow:0 3px 0 var(--crimson),var(--px-outline);
  background:radial-gradient(closest-side,#f0cf7a40,transparent);border:2px solid var(--gold);transform:rotate(45deg)}
.zen-level>b{transform:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:0;background:linear-gradient(#7d1b20,#3a0c10);box-shadow:none}
.zen-level strong{display:block;font:600 19px var(--tt-ui);color:var(--parchment)}
.zen-bar{height:10px;margin:6px 0 4px;background:#0d0807;border:2px solid #5a391b;box-shadow:0 0 0 2px #0d0807}.zen-bar i{display:block;height:100%;width:0;background:linear-gradient(#ffe9a0,#d4a24c);transition:width .4s steps(6)}
.zen-level small{font:400 12px var(--tt-ui);color:#d8c49c}
.zen-level-up{height:0;overflow:visible;position:relative}
.zen-level-up.show{animation:zen-up 2.6s steps(10) both}
.zen-level-up small{display:block;font:600 11px var(--tt-ui);letter-spacing:.2em;color:var(--gold)}.zen-level-up strong{font:600 20px var(--tt-ui);color:#fff3c8;text-shadow:0 2px 0 var(--crimson),var(--px-o1)}
.zen-level-up:not(.show){visibility:hidden}
@keyframes zen-up{0%{opacity:0;transform:translateY(8px)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
.zen-stats{display:grid;gap:8px;margin:0}
.zen-stats>div{display:flex;justify-content:space-between;gap:10px}
.zen-stats dt{font:400 15px var(--tt-ui);color:#d8c49c}.zen-stats dd{margin:0;font:600 17px var(--tt-ui);color:var(--parchment)}
.zen-music{margin-top:2px}
.zen-track{display:flex;align-items:center;gap:12px}
.zen-track strong{display:block;font:600 17px var(--tt-ui);color:var(--parchment)}.zen-track small{display:block;font:400 13px var(--tt-ui);color:#d8c49c}
.zen-disc{width:40px;height:40px;flex:none;border-radius:50%;background:radial-gradient(circle,#d43838 0 5px,#1a1214 6px 8px,#2a2024 9px 11px,#151013 12px 14px,#2a2024 15px 17px,#151013 18px 20px);box-shadow:0 0 0 2px #0d0807,0 0 0 4px #5a391b}
.zen-music.playing .zen-disc{animation:zen-spin 3s linear infinite}
@keyframes zen-spin{to{transform:rotate(360deg)}}
.zen-controls{display:flex;gap:4px;margin:10px 0 6px}
.zen-stations{display:grid;grid-template-columns:1fr;gap:5px;margin:12px 0 4px}
.zen-stations button:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 9px;text-align:left;border-radius:6px;background:#1d1626cc;border:1px solid #5a4a6e;color:var(--parchment);line-height:1.15;min-width:0}
.zen-stations button b{font:600 14px var(--tt-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.zen-stations button small{font:400 12px var(--tt-ui);color:#cdb98f}
.zen-stations button.on:not(#_){border-color:#e6d4ff;background:#3a2a52;box-shadow:0 0 0 1px #e6d4ff55,0 0 12px #b48cff33}
.zen-stations button:disabled:not(#_){opacity:.45;cursor:default}.zen-stations button:disabled small::before{content:'\1F512\00a0'}
.zen-level-up em{display:block;font:italic 600 13px var(--tt-ui);color:#e6d4ff;margin-top:2px}
.zen-controls button:not(#_){font-size:22px;padding:2px .55em}
.zen-vol{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;font:400 14px var(--tt-ui);color:#d8c49c}
.zen-reset{text-align:center}.zen-reset .eyebrow{justify-content:center;color:#e6d4ff}
#app .zen-reset h2{font:600 30px var(--tt-ui);color:var(--parchment);text-shadow:0 3px 0 #4a2a7a,var(--px-outline)}
.game-overlay:has(.zen-reset){background:radial-gradient(closest-side,#140b1ecc,#140b1e66)!important}
.swatch.selected{outline:3px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.chain-entry,.chain-entry .chain-n,.zen-music.playing .zen-disc{animation:none!important}}

/* ---------- dropdowns as ‹ value › cyclers ---------- */
.im-hidden-select{display:none!important}
.im-cycler{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:180px;margin-top:4px;padding:2px 0;border-bottom:2px solid #5a391b}
.im-cyc:not(#_){font:600 26px/1 var(--tt-ui);color:#d9cdb6;padding:0 .35em}
.im-cyc:not(#_)::before,.im-cyc:not(#_)::after{display:none}
.im-cyc:not(#_):hover{color:var(--gold)}
.im-cyc-val{flex:1;text-align:center;font:600 17px var(--tt-ui);color:var(--gold);text-shadow:var(--px-o1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- hidden: seeds and the small print ---------- */
label:has(> #challenge-seed),label:has(> #rogue-seed),#challenge-seed+.fine-print,.challenge-options>.fine-print,.challenge-history-list small,
.challenge-control-note,.rogue-sidebar .divider+p.fine-print:not([id]),.rules-more,#challenge-pool-summary,
.pattern-work-grid>aside:last-child:not(.pattern-library),.pattern-library>.fine-print,#rogue-stage .fine-print{display:none!important}
label:has(> #challenge-players){display:none!important}

/* ---------- Free-for-All and Adventure setup: centred like Play vs AI ---------- */
.challenge-setup{display:grid;grid-template-columns:minmax(0,560px) minmax(0,380px);gap:28px;justify-content:center;align-items:start}
.challenge-options{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.challenge-options .text-button:not(#_){align-self:flex-start;padding-left:0}
.challenge-best{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;font:400 16px var(--tt-ui);color:#d8c49c}
.challenge-best strong{font:600 30px var(--tt-ui);color:var(--gold);text-shadow:0 3px 0 var(--crimson),var(--px-o1)}
#start-challenge:not(#_){font-size:28px;align-self:center}
.challenge-rules h2{font-size:22px!important}
.scoring-example{background:#0d080766!important;border:2px solid #3a2612;border-radius:0!important}
.challenge-history{max-width:968px;margin:24px auto 0}
.challenge-history-list>div{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid #6e441966}
.challenge-history-list strong{font:600 24px var(--tt-ui);color:var(--gold);text-shadow:var(--px-o1)}
.challenge-history-list span{font:400 15px var(--tt-ui);color:var(--parchment)}
.rogue-setup{max-width:620px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.rogue-setup .eyebrow{justify-content:center}
.rogue-setup .button-row{justify-content:center}
#rogue-new:not(#_),#rogue-resume-saved:not(#_){font-size:28px}
@media(max-width:900px){.challenge-setup{grid-template-columns:1fr}}

/* ---------- Workshop: one Blades tab (rack + editor) and Freebuild ---------- */
.library-workshop{grid-template-columns:minmax(300px,420px) minmax(340px,520px)!important;justify-content:center}
.pattern-library .preset-rack{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
/* the blade list scrolls as one column, never a box inside one group */
@media(min-width:641px){.pattern-library .preset-rack:not(#_){max-height:none;overflow:visible}.pattern-library:not(#_){max-height:calc(100dvh - 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6e4419 transparent}}
.pattern-library .pattern-preset{display:grid!important;grid-template-columns:34px 1fr;align-items:center;gap:8px;padding:8px!important;text-align:left;
  border:2px solid #3a2612!important;border-image:none!important;background:#0d080755!important;color:var(--parchment)}
.pattern-library .pattern-preset:hover{border-color:#8a5a26!important}
.pattern-library .pattern-preset.selected{border-color:var(--gold)!important;background:linear-gradient(180deg,#7d1b2044,#0d080766)!important}
.pattern-library .pattern-preset .sword-icon{width:30px;height:60px}
.pattern-library .pattern-preset small{display:block;font:400 12px var(--tt-ui);color:var(--muted)}
.pattern-library .pattern-preset.selected small{color:var(--gold)}
.library-heading{display:flex;justify-content:space-between;align-items:baseline}.library-heading span{font:600 18px var(--tt-ui);color:var(--gold)}
#new-pattern:not(#_){align-self:flex-start;margin:4px 0 10px;font-size:18px}
.pattern-library{display:flex;flex-direction:column}
.editor-heading .sword-icon{width:44px;height:88px}
.pattern-editor{gap:4px!important}
.pattern-editor button{aspect-ratio:1;min-height:0}
.editor-actions,.editor-tools{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:8px}
.pattern-row-labels{font:400 12px var(--tt-ui);color:#d8c49c}
.work-grid{grid-template-columns:240px minmax(0,auto) 260px!important;justify-content:center;gap:26px!important}
.work-table{display:flex;flex-direction:column;align-items:center}
.editor-board{background:#14151b;gap:2px!important;padding:4px;width:min(300px,calc((100dvh - 330px)*6/13))!important}
.editor-cell{border-radius:0!important;box-shadow:inset 0 0 0 1px #ffffff08!important}
.editor-cell:hover{box-shadow:inset 0 0 0 2px var(--gold)!important}
.work-grid .palette{display:flex;gap:8px;flex-wrap:wrap}
.work-grid .palette button{width:38px;height:38px}
label[for=rogue-seed],#rogue-seed,.rogue-setup>p.muted{display:none!important}
.rogue-setup h2{font-size:34px!important;text-shadow:0 3px 0 var(--crimson),var(--px-outline)!important}
.pattern-meta .im-cycler{min-width:0}
.pattern-meta{grid-template-columns:minmax(0,1fr) 110px!important;gap:14px!important}
.editor-board{width:calc((100dvh - 330px)/3.25)!important;min-width:150px;max-width:300px!important}
.swatch{background-size:contain!important;background-position:center!important;background-color:transparent!important}

/* ---------- Adventure: icons on rewards and encounter choices ---------- */
.rogue-rewards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.rogue-rewards button:not(#_){position:relative;display:grid;grid-template-columns:64px 1fr;grid-auto-rows:auto;column-gap:14px;row-gap:4px;align-items:start;text-align:left;
  padding:14px!important;border:2px solid #5a391b!important;background:#120b08d9!important;box-shadow:0 0 0 2px #0d0807}
.rogue-rewards button:not(#_):hover{border-color:var(--gold)!important;background:linear-gradient(180deg,#7d1b2033,#120b08e6)!important}
.rogue-rewards button:not(#_)::before{content:"";grid-row:1/span 4;width:64px;height:64px;position:static;margin:0;transform:none!important;border:0;box-shadow:none;
  background:#0d0807 url(icons/duel.png) center/56px 56px no-repeat;image-rendering:pixelated;outline:2px solid #3a2612}
.rogue-rewards button:not(#_)::after{display:none}
.rogue-rewards button>*{grid-column:2}
.rogue-rewards strong{font:600 18px var(--tt-ui);color:var(--gold)}
.rogue-rewards span,.rogue-rewards small{font-family:var(--tt-ui)}
[data-rogue-reward="clear-value"]::before{background-image:url(icons/clear-value.png)!important}
[data-rogue-reward="chain-value"]::before{background-image:url(icons/chain-value.png)!important}
[data-rogue-reward="breaker-supply"]::before{background-image:url(icons/breaker-supply.png)!important}
[data-rogue-reward="breathing-room"]::before{background-image:url(icons/breathing-room.png)!important}
[data-rogue-reward="extra-sprinkles"]::before{background-image:url(icons/extra-sprinkles.png)!important}
[data-rogue-reward="taller-swords"]::before{background-image:url(icons/taller-swords.png)!important}
[data-rogue-reward="bank-points"]::before{background-image:url(icons/bank-points.png)!important}
[data-climb-path$="-duel"]::before{background-image:url(icons/duel.png)!important}
[data-climb-path$="-precision"]::before{background-image:url(icons/precision.png)!important}
[data-climb-path$="-clear-sprint"]::before{background-image:url(icons/clear-sprint.png)!important}
[data-climb-path$="-chain-route"]::before{background-image:url(icons/chain-route.png)!important}
[data-climb-path$="-hold"]::before{background-image:url(icons/hold.png)!important}
[data-climb-path$="-premium"]::before{background-image:url(icons/premium.png)!important}
[data-climb-path$="-checkpoint"]::before{background-image:url(icons/checkpoint.png)!important}
body:has(#modal[open]) .game-overlay .pause-card{visibility:hidden}
svg.sword-icon[data-px]{filter:drop-shadow(0 2px 0 #0009)}
.pm-random.small{font-size:54px;line-height:1.1;display:block}

/* ---------- Adventure: biomes, trail, kit ---------- */
body[data-scene=adv]{background:#0d0a10 var(--adv-bg) center 60%/cover fixed no-repeat;image-rendering:pixelated}
body[data-scene=adv]::before{background:radial-gradient(ellipse 60% 70% at 50% 52%,rgba(8,6,10,.5),rgba(8,6,10,.2) 70%,rgba(8,6,10,.6))}
body[data-scene=adv] .eyebrow{color:var(--adv-acc,var(--gold))}
.adv-trail{margin:-4px auto 18px;max-width:1100px;overflow:hidden}
.adv-trail ol{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:6px 0;justify-content:center}
.adv-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:64px}
.adv-node::before{content:"";position:absolute;top:12px;left:-32px;width:64px;height:4px;background:repeating-linear-gradient(90deg,#d8c49c 0 6px,transparent 6px 10px);opacity:.5}
.adv-node:first-child::before,.adv-border+.adv-node::before{display:none}
.adv-node i{position:relative;z-index:1;width:16px;height:16px;transform:rotate(45deg);background:#1a120c;border:2px solid #6e4419;box-shadow:0 0 0 2px #0d0807}
.adv-node b{font:600 13px var(--tt-ui);color:#bfae93;text-shadow:var(--px-o1)}
.adv-node.done i{background:var(--acc);border-color:#0d0807;opacity:.75}
.adv-node.done::before{opacity:1;background:var(--acc)}
.adv-node.here i{width:22px;height:22px;background:var(--crimson);border-color:var(--gold);animation:adv-pulse 1.2s steps(4) infinite alternate}
.adv-node.here b{color:var(--gold);font-size:15px}
.adv-node.bonus i{border-color:var(--gold)}
.adv-node.bonus::after{content:"";position:absolute;top:-14px;left:50%;margin-left:-6px;width:12px;height:12px;background:url(icons/checkpoint.png) center/contain no-repeat;image-rendering:pixelated}
@keyframes adv-pulse{to{box-shadow:0 0 0 2px #0d0807,0 0 14px 2px #f0cf7a88}}
.adv-border{display:flex;align-items:center;padding:0 6px}
.adv-border span{font:600 11px var(--tt-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);text-shadow:var(--px-o1);border-left:2px solid var(--acc);border-right:2px solid var(--acc);padding:2px 8px;white-space:nowrap}
.adv-layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:24px!important;max-width:1180px;margin:0 auto}
.adv-layout>.table-surface{padding:0!important;text-shadow:var(--px-o1)}
.adv-layout #rogue-stage>h2{font-size:30px!important;text-shadow:0 3px 0 var(--crimson),var(--px-outline)!important}
.adv-kit{display:grid;gap:8px}
.adv-kit-item{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.adv-kit-item img{grid-row:span 2;width:40px;height:40px;image-rendering:pixelated;background:#0d0807;outline:2px solid #3a2612}
.adv-kit-item span{font:600 14px var(--tt-ui);color:var(--parchment)}
.adv-kit-empty{font:400 14px var(--tt-ui);color:#d8c49c}
.adv-pips{display:flex;gap:4px;font-style:normal}
.adv-pips i{width:8px;height:8px;transform:rotate(45deg);background:#1a120c;border:1px solid #6e4419}
.adv-pips i.on{background:var(--gold);border-color:#0d0807}
.adv-pips i.new{background:var(--crimson-lit);border-color:var(--gold);animation:adv-pulse 1s steps(3) infinite alternate}
.adv-pips.danger i.on{background:#e04a3a}
.rogue-rewards .adv-pips{grid-column:2;margin-top:4px}
.adv-emblem{float:right;margin:0 0 8px 14px;padding:8px;background:#0d0807aa;outline:2px solid #6e4419}
.adv-emblem img{display:block;width:96px;height:96px;image-rendering:pixelated}
.adv-final{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.adv-final small{font:600 12px var(--tt-ui);letter-spacing:.2em;color:var(--gold)}
.adv-final b{font:700 64px/1 var(--tt-ui);color:var(--parchment);text-shadow:0 4px 0 var(--crimson),var(--px-outline)}
.adv-final span{font:600 18px var(--tt-ui);color:var(--adv-acc,var(--gold))}
.adv-biomes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%;margin:0 0 16px}
.adv-biomes figure{margin:0;position:relative;aspect-ratio:16/10;background:#0d0807 var(--bg) center/cover;image-rendering:pixelated;outline:2px solid #3a2612;display:flex;flex-direction:column;justify-content:flex-end;padding:4px}
.adv-biomes figure.unseen{filter:grayscale(1) brightness(.35)}
.adv-biomes figure.seen{outline-color:var(--acc)}
.adv-biomes figcaption{font:600 11px var(--tt-ui);color:var(--parchment);text-shadow:var(--px-outline)}
.adv-biomes small{font:400 10px var(--tt-ui);color:#d8c49c;text-shadow:var(--px-o1)}
@media(max-width:900px){.adv-layout{grid-template-columns:1fr!important}.adv-biomes{grid-template-columns:repeat(3,1fr)}.adv-node{width:44px}.adv-node::before{left:-22px;width:44px}}

/* rival's blades: several can be picked; each duel draws one */
.their-picker .any-choice .pm-random{font-size:40px}
.their-picker .sword-choice{position:relative}
.their-picker .sword-choice.selected::after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;background:var(--crimson);border:2px solid var(--gold);transform:rotate(45deg);box-shadow:0 0 0 2px var(--tt-ink)}
.picker-actions{justify-content:center;margin-top:14px;gap:4px 24px}
.pm-stack:not(#_){position:relative;width:200px}
.pm-stack>span{position:absolute;left:50%;top:6px;transform:translateX(calc(-50% + (var(--k) - 2) * 30px)) rotate(calc((var(--k) - 2) * 9deg));transform-origin:50% 90%}
.pm-stack .sword-icon{width:84px!important;height:168px!important}
.pm-many .pm-note{max-width:280px;line-height:1.5}

/* relic codex */
.adv-codex{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(ellipse 70% 70% at 50% 46%,#0b0610d8,#0b0610f6);animation:im-fade .2s steps(3) both}
.adv-codex-inner{width:min(1040px,94vw);max-height:88vh;display:flex;flex-direction:column;padding:22px 24px;background:linear-gradient(180deg,#1c120cf2,#120b08f6);border:2px solid #5a391b;box-shadow:0 0 0 2px #0d0807,0 24px 60px #000c}
.adv-codex header{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:12px}.adv-codex header .eyebrow{grid-column:1/-1}
.adv-codex h2{margin:0;font:600 30px var(--tt-ui);color:var(--parchment);text-shadow:0 3px 0 var(--crimson),var(--px-outline)}
.adv-codex-grid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;scrollbar-width:thin;scrollbar-color:#6e4419 transparent}
.relic{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px;border:2px solid #3a2612;background:#0d080788}
.relic img{width:64px;height:64px;image-rendering:pixelated;background:#0d0807;outline:2px solid #3a2612}
.relic small{font:600 11px var(--tt-ui);letter-spacing:.18em;text-transform:uppercase;color:#a8967a}
.relic h3{margin:2px 0 4px;font:600 18px var(--tt-ui);color:var(--parchment)}
.relic p{margin:0;font:400 13px/1.4 var(--tt-ui);color:#d8c49c}.relic em{display:block;margin-top:6px;font:400 13px var(--tt-ui);color:#bfae93;font-style:italic}
.relic.unknown img{filter:brightness(0) drop-shadow(0 0 0 #6e4419)}.relic.unknown h3{color:#7a6a58}
.relic[data-rarity=rare]{border-color:#2a6ad4aa}.relic[data-rarity=rare] small{color:#7ab8ff}
.relic[data-rarity=legendary]{border-color:#e8b84a;background:linear-gradient(180deg,#3a2a0a66,#0d080788)}.relic[data-rarity=legendary] small{color:#ffd75e}

/* relic reward cards: rarity frames and flavour */
.rogue-rewards [data-rarity]{position:relative}
.relic-tag{position:absolute;top:8px;right:10px;font:600 10px var(--tt-ui);letter-spacing:.18em;text-transform:uppercase;color:#a8967a}
.relic-flavor{display:block;font:400 13px var(--tt-ui);font-style:italic;color:#bfae93;margin:2px 0}
.rogue-rewards [data-rarity=rare]:not(#_){border-color:#2a6ad4!important}.rogue-rewards [data-rarity=rare] .relic-tag{color:#7ab8ff}
.rogue-rewards [data-rarity=legendary]:not(#_){border-color:#e8b84a!important;background:linear-gradient(180deg,#5a3a0a55,#120b08e6)!important;box-shadow:0 0 0 2px #0d0807,0 0 24px #ffd75e33!important}
.rogue-rewards [data-rarity=legendary] .relic-tag{color:#ffd75e}.rogue-rewards [data-rarity=legendary] strong{color:#ffe9a0}
[data-rogue-reward="miners-tithe"]::before{background-image:url(icons/miners-tithe.png)!important}
[data-rogue-reward="ward-charm"]::before{background-image:url(icons/ward-charm.png)!important}
[data-rogue-reward="broad-edge"]::before{background-image:url(icons/broad-edge.png)!important}
[data-rogue-reward="second-wind"]::before{background-image:url(icons/second-wind.png)!important}
[data-rogue-reward="blood-pact"]::before{background-image:url(icons/blood-pact.png)!important}
[data-rogue-reward="echo-crown"]::before{background-image:url(icons/echo-crown.png)!important}

/* encounter banner (Adventure, Free-for-All) */
.adv-banner{position:fixed;left:50%;top:24vh;z-index:45;transform:translateX(-50%);text-align:center;pointer-events:none;padding:14px 60px;
  background:linear-gradient(90deg,transparent,#0b0610e6 18%,#0b0610e6 82%,transparent);border-top:2px solid var(--acc,var(--gold));border-bottom:2px solid var(--acc,var(--gold));animation:adv-ban 2.3s steps(12) both}
.adv-banner small{display:block;font:600 13px var(--tt-ui);letter-spacing:.3em;color:var(--acc,var(--gold))}
.adv-banner strong{display:block;font:700 44px/1.1 var(--tt-ui);color:var(--parchment);text-shadow:0 4px 0 var(--crimson),var(--px-outline)}
.adv-banner span{display:block;font:400 16px var(--tt-ui);color:#d8c49c;text-transform:capitalize}
@keyframes adv-ban{0%{opacity:0;clip-path:inset(0 50%)}12%{opacity:1;clip-path:inset(0 0)}82%{opacity:1}100%{opacity:0}}

/* the end of the road */
#rogue-stage.adv-ending{background:linear-gradient(180deg,#0b0610aa,#0b0610ee),var(--end-bg) center/cover;image-rendering:pixelated;padding:28px!important;text-align:center}
.adv-end{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}
.adv-end-eyebrow{font:600 16px var(--tt-ui);letter-spacing:.32em;color:var(--adv-acc,var(--gold));text-shadow:var(--px-outline);margin:0 0 6px}
.adv-end-depth{display:flex;align-items:baseline;gap:14px}
.adv-end-depth small{font:600 13px var(--tt-ui);letter-spacing:.2em;color:#d8c49c;text-transform:uppercase}
.adv-end-depth b{font:700 96px/1 var(--tt-ui);color:#ffe9b0;text-shadow:0 5px 0 var(--crimson),var(--px-outline),0 8px 0 var(--tt-ink)}
.adv-end-depth span{font:600 22px var(--tt-ui);color:var(--adv-acc,var(--gold));text-shadow:var(--px-o1)}
.adv-end-stats{display:flex;gap:28px;margin:10px 0}.adv-end-stats dt{font:400 12px var(--tt-ui);color:#d8c49c}.adv-end-stats dd{margin:0;font:600 26px var(--tt-ui);color:var(--parchment);text-shadow:var(--px-o1)}
.adv-end-kit small{display:block;font:600 11px var(--tt-ui);letter-spacing:.2em;color:#d8c49c;text-transform:uppercase;margin-bottom:6px}
.adv-end-kit div{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.adv-end-kit img{width:48px;height:48px;image-rendering:pixelated;background:#0d0807;outline:2px solid #5a391b}
.adv-end.won .adv-end-depth b{color:#fff3c8;text-shadow:0 5px 0 #a0701a,var(--px-outline),0 0 30px #ffd75e88}

/* =================== duel intro =================== */
.cine-intro{position:fixed;inset:0;z-index:55;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,#2a0e12f0,#0b0610fa);animation:im-fade .2s ease-out both;contain:strict}
.cine-intro.out{animation:cine-out .35s ease-in both}
@keyframes cine-out{to{opacity:0}}
.cine-eyebrow{position:absolute;top:18vh;left:0;right:0;text-align:center;font:600 18px var(--tt-ui);letter-spacing:.4em;color:var(--gold);text-shadow:var(--px-outline)}
.cine-side{display:flex;flex-direction:column;align-items:center;gap:6px}
.cine-side{will-change:transform}.cine-side.l{animation:cine-l .45s cubic-bezier(.2,.9,.3,1) both}.cine-side.r{animation:cine-r .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes cine-l{from{transform:translateX(-40vw)}}@keyframes cine-r{from{transform:translateX(40vw)}}
.cine-art .sword-icon{width:120px;height:240px;filter:drop-shadow(0 6px 0 #000a)}
.cine-side strong{font:700 40px var(--tt-ui);color:var(--parchment);text-shadow:0 4px 0 var(--crimson),var(--px-outline)}
.cine-side small{font:400 16px var(--tt-ui);color:#d8c49c}
.cine-vs{font:700 120px/1 var(--tt-ui);color:var(--gold);text-shadow:0 6px 0 var(--crimson),var(--px-outline),0 10px 0 var(--tt-ink);animation:cine-vs .4s cubic-bezier(.3,1.4,.5,1) .45s both;will-change:transform,opacity}
@keyframes cine-vs{from{transform:scale(3);opacity:0}to{transform:none;opacity:1}}
.cine-fight{position:absolute;bottom:16vh;left:0;right:0;text-align:center;font:700 64px var(--tt-ui);letter-spacing:.2em;color:#fff3c8;text-shadow:0 4px 0 var(--crimson),var(--px-outline);animation:cine-f .3s ease-out 1.05s both;will-change:transform,opacity}
@keyframes cine-f{from{opacity:0;transform:scale(1.6)}to{opacity:1}}

/* =================== endgame screens =================== */
.pause-card.endgame,.challenge-result-card.endgame{min-width:min(620px,92vw)}
.eg-banner{position:relative;width:min(640px,92vw);margin:0 0 12px;padding:10px 0;text-align:center;background:linear-gradient(90deg,transparent,#7d1b20 15%,#a32a2a 50%,#7d1b20 85%,transparent);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);animation:eg-in .5s steps(6) both}
.eg-banner span{font:700 clamp(40px,8vmin,84px)/1 var(--tt-ui);letter-spacing:.12em;color:#fff3c8;text-shadow:0 5px 0 #3a0a0e,var(--px-outline)}
.endgame.loss .eg-banner{background:linear-gradient(90deg,transparent,#2a2230 15%,#3a3040 50%,#2a2230 85%,transparent);border-color:#8a7a9a}.endgame.loss .eg-banner span{color:#d8d0e0}
.endgame.draw .eg-banner{background:linear-gradient(90deg,transparent,#3a2a14 15%,#5a4020 50%,#3a2a14 85%,transparent)}
@keyframes eg-in{from{opacity:0;clip-path:inset(0 50%)}to{opacity:1;clip-path:inset(0 0)}}
.eg-blade .sword-icon{width:70px;height:140px;filter:drop-shadow(0 4px 0 #000a)}
.endgame.loss .eg-blade{transform:rotate(-24deg);opacity:.8}
.eg-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:4px 0 14px}
.eg-stats div{display:flex;flex-direction:column;align-items:center}
.eg-stats dt{font:400 13px var(--tt-ui);color:#d8c49c;text-shadow:var(--px-o1)}.eg-stats dd{margin:0;font:600 28px var(--tt-ui);color:var(--parchment);text-shadow:var(--px-outline)}
.eg-actions{display:flex;flex-direction:column;align-items:center}

/* ---------- free-for-all: everything on one screen, no wordy stage readout ---------- */
.challenge-hud{background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807;padding:8px 14px!important;border-radius:0!important}
.challenge-hud span{font:600 10px var(--tt-ui)!important;letter-spacing:.16em;color:var(--gold)}
.challenge-hud strong{font:600 26px var(--tt-ui)!important;color:var(--parchment);text-shadow:var(--px-o1);font-variant-numeric:tabular-nums}
.challenge-stage-caption{font:600 12px var(--tt-ui)!important;letter-spacing:.08em;color:var(--gold)!important;text-shadow:var(--px-o1);margin:8px 0 10px!important}
.challenge-run-details span:has(>b:not([id])){display:none}                      /* the seed */
.progression-live p{display:none}
.progression-live strong{font:600 14px var(--tt-ui);color:var(--gold)}
.challenge-arena:has(.challenge-opponents) .challenge-sidebar>.panel{padding:0 0 6px!important}
.challenge-arena:has(.challenge-opponents) .challenge-rank{padding:4px 0!important}
.challenge-arena:has(.challenge-opponents) .challenge-sidebar>.panel>.divider{margin:6px 0!important}
.challenge-arena:has(.challenge-opponents) .challenge-sidebar>.panel,
.challenge-arena:has(.challenge-opponents) .challenge-hud{background:linear-gradient(180deg,#140c0ce6,#0d0807d9)!important;border:2px solid #4a2f16!important;box-shadow:0 0 0 2px #0d0807!important}
.challenge-arena:has(.challenge-opponents) .challenge-sidebar>.panel{padding:10px 16px!important}
@media(min-width:1000px){
  /* three columns: readouts | your board | the rivals, all at full height */
  .challenge-arena:has(.challenge-opponents){display:grid!important;grid-template-columns:minmax(220px,300px) auto auto!important;grid-template-rows:auto auto 1fr;gap:14px 36px!important;justify-content:center;align-items:start;max-width:none!important}
  .challenge-arena:has(.challenge-opponents)>.challenge-main,.challenge-arena:has(.challenge-opponents)>.challenge-sidebar{display:contents}
  .challenge-arena:has(.challenge-opponents) .challenge-hud{grid-column:1;grid-row:1;display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0!important}
  .challenge-arena:has(.challenge-opponents) .challenge-sidebar>.panel{grid-column:1;grid-row:2;margin:0!important}
  .challenge-arena:has(.challenge-opponents) .challenge-stage-caption{grid-column:1;grid-row:3;text-align:left!important;margin:0!important}
  .challenge-arena:has(.challenge-opponents) .challenge-playfield{grid-column:2;grid-row:1/span 3;margin:0!important;width:auto!important}
  .challenge-arena:has(.challenge-opponents) .challenge-opponents{grid-column:3;grid-row:1/span 3;margin:0!important;display:flex!important;gap:18px;max-width:none!important;width:auto!important}
  .challenge-arena:has(.challenge-opponents) .challenge-feedback,.challenge-arena:has(.challenge-opponents) .challenge-touch{display:none!important}
  .challenge-arena:has(.challenge-opponents) .challenge-board:not(.mini){width:clamp(150px,calc((100dvh - 345px)*.34),250px)!important}
  .challenge-board.mini{width:clamp(96px,calc((100dvh - 300px)*.27),200px)!important;min-width:0!important}
  .challenge-arena:has(.challenge-opponents) .progression-live,.challenge-arena:has(.challenge-opponents) #challenge-standings+.progression-live~.divider{display:none!important}
}

/* ---------- adventure: the encounter brief is a card, emblem on top, one line of rules ---------- */
#rogue-stage:has(#rogue-start){max-width:520px;margin:24px auto 0;padding:22px 30px 26px!important;text-align:center;
  background:linear-gradient(180deg,#140c0ce6,#0d0807e0)!important;border:2px solid #4a2f16!important;box-shadow:0 0 0 2px #0d0807,0 10px 30px #0008!important}
#rogue-stage:has(#rogue-start) .adv-emblem{float:none;display:inline-block;margin:0 0 6px;background:none;outline:0;padding:0}
#rogue-stage:has(#rogue-start) .adv-emblem img{width:72px;height:72px}
#rogue-stage:has(#rogue-start) .eyebrow{justify-content:center}
#rogue-stage:has(#rogue-start)>h2{margin:2px 0 10px!important}
#rogue-stage:has(#rogue-start)>h2+.muted{display:none}
#rogue-stage:has(#rogue-start)>p:not(.muted):not(.eyebrow):not(.fine-print){display:inline-block;margin:0 0 10px;padding:3px 12px;font:600 15px var(--tt-ui);color:var(--gold);border:1px solid #6e4419;background:#0d080799}
#rogue-stage:has(#rogue-start)>p.muted{font:400 13px/1.45 var(--tt-ui);color:#d8c49c;margin:0 0 16px}
#rogue-stage:has(#rogue-start) #rogue-start:not(#_){margin:0 auto}

/* ---------- prematch: blade colours sit under your blade; tall patterns shrink to fit ---------- */
.pm-side .enamel-controls:not(#_){display:flex;justify-content:center;gap:16px;margin:-4px auto 10px}
.pm-side .enamel-controls .field-label{align-items:center;font:600 10px var(--tt-ui);letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;color:var(--gold)}
.pm-side .enamel-controls .im-cycler{min-width:0;width:148px}
.pm-side .enamel-controls .im-cyc-val{font-size:15px}
.pm-side{--pm-h:calc(100dvh - 530px)}
.pm-side:has(.enamel-controls){--pm-h:calc(100dvh - 590px)}
.pm-side .pattern-preview{width:clamp(110px,var(--pm-h),210px)}                                   /* cells are 2:3, so 4 rows are as tall as wide */
.pm-side .pattern-preview:has(.pattern-cell:nth-child(25)){width:clamp(100px,calc(var(--pm-h)*.8),210px)}
.pm-side .pattern-preview:has(.pattern-cell:nth-child(31)){width:clamp(96px,calc(var(--pm-h)*.667),210px)}
.pm-side .pattern-preview:has(.pattern-cell:nth-child(37)){width:clamp(90px,calc(var(--pm-h)*.57),210px)}

/* dialogs are solid: nothing behind them (the title menu, a board) reads through the panel */
#modal{background-color:#140c0a!important;background-clip:padding-box!important}
/* the old address's one-time card: the game has moved, bring your saves */
.move-card{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;text-align:center;background:#0d0807f4;color:var(--parchment)}
.move-card>div{max-width:min(640px,100%)}
.move-card .eyebrow{justify-content:center;letter-spacing:.3em}
.move-card h2{font:600 clamp(30px,5.6vmin,54px)/1.05 var(--tt-ui);text-shadow:0 4px 0 var(--crimson),var(--px-outline);margin:0 0 12px}
.move-card .muted{color:var(--parchment);margin:0 0 18px}
/* short confirms are text on the dimmed game, no panel, like the other asks */
#modal.im-plain{background-color:transparent!important}
#modal.im-plain::backdrop{background:radial-gradient(ellipse 60% 62% at 50% 50%,#0d0807d0,#0d0807f4)}

/* phones: compact readouts so the touch controls stay on screen without scrolling */
@media(max-width:640px){
  .challenge-hud{padding:5px 10px!important;gap:6px!important}
  .challenge-hud span{font-size:8px!important;letter-spacing:.12em}
  .challenge-hud strong{font-size:17px!important;line-height:1.1!important;white-space:nowrap}
  .adv-layout .adv-trail{margin-bottom:4px}
  .challenge-arena:has(.challenge-opponents) .challenge-stage-caption,#challenge-feedback{display:none!important}
  .challenge-touch{position:sticky;bottom:6px;z-index:5}
}

/* adventure fights: boards use the room the readout strip freed up */
@media(min-width:1000px){.rogue-playfield .challenge-board{width:clamp(100px,calc((100dvh - 420px)*.37),240px)!important;min-width:0!important}.rogue-playfield.duel{gap:40px}}

/* =================== Online: lobby, rooms, matches =================== */
.ol-lobby{max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;text-shadow:var(--px-o1)}
.ol-modes{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.ol-you{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:10px 20px;min-width:min(520px,92vw);
  background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807}
.ol-blade{display:block;width:30px}.ol-blade .sword-icon{width:30px;height:60px;display:block}
.ol-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.ol-you small,.ol-code small{font:600 10px var(--tt-ui);letter-spacing:.16em;color:var(--gold)}
.ol-name input,.ol-join input{font:600 20px var(--tt-ui)!important;color:var(--parchment)!important;background:#0d0807cc!important;border:2px solid #4a2f16!important;border-radius:0!important;padding:6px 10px!important;width:220px;max-width:100%}
.ol-name input:focus,.ol-join input:focus{outline:none;border-color:var(--gold)!important}
.ol-blade-name{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.ol-blade-name strong{font:600 17px var(--tt-ui);color:var(--parchment)}
.ol-menu{display:flex;flex-direction:column;align-items:center;gap:8px}
#ol-quick:not(#_){font-size:clamp(28px,4.4vmin,44px)!important}
.ol-join{display:flex;align-items:center;gap:12px;justify-content:center}
.ol-join input{width:120px;text-align:center;letter-spacing:.3em;text-transform:uppercase}
.ol-notice{min-height:1.2em;margin:0;font:400 15px var(--tt-ui);color:#ffcf8a}
.ol-record{margin:0;font:400 14px var(--tt-ui);color:#d8c49c}.ol-record b{color:var(--gold)}
.ol-net{margin:0;font:400 13px var(--tt-ui);color:#cdb894;display:flex;align-items:center;gap:8px;justify-content:center}
.ol-dot{width:9px;height:9px;display:inline-block;transform:rotate(45deg);box-shadow:0 0 0 2px #0d0807}
.ol-dot.on{background:#7ad36a}.ol-dot.wait{background:#e3b14a;animation:ol-blink 1s steps(2) infinite}.ol-dot.off{background:#c24a3a}
@keyframes ol-blink{50%{opacity:.3}}
.ol-wait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}
.ol-big{margin:0;font:600 clamp(24px,3.6vmin,36px) var(--tt-ui);color:var(--parchment);text-shadow:0 3px 0 var(--crimson),var(--px-outline)}
.ol-spinner{width:22px;height:22px;background:var(--crimson);border:3px solid var(--gold);box-shadow:0 0 0 3px #0d0807;animation:ol-spin 1.2s steps(8) infinite}
@keyframes ol-spin{to{transform:rotate(360deg)}}
.ol-room{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.ol-code{display:flex;align-items:center;gap:14px}.ol-code strong{font:700 clamp(40px,7vmin,64px)/1 var(--tt-ui);letter-spacing:.18em;color:var(--gold);text-shadow:0 4px 0 var(--crimson),var(--px-outline)}
.ol-players{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:min(520px,100%)}
.ol-players li:has(.ol-kick){grid-template-columns:30px 1fr auto auto}
.ol-players li{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;padding:8px 16px;text-align:left;background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807}
.ol-players li.ready{border-color:#6f8f3a}.ol-players li.away{opacity:.55}.ol-players li.empty{border-style:dashed;opacity:.6}
.ol-players strong{font:600 18px var(--tt-ui);color:var(--parchment)}.ol-players em{font:400 12px var(--tt-ui);color:var(--gold);font-style:normal;margin-left:6px}
.ol-players small{display:block;font:400 12px var(--tt-ui);color:#cdb894}.ol-players b{font:600 13px var(--tt-ui);letter-spacing:.1em;text-transform:uppercase;color:#cdb894}
.ol-players li.ready b{color:#a6d36a}
/* match */
.ol-rival{cursor:pointer;position:relative}
.ol-rival .board-frame{position:relative}
.ol-aim{display:none;position:absolute;top:6px;left:50%;transform:translateX(-50%);font:600 10px var(--tt-ui);font-style:normal;letter-spacing:.2em;color:#1a0e08;background:var(--gold);padding:1px 6px;box-shadow:0 0 0 2px #0d0807;z-index:2}
.ol-ffa .ol-rival.is-target .ol-aim{display:block}
.ol-ffa .ol-rival.is-target .board-frame{outline:3px solid var(--gold);outline-offset:2px}
.ol-rival.eliminated{opacity:.45;filter:grayscale(.8)}
.ol-rival.ol-away{opacity:.7}
.challenge-rank.out{opacity:.5}
.ol-lost h2{font-size:28px!important}
.ol-duel .challenge-board.ol-rival{width:clamp(150px,calc((100dvh - 345px)*.34),250px)!important}
.ol-placements{list-style:none;margin:6px auto 10px;padding:0;display:grid;gap:4px;min-width:260px}
.ol-placements li{display:grid;grid-template-columns:48px 1fr;gap:10px;font:600 18px var(--tt-ui);color:var(--parchment);text-align:left}
.ol-placements li span{color:var(--gold)}.ol-placements li.you{color:var(--gold)}
@media(max-width:640px){.ol-you{grid-template-columns:auto 1fr;}.ol-blade-name{grid-column:1/-1;align-items:center;text-align:center}.ol-modes{gap:10px}}

/* ---------- adventure: one compact band up top (title · trail · tools), boards higher ---------- */
body[data-scene=adv] .game-heading{display:flex!important;align-items:center;gap:18px;margin-bottom:8px!important;min-height:0}
body[data-scene=adv] .game-heading>div:first-child{flex:none}
body[data-scene=adv] .game-heading h1{font-size:26px!important;margin:0!important}
body[data-scene=adv] .game-heading .match-tools{flex:none;margin-left:0}
.game-heading .adv-trail{flex:1;min-width:0;margin:0!important;max-width:none}
.adv-trail ol{width:fit-content;margin:0 auto!important;padding:5px 14px!important;background:linear-gradient(180deg,#140c0cd9,#0d0807cc);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807}
.adv-layout .challenge-hud{padding:4px 14px!important;margin-bottom:6px!important}
.adv-layout .challenge-hud strong{font-size:20px!important}
.adv-layout .challenge-hud span{font-size:9px!important}
.adv-pips.danger{align-items:center}
.adv-pips.danger b{font:600 10px var(--tt-ui);letter-spacing:.14em;text-transform:uppercase;color:#d8a08a;margin-right:4px;font-style:normal}
.adv-kit-item span small{display:block;font:400 12px var(--tt-ui);color:#d8c49c;margin-top:1px}
.adv-bonus-banner{top:30vh;background:radial-gradient(ellipse at center,#f0cf7a33,transparent 70%)}
.adv-bonus-banner strong{font-size:56px!important;color:#ffe9b0!important;animation:adv-bonus-pop .5s steps(5) both,adv-pulse 1s steps(3) .5s infinite alternate}
@keyframes adv-bonus-pop{0%{transform:scale(1.8);opacity:0}100%{transform:scale(1);opacity:1}}
@media(max-width:900px){body[data-scene=adv] .game-heading{flex-wrap:wrap}.game-heading .adv-trail{order:3;flex-basis:100%}}

.rogue-rewards em.adv-pips{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;width:auto!important;justify-self:start}

/* setup: rarely-used run tools tucked under a "More" dropdown */
.rogue-setup-tools{align-items:center}
.rogue-more{position:relative}
.rogue-more>summary{list-style:none;cursor:pointer;font:inherit;font-size:18px;color:#d9cdb6;padding:6px 12px;border:1px solid rgba(201,162,92,.45);border-radius:4px;background:rgba(20,14,12,.55);user-select:none}
.rogue-more>summary::-webkit-details-marker{display:none}
.rogue-more>summary::after{content:"";display:inline-block;margin-left:10px;width:7px;height:7px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.rogue-more[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.rogue-more>summary:hover,.rogue-more[open]>summary{color:var(--gold);border-color:var(--gold)}
.rogue-more-menu{position:absolute;z-index:20;top:calc(100% + 6px);right:0;min-width:100%;display:flex;flex-direction:column;gap:2px;padding:6px;background:#1b1412;border:1px solid rgba(201,162,92,.6);border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.55)}
.rogue-more-menu button:not(#_){width:100%;white-space:nowrap;text-align:left;font-size:18px}

/* the version footer is gone */
.footer{display:none!important}
/* setup: the Map Room heading is gone, so the panel sits higher */
body[data-scene=solo] .rogue-setup{margin-top:clamp(8px,4vh,48px)}
.rogue-setup-tools{justify-content:center}
/* Adventure: the encounter banner sits over the heading, clear of both boards */
body[data-scene=adv] .adv-banner:not(.adv-bonus-banner){top:84px;padding:8px 48px;animation-duration:1.8s}
body[data-scene=adv] .adv-banner:not(.adv-bonus-banner) strong{font-size:32px}
/* the beat at the end of an encounter */
.rogue-outro{animation:im-fade .25s ease-out both}
.rogue-outro .eg-banner span{font-size:clamp(34px,6vmin,64px)}
.rogue-outro .eg-banner{width:min(520px,86vw)}
.rogue-outro button[disabled]{opacity:.45}
/* road log on the start screen */
.adv-log{margin:14px auto 6px;width:100%;max-width:560px;text-align:left;align-self:center}
.adv-log h3{font:600 13px var(--tt-ui);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);text-align:center;margin:0 0 8px;text-shadow:var(--px-outline)}
.adv-log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.adv-log li{width:100%;box-sizing:border-box;display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px;padding:6px 10px;background:#0d0807b3;border:1px solid #5a391b;border-left:3px solid var(--acc,var(--gold))}
.adv-log li>b{font:700 26px/1 var(--tt-ui);color:#ffe9b0;text-align:center;text-shadow:0 2px 0 var(--crimson);display:flex;flex-direction:column;align-items:center}.adv-log li>b small{font:400 9px var(--tt-ui);letter-spacing:.1em;color:#cdb894;text-shadow:none;margin-top:3px}
.adv-log li span{display:flex;flex-direction:column;min-width:0}
.adv-log li strong{font:600 15px var(--tt-ui);color:var(--parchment)}
.adv-log li small{font:400 12px var(--tt-ui);color:#cdb894}
.adv-log li em{font:600 16px var(--tt-ui);font-style:normal;color:var(--parchment);text-align:right;display:flex;flex-direction:column}
.adv-log li i{display:flex;gap:2px}.adv-log li img{width:22px;height:22px;image-rendering:pixelated}
@media (max-width:560px){.adv-log li{grid-template-columns:36px 1fr auto}.adv-log li i{display:none}}

/* Controls & feel: the test board shows the next pair */
.handling-head{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 4px}
.handling-head strong{font:600 13px var(--tt-ui);color:var(--parchment)}
.handling-preview .handling-head .next-piece canvas{width:20px;height:60px;grid-row:auto}
@media(max-width:600px){.handling-stage{grid-row:span 2;width:72px}.handling-head strong{display:none}.handling-preview .handling-head .next-piece canvas{width:16px;height:48px}}

/* your own next pair: a small well like the board's with a gilt edge, larger, sitting at the board's left shoulder where your eye already is.
   Opponents keep theirs in the header. Narrow screens keep it in the header, still boxed. */
#wrap-0 .next-piece:not(#_),#contestant-0 .next-piece:not(#_),#paired-player-0 .next-piece:not(#_),.online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_),.rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_){background:var(--well);border:2px solid var(--gold-mid);box-shadow:inset 0 0 0 1px #6e4419,0 0 0 1px #0d0807,0 3px 0 #000a;padding:5px 6px 7px;width:auto!important;display:flex!important;flex-direction:column;align-items:center;gap:4px}
#wrap-0 .next-piece:not(#_) span,#contestant-0 .next-piece:not(#_) span,#paired-player-0 .next-piece:not(#_) span,.online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_) span,.rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_) span{display:block!important;font-size:10px!important}
#wrap-0 .next-piece:not(#_) canvas,#contestant-0 .next-piece:not(#_) canvas,#paired-player-0 .next-piece:not(#_) canvas,.online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_) canvas,.rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_) canvas{width:32px!important;height:96px!important;margin:0!important}
@media (min-width:760px){
 #wrap-0 .board-header,#contestant-0 .board-header,#paired-player-0 .board-header,.online-arena .challenge-board:not(.ol-rival) .board-header,.rogue-playfield>.challenge-board:not(.rogue-opponent) .board-header{position:relative}
 #wrap-0 .next-piece:not(#_),#contestant-0 .next-piece:not(#_),#paired-player-0 .next-piece:not(#_),.online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_),.rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_){position:absolute;right:calc(100% + 14px);top:calc(100% + 10px);z-index:3}
 #wrap-0 .next-piece:not(#_) canvas,#contestant-0 .next-piece:not(#_) canvas,#paired-player-0 .next-piece:not(#_) canvas,.online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_) canvas,.rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_) canvas{width:44px!important;height:132px!important}
}
@media (min-width:760px){.zen-grid>.match-loadout:not(#_){margin-right:44px}}
/* phones, rival board mini/tiny/hidden: your board fills the height, its next pair at its left shoulder (as on wide screens) */
@media (max-width:759px){
 body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) :is(.match-grid .boards #wrap-0,.ol-duel .ol-mine):not(#_){width:min(calc(100vw - 150px),calc((100dvh - 230px)*4/13));max-width:none;min-width:0}
 body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) :is(.match-grid .boards #wrap-0,.ol-duel .ol-mine) .board-header{position:relative}
 body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) :is(.match-grid .boards #wrap-0,.ol-duel .ol-mine) .next-piece:not(#_){position:absolute;right:calc(100% + 8px);top:calc(100% + 8px);z-index:3;padding:4px 4px 6px}
 body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) :is(.match-grid .boards #wrap-0,.ol-duel .ol-mine) .next-piece:not(#_) canvas{width:24px!important;height:72px!important}
}

/* full clear: a small gold note over your board that rises and fades */
.fullclear-pop{position:fixed;z-index:40;transform:translate(-50%,-50%);pointer-events:none;font:700 22px var(--tt-ui);letter-spacing:.08em;color:#fff3c8;
  text-shadow:0 3px 0 #7a4a10,var(--px-outline),0 0 18px #ffd75e88;animation:fc-pop 1.8s ease-out both;white-space:nowrap}
@keyframes fc-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}22%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%)}}
@media (prefers-reduced-motion:reduce){.fullclear-pop{animation-duration:1.8s;animation-name:fc-fade}@keyframes fc-fade{0%,80%{opacity:1}100%{opacity:0}}}

/* Adventure: your blade grows with your relics */
.adv-blade{display:flex;align-items:center;gap:12px;margin:6px 0 10px;padding:8px 10px;background:#0d0807b3;border:1px solid #5a391b}
.adv-blade img{width:34px;height:auto;max-height:110px;image-rendering:pixelated;filter:drop-shadow(0 0 0 transparent)}
.adv-blade[data-tier="4"] img{filter:drop-shadow(0 0 6px #6ab8ff88)}.adv-blade[data-tier="5"] img{filter:drop-shadow(0 0 8px #ffd75eaa);animation:blade-pulse 2.4s ease-in-out infinite}
@keyframes blade-pulse{50%{filter:drop-shadow(0 0 14px #ffd75ecc)}}
.adv-blade div{display:flex;flex-direction:column;gap:2px;min-width:0}
.adv-blade small{font:600 10px var(--tt-ui);letter-spacing:.24em;color:var(--gold)}
.adv-blade strong{font:600 16px var(--tt-ui);color:var(--parchment)}
.adv-blade span{font:400 12px var(--tt-ui);color:#cdb894}
.adv-blade-banner{display:flex;align-items:center;gap:16px;text-align:left}
.adv-blade-banner img{height:96px;image-rendering:pixelated;filter:drop-shadow(0 0 10px #ffd75e99)}
.adv-end-blade{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px}
.adv-end-blade img{height:120px;image-rendering:pixelated;filter:drop-shadow(0 0 10px #ffd75e66)}
.adv-end-blade span{font:600 14px var(--tt-ui);color:var(--adv-acc,var(--gold));text-shadow:var(--px-o1)}

/* next pair size (Settings > Controls): medium is the default */
@media (min-width:760px){
 body #wrap-0 .next-piece:not(#_) canvas,body #contestant-0 .next-piece:not(#_) canvas,body #paired-player-0 .next-piece:not(#_) canvas,body .online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_) canvas,body .rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_) canvas{width:34px!important;height:102px!important}
 body[data-next-size=small] #wrap-0 .next-piece:not(#_) canvas,body[data-next-size=small] #contestant-0 .next-piece:not(#_) canvas,body[data-next-size=small] #paired-player-0 .next-piece:not(#_) canvas,body[data-next-size=small] .online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_) canvas,body[data-next-size=small] .rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_) canvas{width:26px!important;height:78px!important}
 body[data-next-size=large] #wrap-0 .next-piece:not(#_) canvas,body[data-next-size=large] #contestant-0 .next-piece:not(#_) canvas,body[data-next-size=large] #paired-player-0 .next-piece:not(#_) canvas,body[data-next-size=large] .online-arena .challenge-board:not(.ol-rival) .next-piece:not(#_) canvas,body[data-next-size=large] .rogue-playfield>.challenge-board:not(.rogue-opponent) .next-piece:not(#_) canvas{width:44px!important;height:132px!important}
}

/* Forge: patterns drawn with the game's tiles at their true 2:3 shape, not stretched squares */
.pattern-editor:not(#_){max-width:300px;margin-left:auto;margin-right:auto;gap:3px!important}
.pattern-editor button:not(#_){aspect-ratio:2/3!important;width:auto;height:auto}
.pattern-thumb:not(#_){display:grid!important;grid-template-columns:repeat(var(--cols,6),1fr);gap:1px;width:40px;flex:none;padding:3px;background:#0d0807;outline:1px solid #3a2612}
.pattern-thumb i:not(#_){display:block;width:auto;height:auto;aspect-ratio:2/3;background:center/100% 100% no-repeat;image-rendering:pixelated}
.pattern-preset:not(#_){display:flex!important;align-items:center;gap:10px;text-align:left}
.pattern-preset>span:not(.pattern-thumb){display:flex;flex-direction:column;min-width:0}
.editor-heading .pattern-thumb{width:58px}
.pattern-cat{margin:14px 0 6px;font:600 12px var(--tt-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pattern-cat span{margin-left:6px;color:#9f8a6c;letter-spacing:0}

/* =================== Freebuild (Solo sandbox) =================== */
.fb-grid{display:grid;grid-template-columns:minmax(220px,260px) auto minmax(230px,280px);gap:24px;justify-content:center;align-items:start;max-width:1100px;margin:0 auto}
.fb-box,.fb-result{display:flex;flex-direction:column;gap:8px}
.fb-colours{display:flex;gap:8px}
.fb-colour:not(#_){width:34px;height:51px;padding:0!important;border:0!important;background-color:transparent!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;image-rendering:pixelated;outline:2px solid transparent;outline-offset:2px;cursor:pointer}
.fb-colour.on:not(#_){outline-color:var(--gold)}
.fb-kinds{display:flex;flex-wrap:wrap;gap:4px}
.fb-kind:not(#_){font-size:15px!important;padding:2px 8px!important}
.fb-kind.on:not(#_){color:var(--gold)!important;text-decoration:underline;text-underline-offset:4px}
.fb-tools,.fb-actions{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center}
.fb-tools button:not(#_){font-size:15px!important}
.fb-setups{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.fb-setups button:not(#_),.fb-saved button:not(#_){font-size:15px!important;padding:1px 4px!important;text-align:left}
.fb-saved{display:flex;flex-direction:column;gap:2px;max-height:150px;overflow:auto}
.fb-saved>div{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fb-x:not(#_){color:#b0705a!important;padding:0 6px!important}
.fb-box .eyebrow span{margin-left:6px;color:#9f8a6c}
.fb-table{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 14px 12px!important}
.fb-lesson{margin:0;min-height:2.6em;max-width:300px;text-align:center;font:400 14px/1.35 var(--tt-ui);color:var(--parchment);text-shadow:var(--px-o1)}
.fb-frame{width:clamp(170px,calc((100dvh - 320px)*.3077),250px)}
.fb-frame canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:none}
.fb-total{margin:0 0 6px;font:400 15px var(--tt-ui);color:var(--parchment)}.fb-total b{color:var(--gold)}
.fb-strike{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fb-strike label{display:flex;flex-direction:column;gap:2px;font:400 12px var(--tt-ui);color:#cdb894}
.fb-strike input{width:100%;min-width:0}
.fb-share{align-self:flex-start}
@media (max-width:900px){.fb-grid{grid-template-columns:1fr;max-width:420px}.fb-table{order:-1}}

/* ---------- online lobby: live tables, leaderboard, recent results; watching a match ---------- */
.ol-menu-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.ol-open-note{margin:0;font:400 14px var(--tt-ui);color:#d8c49c}
.ol-board{width:min(560px,92vw);display:flex;flex-direction:column;gap:10px;margin-top:6px}
.ol-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ol-tabs button:not(#_){all:unset;cursor:pointer;font:600 15px var(--tt-ui);color:#d8c49c;padding:0 10px;border-style:solid;border-width:10px;border-image:url(ui/btn.png) 5 fill/10px round;image-rendering:pixelated}
.ol-tabs button:not(#_)::before,.ol-tabs button:not(#_)::after{display:none}
.ol-tabs button:not(#_)[aria-selected=true]{border-image-source:url(ui/btn-selected.png);color:var(--gold)}
.ol-tabs button:not(#_):hover{color:var(--gold)}
.ol-online{margin:0 0 6px;font:600 12px var(--tt-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ol-empty,.ol-fine{margin:4px 0;font:400 14px var(--tt-ui);color:#cdb894}
.ol-fine{font-size:12px;color:#9f8a6c}
.ol-tables{width:100%}
.ol-tables li{grid-template-columns:30px 1fr auto}
.ol-tables strong em{font-style:normal;color:var(--gold);font-size:13px;margin:0 4px}
.ol-tables strong i{font-style:normal;color:var(--gold);font-size:12px}
.ol-tables strong span.out{opacity:.5;text-decoration:line-through}
.ol-table-acts{display:flex;gap:10px}
.ol-ranks,.ol-recent{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.ol-ranks li{display:grid;grid-template-columns:34px 1fr auto 64px;gap:12px;align-items:center;padding:6px 14px;text-align:left;background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807}
.ol-ranks li.you{border-color:var(--gold)}
.ol-ranks span{font:600 16px var(--tt-ui);color:var(--gold)}
.ol-ranks strong{font:600 17px var(--tt-ui);color:var(--parchment)}
.ol-ranks strong em{font:400 12px var(--tt-ui);font-style:normal;color:var(--gold);margin-left:6px}
.ol-ranks b{font:600 17px var(--tt-ui);color:var(--gold)}
.ol-ranks small{font:400 13px var(--tt-ui);color:#cdb894;text-align:right}
.ol-recent li{padding:6px 14px;text-align:left;font:400 15px var(--tt-ui);color:#d8c49c;background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807}
.ol-recent li strong{color:var(--gold);font-weight:600}
.ol-recent li small{display:block;font-size:12px;color:#9f8a6c}
.ol-watch{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,4vw,56px);flex-wrap:wrap;padding:8px 0}
.ol-watch .challenge-board{width:clamp(120px,calc((100dvh - 270px)*.3),260px)}
.ol-watch-ffa .challenge-board{width:clamp(110px,calc((100dvh - 270px)*.28),220px)}
.ol-watch .challenge-board.eliminated{opacity:.45;filter:grayscale(.8)}
@media (max-width:480px){.ol-tabs{gap:4px}.ol-tabs button:not(#_){font-size:13px;padding:0 4px;border-width:8px}}

/* =================== online stage: the boards first, sized to the window; rails around them =================== */
#app:has(>.ol-stage){padding-top:14px}
/* matches use the window's width (the page's 1440px cap is for menus): boards first, side panels in what's left */
#app:has(>:is(.ol-stage,.match-grid,.challenge-arena)),#app:has(>.rogue-layout .rogue-arena){max-width:2000px}
.ol-head:not(#_){margin-bottom:6px;min-height:0}
.ol-head h1:not(#_){font-size:24px!important;margin:0}
.ol-stage{--bw:200px;--mw:100px;--rows:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 clamp(24px,3vw,56px);align-items:start;width:100%;margin:0}
.ol-boards{display:flex;align-items:flex-start;justify-content:center;gap:clamp(36px,4vw,64px);padding:0 66px}
.ol-rail{min-width:0;width:min(300px,100%);display:flex;flex-direction:column;gap:12px;padding-top:44px}
.ol-rail-l{justify-self:end}.ol-rail-r{justify-self:start}
@media (min-width:980px){.ol-rail{max-height:var(--bh,none);overflow:hidden}.ol-rail-l .ol-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}}
/* the rival's pattern keeps its full size; the combo list below takes what's left and scrolls */
@media (min-width:980px){.ol-rail .ol-card.ol-their-pattern:not(#_){flex:none}.ol-rail-l .ol-card #ol-combos{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b4a22 transparent}}
.ol-card{padding:10px 14px;background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807;text-shadow:var(--px-o1)}
.ol-card>.eyebrow{margin:0 0 8px}
.ol-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px;background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807;text-shadow:var(--px-o1)}
.ol-stats div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ol-stats span{font:600 9px var(--tt-ui);letter-spacing:.16em;color:#cdb894;white-space:nowrap}
.ol-stats strong{font:600 22px/1.1 var(--tt-ui);color:var(--parchment)}
.ol-stats div.warn strong{color:#ff8a6a}
.ol-caption{margin:0;font:400 13px/1.4 var(--tt-ui);color:#d8c49c;text-shadow:var(--px-o1)}
.ol-rail .ol-net{justify-content:flex-start}
#ol-combos{flex:1 1 auto;min-height:40px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
#ol-combos .muted{margin:0;font:400 13px var(--tt-ui);color:#a8967a}
.ol-rank:not(#_){grid-template-columns:24px 1fr auto auto;padding:6px 0!important;gap:8px;font:600 14px var(--tt-ui);color:var(--parchment)}
.ol-rank:not(#_) small{font:400 11px var(--tt-ui);color:#cdb894}.ol-rank:not(#_)>span{color:var(--gold);font-size:11px}
.ol-rank:not(#_) b{font:600 14px var(--tt-ui);color:var(--gold)}
.ol-rank.is-you strong{color:var(--gold)}

/* boards: one width for every full board; headers one height so the frames line up */
.ol-stage .challenge-board.ol-board:not(#_){width:var(--bw)!important;min-width:0!important;max-width:none!important;margin:0;flex:none}
.ol-stage .challenge-board.ol-board.mini:not(#_){width:var(--mw)!important}
.ol-stage .ol-board .board-header:not(#_){position:relative;height:38px;min-height:0;margin:0 0 6px;padding:0;display:flex;align-items:flex-end;justify-content:space-between;gap:6px}
.ol-stage .ol-board .board-header strong{font:600 16px/1.1 var(--tt-ui);color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ol-stage .ol-board .board-header>div>span{font:400 12px var(--tt-ui);color:#cdb894;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-stage .ol-board .board-header>div:first-child{min-width:0}
.ol-stage .ol-board .challenge-board-foot:not(#_){height:20px;margin:6px 0 0;display:flex;justify-content:space-between;gap:6px;overflow:hidden;white-space:nowrap}
.ol-stage .game-overlay{inset:0!important}
.ol-stage .mini .board-header:not(#_){height:30px;min-height:0;margin-bottom:4px}.ol-stage .mini .board-header strong{font-size:13px}.ol-stage .mini .board-header>div>span{font-size:11px}
.ol-rivals{display:grid;grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;gap:10px 16px;align-content:start}
.ol-rivals .next-piece{display:none!important}
/* a duel rival's next pair: the same gilt-edged well, on the board's right shoulder */
@media (min-width:760px){
 .ol-duel .ol-rival.next-right .next-piece:not(#_),.ol-watching .next-left:not(.ol-mine) .next-piece:not(#_),.ol-watching .next-right .next-piece:not(#_){position:absolute;top:calc(100% + 10px);z-index:3;display:block;background:var(--well);border:2px solid var(--gold-mid);box-shadow:inset 0 0 0 1px #6e4419,0 0 0 1px #0d0807,0 3px 0 #000a;padding:5px 6px 7px;width:auto!important}
 .ol-duel .ol-rival.next-right .next-piece:not(#_),.ol-watching .next-right .next-piece:not(#_){left:calc(100% + 14px)}
 .ol-watching .next-left .next-piece:not(#_){right:calc(100% + 14px)}
 .ol-duel .ol-rival .next-piece:not(#_) span,.ol-watching .next-piece:not(#_) span{display:block!important;font-size:10px!important}
 .ol-duel .ol-rival .next-piece:not(#_) canvas,.ol-watching .next-piece:not(#_) canvas{width:34px!important;height:102px!important;margin:0!important}
}
.ol-watching.ol-ffa .ol-boards{gap:24px;padding:0}.ol-watching.ol-ffa .next-piece{display:none!important}
/* the combo name over a board */
.ol-stage .board-banner.ol-banner{--tc:#cdb894;top:36%;font:700 22px/1.2 var(--tt-ui);letter-spacing:.04em;color:var(--tc);background:linear-gradient(90deg,transparent,#0d0807cc 20%,#0d0807cc 80%,transparent);text-shadow:0 2px 0 #0d0807,var(--px-o1);padding:6px 0;z-index:4;white-space:nowrap}
.ol-banner.tier-2{--tc:#74e283}.ol-banner.tier-3{--tc:#6ec8ff}.ol-banner.tier-4{--tc:#cf98ff}.ol-banner.tier-5{--tc:#ffa257}.ol-banner.tier-6{--tc:#ffd75e;font-size:26px!important}
.ol-stage .mini .board-banner.ol-banner{font-size:14px}
.ol-touch{grid-column:1/-1;justify-self:center}

/* narrow windows: boards on top, the rails folded underneath */
@media (max-width:979px){
 .ol-stage{grid-template-columns:minmax(0,1fr);gap:12px}
 .ol-boards{order:-1;padding:0;gap:16px}
 .ol-rail{justify-self:center!important;width:min(560px,100%);padding-top:0}
 .ol-rail-l .ol-card,.ol-rail-r .ol-their-pattern{display:none}
 .ol-touch{order:-1}
}

/* the end card sits over the settled boards */
.ol-veil{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--veil);animation:im-in .25s steps(3) both;overflow:auto;padding:16px}
.ol-end:not(#_){margin:0;max-width:min(680px,94vw)}
/* a free-for-all's result docks beside the boards (they stay in view): the right rail holds it, the left folds away */
.ol-stage.ol-done:not(#_){grid-template-columns:auto minmax(280px,380px);justify-content:center}
.ol-stage.ol-done>.ol-rail-l{display:none!important}
.ol-stage.ol-done>.ol-rail-r{display:flex!important;width:100%;overflow:auto}
.ol-done .ol-rail-r>:not(#ol-dock,#ol-watchers){display:none}
#ol-dock .ol-end:not(#_){max-width:none;min-width:0;width:100%;padding:14px 16px;animation:im-in .25s steps(3) both}
#ol-dock .eg-blade{display:none}#ol-dock .ol-end h2{font-size:22px;margin:4px 0 8px}
#ol-dock .eg-stats{gap:6px 18px;margin-bottom:10px}
@media (max-width:979px){.ol-stage.ol-done:not(#_){grid-template-columns:minmax(0,1fr)}.ol-stage.ol-done>.ol-rail-r{max-height:none;width:min(560px,100%)}}
.ol-end .ol-placements li{grid-template-columns:48px 1fr auto;align-items:baseline}.ol-end .ol-placements small{font:400 13px var(--tt-ui);color:#cdb894}

/* finisher: a gold band over everything, before the result */
.fin-banner{position:fixed;left:50%;top:40%;z-index:60;transform:translate(-50%,-50%);width:min(760px,96vw);text-align:center;pointer-events:none;padding:16px 0 14px;
  background:linear-gradient(90deg,transparent,#5a3a08e6 14%,#a8761a 50%,#5a3a08e6 86%,transparent);border-top:2px solid #ffe9b0;border-bottom:2px solid #ffe9b0;animation:fin-in 2.3s steps(14) both}
.fin-banner small{display:block;font:600 14px var(--tt-ui);letter-spacing:.4em;color:#ffe9b0;text-shadow:var(--px-o1)}
.fin-banner strong{display:block;font:700 clamp(40px,8vmin,80px)/1.05 var(--tt-ui);letter-spacing:.06em;color:#fff3c8;text-shadow:0 5px 0 #7d1b20,var(--px-outline),0 0 24px #ffd75e99}
.fin-banner span{display:block;margin-top:4px;font:400 16px var(--tt-ui);color:#fff3c8;text-shadow:var(--px-o1)}
.fin-banner.blow{background:linear-gradient(90deg,transparent,#5a0e12e6 14%,#a32a2a 50%,#5a0e12e6 86%,transparent)}
@keyframes fin-in{0%{opacity:0;clip-path:inset(0 50%);transform:translate(-50%,-50%) scale(1.15)}10%{opacity:1;clip-path:inset(0 0);transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.fin-banner{animation:none}}

/* =================== Play vs AI / practice: boards sized to the window (fit-boards.js), level with each other =================== */
@media (min-width:721px){
 .match-grid[style*="--fit-w"] .board-wrap:not(#_),.match-grid[style*="--fit-w"] .boards.single #wrap-0:not(#_){width:var(--fit-w)!important;max-width:none!important;min-width:0}
 .match-grid:not(#_){column-gap:clamp(56px,6vw,96px)}
 .match-grid .board-header:not(#_){position:relative;min-height:0;height:44px;align-items:flex-end}
 /* the rival's next pair: the same gilt-edged well as yours, on the far shoulder of their board */
 .match-grid #wrap-1 .next-piece:not(#_){position:absolute;left:calc(100% + 14px);top:calc(100% + 10px);z-index:3;display:block;background:var(--well);border:2px solid var(--gold-mid);box-shadow:inset 0 0 0 1px #6e4419,0 0 0 1px #0d0807,0 3px 0 #000a;padding:5px 6px 7px;width:auto!important}
 .match-grid #wrap-1 .next-piece:not(#_) span{display:block!important;font-size:10px!important}
 .match-grid #wrap-1 .next-piece:not(#_) canvas{width:34px!important;height:102px!important;margin:0!important}
}
#app:has(>.match-grid){padding-top:14px}
#app:has(>.match-grid) .game-heading:not(#_){margin-bottom:6px;min-height:0}
#app:has(>.match-grid) .game-heading h1:not(#_){font-size:24px!important;margin:0}

/* =================== Adventure while playing: boards in the middle, sized to the window; rail left, your run right =================== */
@media (min-width:1000px){
 .rogue-layout:has(.rogue-arena):not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;column-gap:clamp(84px,7vw,110px)!important;max-width:none;align-items:start}
 .rogue-layout:has(.rogue-arena)>.table-surface:not(#_),.rogue-layout:has(.rogue-arena) #rogue-stage,.rogue-arena{display:contents}
 .rogue-rail{grid-column:1;grid-row:1;justify-self:end;width:min(300px,100%);display:flex;flex-direction:column;gap:8px;max-height:var(--rail-h,none);overflow:hidden}
 .rogue-layout:has(.rogue-arena) .rogue-playfield:not(#_){grid-column:2;grid-row:1}
 .rogue-playfield>.challenge-board{flex:none}
 .rogue-layout:has(.rogue-arena)>.rogue-sidebar:not(#_){grid-column:3;grid-row:1;justify-self:start;width:min(300px,100%)}
 .rogue-rail .challenge-hud:not(#_){display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0!important;padding:8px 12px!important;background:linear-gradient(180deg,#140c0ce6,#0d0807d9);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807}
 .rogue-rail .challenge-hud strong:not(#_){font-size:17px!important;white-space:nowrap}
 .rogue-rail .fine-print{margin:0}
 .rogue-rail .rogue-feed{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
 .rogue-rail #rogue-feed{flex:1 1 auto;min-height:40px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
 .rogue-rail .button-row{margin:0;justify-content:flex-start}
 .rogue-playfield[style*="--fit-w"] .challenge-board:not(#_){width:var(--fit-w)!important;min-width:0!important;max-width:none!important}
 .rogue-playfield.duel:not(#_){gap:clamp(36px,4vw,64px)}
 .rogue-playfield .board-header:not(#_){position:relative;min-height:0!important;height:44px;align-items:flex-end;margin-bottom:6px}
 .rogue-playfield .board-header>div>span{display:block}
 .rogue-playfield .rogue-foot:not(#_){height:20px;margin:6px 0 0;white-space:nowrap;overflow:hidden}
 /* the rival's next pair, boxed on the far shoulder like yours */
 .rogue-playfield .rogue-opponent .next-piece:not(#_){position:absolute;left:calc(100% + 14px);top:calc(100% + 10px);z-index:3;display:block;background:var(--well);border:2px solid var(--gold-mid);box-shadow:inset 0 0 0 1px #6e4419,0 0 0 1px #0d0807,0 3px 0 #000a;padding:5px 6px 7px;width:auto!important}
 .rogue-playfield .rogue-opponent .next-piece:not(#_) span{display:block!important;font-size:10px!important}
 .rogue-playfield .rogue-opponent .next-piece:not(#_) canvas{width:34px!important;height:102px!important;margin:0!important}
 .rogue-arena>.touch-controls{grid-column:1/-1}
}
.rogue-feed .chain-entry.wave{--tc:#d8a08a}
.rogue-feed .muted{margin:0;font:400 13px var(--tt-ui);color:#a8967a}
/* reward cards: name, one line, rank pips */
.rogue-rewards .relic-gives:not(#_){font:400 15px/1.35 var(--tt-ui);color:var(--parchment)}
.rogue-rewards button:not(#_){align-content:start;gap:6px 14px}
@media (max-width:759px){
 .ol-stage.online-arena .ol-board.challenge-board .next-piece:not(#_){position:absolute;right:0;bottom:0;top:auto;left:auto;padding:2px 3px;background:var(--well);border:1px solid var(--gold-mid);box-shadow:0 0 0 1px #0d0807}
 .ol-stage.online-arena .ol-board.challenge-board .next-piece:not(#_) span{display:none!important}
 .ol-stage.online-arena .ol-board.challenge-board .next-piece:not(#_) canvas{width:11px!important;height:33px!important;margin:0!important}
 .ol-stage .ol-board .board-header>div:first-child{padding-right:22px}
}

/* end cards: this game's numbers for the mode, and anything unlocked, on the card itself */
.eg-unlocks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin:2px 0 12px;max-width:min(620px,90vw)}
.eg-unlocks[hidden]{display:none}
.eg-unlock{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;text-align:left;background:linear-gradient(180deg,#2a1a0ce6,#120b08e6);border:2px solid var(--gold-mid,#d4a24c);box-shadow:0 0 0 2px #0d0807;animation:im-in .3s steps(3) both}
.eg-unlock-icon:not(#_){width:34px;height:auto;max-height:64px;image-rendering:pixelated;object-fit:contain;flex:none}
.eg-unlock-icon.pg-blade:not(#_){width:30px;height:84px;max-height:none;overflow:hidden}
.eg-unlock-icon.pg-blade img:not(#_){height:84px;width:30px;max-height:none;object-fit:contain;image-rendering:auto}
.eg-unlock small{display:block;font:600 10px var(--tt-ui);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.eg-unlock strong{display:block;font:600 15px var(--tt-ui);color:var(--parchment)}
.eg-unlock span{display:block;font:400 11px var(--tt-ui);color:#cdb894;max-width:240px}
.eg-set{border-collapse:collapse;margin:0 auto 12px;font:400 14px var(--tt-ui);color:var(--parchment);text-shadow:var(--px-o1)}
.eg-set caption{font:600 11px var(--tt-ui);letter-spacing:.2em;color:var(--gold);padding-bottom:6px;text-transform:uppercase}
.eg-set th{font:400 11px var(--tt-ui);color:#cdb894;padding:2px 12px;text-align:right}
.eg-set th:first-child,.eg-set td:first-child{text-align:left}
.eg-set td{padding:3px 12px;text-align:right;border-top:1px solid #4a2f16}
.eg-set tr.you td{color:var(--gold)}
.eg-session{margin:-6px 0 12px;font:400 14px var(--tt-ui);color:#d8c49c;text-shadow:var(--px-o1)}.eg-session b{color:var(--gold)}

/* Adventure objective: a card that fills, a hint, and a word over your board as you get closer */
.rogue-goal strong{display:block;font:600 17px/1.2 var(--tt-ui);color:var(--parchment)}
.rogue-goal #rogue-progress{display:block;margin-top:4px;font:400 13px var(--tt-ui);color:var(--gold)}
.rogue-goal small{display:block;margin-top:6px;font:400 12px/1.4 var(--tt-ui);color:#cdb894}
.goal-bar{height:8px;margin-top:8px;background:#0d0807;border:1px solid #4a2f16;box-shadow:inset 0 1px 0 #000}
.goal-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--crimson-lit,#a32a2a),var(--gold));transition:width .3s steps(6)}
.rogue-hud2:not(#_){grid-template-columns:1fr 1fr!important}
.rogue-hint{max-width:520px;font:400 15px/1.45 var(--tt-ui);color:#e8d8b4;text-shadow:var(--px-o1)}
.goal-pop{position:absolute;left:0;right:0;top:22%;z-index:5;text-align:center;pointer-events:none;opacity:0;font:700 20px/1.2 var(--tt-ui);color:#fff3c8;text-shadow:0 3px 0 #7a4a10,var(--px-outline),0 0 14px #ffd75e66;white-space:normal;padding:0 6px;overflow-wrap:break-word;text-wrap:balance}
.goal-pop.show{animation:goal-pop 1.5s steps(10) both}
.goal-pop.big{font-size:22px;color:#ffe9b0;animation-duration:2.2s}
@keyframes goal-pop{0%{opacity:0;transform:translateY(10px) scale(.9)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.goal-pop.show{animation:none;opacity:1}}
.ol-end .eg-blade .sword-icon:not(#_){width:46px;height:92px}

/* Freebuild piece box: four blocks over four breakers, an eraser, and the board tools set apart */
.fb-palette{display:grid;grid-template-columns:repeat(4,34px);gap:8px;justify-content:start}
.fb-eraser:not(#_){margin-top:10px;font-size:15px!important;padding:4px 12px!important}
.fb-eraser.on:not(#_){color:var(--gold)!important;text-decoration:underline;text-underline-offset:4px}
.fb-tools:not(#_){margin-top:12px;padding:8px;justify-content:flex-start;background:#0d0807b3;border:1px solid #4a2f16}
.fb-tools .fb-clear:not(#_){margin-left:auto;color:#ffb39a!important;border-color:#7d1b20!important;background:linear-gradient(180deg,#5a1418,#3a0c10)!important;padding:2px 12px!important}
.fb-tools .fb-clear:not(#_):hover{background:linear-gradient(180deg,#7d1b20,#5a1418)!important;color:#fff3c8!important}
.fb-palette .fb-colour:not(#_)::before,.fb-palette .fb-colour:not(#_)::after{display:none!important}
.fb-palette .fb-colour.on:not(#_){outline:2px solid var(--gold)!important;outline-offset:3px}
.fb-eraser:not(#_){display:block;margin-left:0!important}
.fb-tools:not(#_){flex-wrap:nowrap;align-items:center}
.fb-tools button:not(#_){white-space:nowrap}
.fb-tools:not(#_){gap:4px;padding:6px 8px}
.fb-tools button:not(#_){font-size:14px!important;padding:2px 6px!important}
.fb-eraser:not(#_){text-align:left;padding-left:0!important}
.ol-blade-note{display:block;font:400 11px var(--tt-ui);font-style:normal;color:#ffb39a;margin-top:2px;max-width:220px}

/* Forge: pattern strength and a test board that receives this pattern's strikes */
.pattern-test:not(#_){padding:16px 18px!important}
.strength-meter{position:relative;height:10px;margin:6px 0 6px;background:#0d0807;border:1px solid #4a2f16}
.strength-meter i{display:block;height:100%;background:linear-gradient(90deg,#3a7a2a,#9ac04a)}
.strength-meter i.over{background:linear-gradient(90deg,#9ac04a,#c24a3a)}
.strength-meter b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--gold);box-shadow:0 0 0 1px #0d0807}
.strength-line{margin:0;font:400 14px var(--tt-ui);color:#d8c49c}.strength-line strong{color:var(--parchment);font-size:18px}
.legal{font:600 12px var(--tt-ui);letter-spacing:.06em;padding:1px 6px;border:1px solid}
.legal.ok{color:#a6d36a;border-color:#4a6a2a}.legal.no{color:#ffb39a;border-color:#7d1b20}
.strike-picks{display:flex;flex-wrap:wrap;gap:4px 6px;margin:6px 0 10px}
.strike-picks button:not(#_){font-size:13px!important;padding:2px 8px!important}
.strike-picks button.on:not(#_){color:var(--gold)!important;text-decoration:underline;text-underline-offset:4px}
.pt-wrap{display:flex;justify-content:center}
.pt-frame{position:relative;width:132px}
.pt-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);z-index:2}
.pt-cols button:not(#_){all:unset;cursor:pointer}
.pt-cols button:hover{background:linear-gradient(#f0cf7a33,transparent 70%)}
.strike-tools{display:flex;gap:8px;justify-content:center;margin:10px 0 6px}
.strike-tools .fb-clear:not(#_){color:#ffb39a!important;border-color:#7d1b20!important;background:linear-gradient(180deg,#5a1418,#3a0c10)!important;padding:2px 12px!important}
.pt-read{margin:0;font:400 13px/1.4 var(--tt-ui);color:#e8d8b4;text-align:center}

/* Freebuild: their board beside yours, and a blade picker that opens into the full list */
.fb-boards{display:flex;gap:28px;justify-content:center;align-items:flex-start}
.fb-board-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.fb-board-col>small{font:600 10px var(--tt-ui);letter-spacing:.24em;color:var(--gold)}
.fb-boards.two .fb-frame:not(#_){width:clamp(120px,calc((100dvh - 330px)*4/13),200px)}
.fb-toggle{display:flex;align-items:center;gap:8px;font:400 14px var(--tt-ui);color:var(--parchment);margin:4px 0 10px;cursor:pointer}
.fb-blade>small{display:block;font:600 10px var(--tt-ui);letter-spacing:.16em;color:#cdb894;margin-bottom:4px}
#fb-blade-btn:not(#_){display:flex;align-items:center;gap:10px;width:100%;padding:6px 10px!important;text-align:left;background:#0d0807b3!important;border:1px solid #4a2f16!important}
#fb-blade-btn strong{flex:1;min-width:0;font:600 15px var(--tt-ui);color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#fb-blade-btn::before,#fb-blade-btn::after{display:none!important}
/* Freebuild's blade list: the online picker's cards, opening over the boards from the right-hand panel */
.fb-blade{position:relative}
.fb-blade .fb-blade-list:not(#_){position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(540px,calc(100vw - 32px));max-height:460px;box-shadow:0 0 0 2px #0d0807,0 14px 30px #000c}
.fb-blade-list .ol-picker-row{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.fb-blade-list .pattern-thumb:not(#_):not(#_):not(#_):not(#_),#fb-blade-btn .pattern-thumb:not(#_):not(#_):not(#_):not(#_){grid-template-columns:repeat(var(--cols,6),1fr)!important;width:30px!important;gap:1px!important;padding:2px!important}
.fb-blade-list .pattern-thumb i:not(#_):not(#_):not(#_):not(#_),#fb-blade-btn .pattern-thumb i:not(#_):not(#_):not(#_):not(#_){width:auto!important;height:auto!important;aspect-ratio:2/3!important}
.fb-blade-list .ol-pick span:not(.fav-star){flex:1}
@media(max-width:600px){.fb-blade .fb-blade-list:not(#_){left:0;right:0;width:auto}}
#fb-target-clear:not(#_){margin-top:10px;color:#ffb39a!important;border-color:#7d1b20!important;background:linear-gradient(180deg,#5a1418,#3a0c10)!important;padding:2px 12px!important}
.pattern-work-grid>aside.pattern-test:last-child:not(#_){display:block!important}
.library-workshop:has(.pattern-test):not(#_){grid-template-columns:minmax(240px,320px) minmax(340px,480px) minmax(250px,300px)!important}
@media(max-width:1150px){.library-workshop:has(.pattern-test):not(#_){grid-template-columns:minmax(240px,320px) minmax(320px,480px)!important}.pattern-work-grid>aside.pattern-test:not(#_){grid-column:1/-1}}
@media(max-width:640px){.library-workshop:has(.pattern-test):not(#_){grid-template-columns:minmax(0,1fr)!important}}
.pt-frame{position:relative;width:132px;border:4px solid #8c7554;outline:1px solid #b49c6c;box-shadow:0 0 0 4px #0d0807;background:#19191e}
.pt-frame canvas{display:block;width:100%;height:auto;aspect-ratio:4/13}
.strike-tools button:not(#_){font-size:14px!important;white-space:nowrap;padding:2px 6px!important}.strike-tools button:not(#_)::before,.strike-tools button:not(#_)::after{display:none!important}.strike-tools{flex-wrap:wrap}
.fb-target-tools{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}.fb-target-tools #fb-target-clear:not(#_){margin-top:0}.fb-target-tools button:not(#_){font-size:14px!important;white-space:nowrap}
.strength-meter u{position:absolute;top:-2px;bottom:-2px;width:1px;background:#cdb894aa}

/* the clock sits between the two boards, level with their names */
.duel-mid{align-self:flex-start;display:flex;justify-content:center;min-width:84px;padding-top:4px}
.duel-clock{font:600 32px/1 var(--tt-ui);color:var(--gold);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 3px 0 var(--crimson),var(--px-outline),0 5px 0 var(--tt-ink)}
.ol-boards:not(#_){gap:clamp(14px,1.6vw,26px)}
.boards .duel-mid{margin:0 -20px}
.match-tools>span.clock-moved{display:none}
@media (max-width:979px){.duel-mid{min-width:56px}.duel-clock{font-size:22px}}

/* online lobby: blade picker, pattern on hover, previous names, your games */
.ol-blade-pick{cursor:pointer;background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
.ol-blade-pick:hover .sword-icon,.ol-blade-pick:focus-visible .sword-icon{filter:drop-shadow(0 0 4px var(--gold))}
button.ol-blade-name{cursor:pointer;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;gap:3px}
button.ol-blade-name .pattern-thumb{width:34px}
button.ol-blade-name:hover strong,button.ol-blade-name[aria-expanded="true"] strong{color:var(--gold)}
.ol-blade-note{max-width:180px;font:400 11px var(--tt-ui);font-style:normal;color:#ffcf8a}
.ol-aka{font:400 11px var(--tt-ui)!important;letter-spacing:0!important;color:#9f8a6c!important}
.ol-picker{width:min(640px,92vw);max-height:min(46vh,420px);overflow:auto;padding:4px 14px 12px;text-align:left;background:linear-gradient(180deg,#140c0cf2,#0d0807e6);border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807}
.ol-picker-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:6px}
.ol-pick:not(#_){display:flex;align-items:center;gap:10px;padding:5px 10px;text-align:left;min-height:0;background:#0d0807cc;border:2px solid #3a2612;box-shadow:none;cursor:pointer}
.ol-pick .sword-icon{width:20px;height:40px;flex:none}
.ol-pick span{display:flex;flex-direction:column;min-width:0}
.ol-pick strong{font:600 14px var(--tt-ui);color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-pick small{font:400 11px var(--tt-ui);letter-spacing:0;color:#9f8a6c}
.ol-pick:hover:not(#_),.ol-pick:focus-visible:not(#_){border-color:#8a6a3a}
.ol-pick.on:not(#_){border-color:var(--gold);background:#2a160bcc}
/* the favourite star on a blade card */
.fav-star{margin-left:auto;padding:0 2px;flex:none;font:400 15px/1 var(--tt-ui);color:#5a4630;cursor:pointer}
.fav-star:hover{color:#cdb98f}.fav-star.on{color:var(--gold)}
.sword-choice{position:relative}.sword-choice .fav-star{position:absolute;top:5px;right:6px}
/* the Falchion's colours by bottom row: three colours, left to right; click one to change it */
#enamel-controls:has(.row-pick){align-self:stretch}
.pm-side .enamel-controls.row-pick:not(#_){display:block;width:100%;max-width:264px;margin:-4px auto 10px;text-align:center}
.row-pick .field-label{margin:4px 0 3px;font:600 10px var(--tt-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.row-slots{display:flex;justify-content:center;gap:6px}
.row-pick .cp-drops:not(#_){gap:6px;margin:0}.row-pick .cp-drops .cp-select:not(#_){min-width:0;width:84px;margin-top:3px}
.row-slot:not(#_):not(#_){width:34px;min-height:0;height:30px;padding:0!important;font:700 14px var(--tt-ui)!important;color:#000b!important;border:2px solid #0d0807!important;box-shadow:none!important}
.row-slot::before,.row-slot::after{content:none!important;display:none!important}
.row-slot:hover:not(#_):not(#_){border-color:var(--gold)!important}
.ol-tip{position:fixed;z-index:60;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px;background:#0d0807f2;border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807,0 4px 0 #000a}
.ol-tip .pattern-thumb:not(#_){width:180px;gap:3px}
.ol-tip small{font:400 11px var(--tt-ui);color:var(--gold);text-shadow:var(--px-o1)}
.ol-sub{margin:10px 0 4px;font:600 11px var(--tt-ui);letter-spacing:.2em;color:var(--gold);text-align:left;width:100%}
.ol-sub:first-child{margin-top:0}
.ol-mine li{border-left-width:6px!important}
.ol-mine li.won{border-left-color:#7ad36a!important}
.ol-mine li.lost{border-left-color:#c24a3a!important}
.ol-more:not(#_){margin:6px auto 0;display:block;font-size:14px}
[data-rows]{cursor:help}
.ol-pick[data-rows],button[data-rows]{cursor:pointer}
.ol-blade-name::before,.ol-blade-name::after,.ol-blade-pick::before,.ol-blade-pick::after,.ol-pick::before,.ol-pick::after{content:none!important;display:none!important}
/* reward cards: what the relic does for you, and its rank */
.rogue-rewards .relic-why:not(#_){display:block;font:400 13px/1.3 var(--tt-ui);color:#cdb894}
.relic-why b{font:600 10px var(--tt-ui);letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.relic-why b.g-attack{color:#ff8a6a}.relic-why b.g-defence{color:#7ab8ff}.relic-why b.g-fortune{color:#ffd75e}
.adv-pips.rank{align-items:center}
.adv-pips.rank b{font:600 10px var(--tt-ui);letter-spacing:.12em;text-transform:uppercase;color:#9f8a6c;margin-right:6px;font-style:normal}
/* no board jolt when attacks land (it threw off aim in competitive play) */
.impact{animation:none!important}
.ol-wheel{display:flex;align-items:center;gap:4px}
.ol-spin:not(#_){min-height:0;padding:0 4px!important;background:none!important;border:0!important;box-shadow:none!important;font:600 26px/1 var(--tt-ui);color:var(--gold);cursor:pointer}
.ol-spin::before,.ol-spin::after{content:none!important;display:none!important}
.ol-spin:hover:not(#_){color:var(--parchment)}
.adv-pips.rank small{font:600 10px var(--tt-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--crimson-lit);margin-left:6px}
/* lobby card: name on the left, your blade (name, pattern, sword) together on the right */
.ol-you:not(#_){grid-template-columns:1fr auto auto;gap:14px}
.ol-blade-side{display:flex;align-items:center}
.ol-blade-side .ol-blade .sword-icon{width:34px;height:68px}
@media(max-width:640px){.ol-you:not(#_){grid-template-columns:1fr auto}.ol-name{grid-column:1/-1}.ol-blade-name{grid-column:auto!important;align-items:flex-end!important;text-align:right!important}}
.ol-hint{margin:-2px 0 4px;font:400 13px var(--tt-ui);color:#9f8a6c}
.ol-others{width:100%;max-width:640px;margin-top:6px}
.ol-open-note{max-width:520px;text-align:center}
.ol-others .ol-sub{text-align:center}
/* the blade picker drops down over the page instead of pushing it (no jump in size) */
.ol-you:not(#_){position:relative}
.ol-you .ol-picker:not(#_){background:#120b08;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:30;box-shadow:0 0 0 2px #0d0807,0 14px 30px #000c}

.fb-them-tools{display:flex;gap:10px;justify-content:center;margin-top:4px}
.fb-them-tools button:not(#_){font-size:13px;min-height:0;padding:2px 6px}
.fb-them-tools button::before,.fb-them-tools button::after{content:none!important;display:none!important}
.handling-presets{display:flex;gap:16px;flex-wrap:wrap}
.zen-night{display:block;font:400 11px var(--tt-ui);color:#9f8a6c;letter-spacing:.06em;margin:-2px 0 6px}
#zm-night::before,#zm-night::after{content:none!important;display:none!important}
/* timings: the Default checkbox at the top; while it's ticked the sliders are locked to the defaults */
.timing-default{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;margin:0 0 12px;border:2px solid #4a2f16;background:#140c0ccc;cursor:pointer}
.timing-default input{width:20px;height:20px;margin-top:2px;accent-color:var(--gold);flex:none}
.timing-default strong{display:block;font:600 16px var(--tt-ui);color:var(--parchment)}
.timing-default small{display:block;font:400 13px var(--tt-ui);color:#b8a688;margin-top:2px}
.handling-editor.locked .field-label{opacity:.55}
.handling-editor.locked input[type=range]{cursor:not-allowed}
.timing-more{margin-top:10px;border-top:1px solid #4a2f16;padding-top:6px}
.timing-more summary{cursor:pointer;font:600 14px var(--tt-ui);color:var(--gold);list-style:none;padding:4px 0}
.timing-more summary::-webkit-details-marker{display:none}
.timing-more summary::before{content:"\25b8";display:inline-block;margin-right:8px;transition:transform .2s}
.timing-more[open] summary::before{transform:rotate(90deg)}
/* ---------- Forge: new-pattern flow (steps, icon picker, row rail) ---------- */
.forge-editor .fg-head{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.forge-editor .fg-icon .sword-icon{width:40px;height:80px;display:block}
.forge-editor .fg-head .eyebrow{margin:0 0 2px}
.forge-editor .fg-title{margin:0;font:400 22px var(--tt-display,inherit);color:#f3e2bd;line-height:1.1;overflow-wrap:anywhere}
.forge-editor #pattern-status{margin:4px 0 0;font:400 12px var(--tt-ui);color:#b9a684}
.fg-step{border-top:1px solid #6b4a2a66;padding:14px 0 6px;margin-top:10px}
.fg-step-head{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:400 15px var(--tt-ui);color:#f3e2bd;letter-spacing:.02em}
.fg-step-head b{display:inline-grid;place-items:center;width:22px;height:22px;background:#8a2a22;color:#fff3d6;border:2px solid #d8b47a;font:400 12px var(--tt-ui);flex:none}
.fg-hint{margin:-2px 0 10px}
.forge-editor .pattern-palette{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fg-fill{margin-left:auto;padding:4px 12px;font:400 13px var(--tt-ui)}
.fg-grid{display:grid;grid-template-columns:26px minmax(0,300px);gap:8px;justify-content:center}
.fg-grid .pattern-editor:not(#_){margin:0;max-width:300px}
.fg-rail{display:grid;padding:12px 0;gap:3px}
.fg-rail>span{display:flex;align-items:center;justify-content:center;border-right:2px solid #d8b47a88;margin:2px 0}
.fg-rail .fg-spr{border-right-color:#a88a5a}
.fg-glyph{width:18px;height:auto;image-rendering:pixelated;display:block}
.fg-strike .fg-glyph{width:12px}
.fg-legend{display:flex;justify-content:center;gap:16px;margin:6px 0 0;font:400 11px var(--tt-ui);color:#b9a684}
.fg-legend span{display:inline-flex;align-items:center;gap:5px}
.fg-legend .fg-glyph{width:10px}
.fg-tools{justify-content:center}
.fg-rows{display:inline-flex;align-items:center;gap:6px;margin-right:6px;font:400 13px var(--tt-ui);color:#f3e2bd}
.fg-rows button{width:28px;height:28px;padding:0;display:grid;place-items:center}
.forge-editor .fg-name{width:100%;margin-bottom:10px}
.fg-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;max-height:156px;overflow-y:auto;padding:4px;background:#0000003a;border:1px solid #6b4a2a66}
.fg-icons button{padding:2px;height:72px;display:grid;place-items:center;background:transparent;border:1px solid transparent}
.fg-icons button .sword-icon{width:28px;height:56px}
.fg-icons button:hover{border-color:#d8b47a66}
.fg-icons button.on{border:2px solid var(--gold,#d8b47a);background:#d8b47a1f}
.fg-more{border-top:1px solid #6b4a2a66;margin-top:12px;padding-top:10px}
.pt-sprinkles{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:-4px 0 10px;font:400 12px var(--tt-ui);color:#b9a684}
.pt-sprinkles span{margin-right:2px}
.pt-sprinkles button:not(#_){font-size:12px!important;padding:2px 7px!important}
.pt-sprinkles button:not(#_)::before,.pt-sprinkles button:not(#_)::after{display:none!important}
.strike-tools #pt-show:not(#_){flex-basis:100%;max-width:max-content;margin:0 auto 2px}
/* Forge tabs and the Community blades shelf */
.fg-tabs{display:flex;gap:6px;justify-content:center;margin:0 auto 16px;max-width:960px}
.fg-tabs button:not(#_){font:400 15px var(--tt-ui)!important;padding:6px 18px!important;color:#b9a684!important;border-bottom:2px solid transparent!important}
.fg-tabs button.on:not(#_){color:var(--gold,#d8b47a)!important;border-bottom-color:var(--gold,#d8b47a)!important}
.fg-share{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 0;font:400 13px var(--tt-ui);color:#b9a684}
.cm-shelf{max-width:1000px;margin:0 auto}
.cm-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;align-items:flex-end;margin-bottom:16px}
.cm-head .eyebrow{margin:0 0 4px}.cm-head .fine-print{margin:0;max-width:440px}
.cm-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-controls input{width:220px;max-width:100%}
.cm-controls .segmented button.on:not(#_){color:var(--gold,#d8b47a)!important}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cm-card{display:grid;grid-template-columns:44px 1fr;gap:6px 12px;padding:12px;background:#0000003a;border:1px solid #6b4a2a88}
.cm-art .sword-icon{width:36px;height:72px;display:block}
.cm-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cm-body strong{font:400 16px var(--tt-ui);color:#f3e2bd;overflow-wrap:anywhere}
.cm-body small{font:400 12px var(--tt-ui);color:#b9a684}
.cm-body .pattern-thumb{width:72px;margin:4px 0}
.cm-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cm-actions button:not(#_){font-size:13px!important;padding:3px 10px!important}
.cm-empty{text-align:center;padding:40px 12px;color:#b9a684;font:400 14px var(--tt-ui)}
@media(max-width:640px){.cm-controls input{width:100%}.cm-head{align-items:stretch}}
/* unlock cards lead with what you did: "500 strikes survived" big, the number in gold; rank pips for swords of honour */
.eg-unlock:not(#_){padding:8px 14px 8px 10px;gap:12px}
.eg-unlock strong:not(#_){font:400 18px var(--tt-ui);color:#f6e7c4;line-height:1.15;margin:2px 0 3px}
.eg-unlock strong b{font:400 22px var(--tt-ui);color:var(--gold,#f0cf7a);margin-right:2px}
.eg-unlock span:not(#_){font:400 12px var(--tt-ui);color:#cdb894}
.pg-pips{display:flex;gap:3px;margin-top:5px}
.pg-pips u{display:block;width:10px;height:4px;background:#3a2a1a;box-shadow:0 0 0 1px #0d0807}
.pg-pips u.on{background:var(--gold,#f0cf7a)}
.rogue-lives{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 10px;color:#e0484a;font-size:18px;letter-spacing:2px}
.rogue-lives span{font:400 13px var(--tt-ui);color:#cdb894;letter-spacing:0}
/* Play vs AI: the rival ladder */
.pm-ladder{display:flex;flex-direction:column;gap:2px;width:min(300px,100%);margin:2px auto 8px;max-height:min(46vh,420px);overflow-y:auto;padding:2px}
.pm-rung:not(#_){display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:4px 8px;border-radius:5px;background:#120d0b99;border:1px solid #3a2e24;min-height:0}
.pm-rung .pm-tier{grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2a201a;border:1px solid #6a5238;font:700 13px var(--tt-ui);color:#e8d7b0}
.pm-rung b{font:600 15px/1.15 var(--tt-ui);color:#e8dcc4}.pm-rung small{grid-column:1;font:400 12px/1.1 var(--tt-ui);color:var(--muted)}
.pm-rung em{grid-row:1/3;grid-column:2;font:600 12px var(--tt-ui);font-style:normal;color:#cdb98f}
.pm-rung.selected:not(#_){border-color:var(--gold);background:#2b1f12cc;box-shadow:0 0 0 1px #f0c86a55}.pm-rung.selected b{color:var(--gold)}
.pm-rung:hover:not(#_){border-color:#8a6c44}.pm-rung::before,.pm-rung::after{display:none!important}
.pm-rung.ultra .pm-tier{background:#3a0d14;border-color:#d43838;color:#ffb0a0}.pm-rung.ultra small{color:#ff9d8a}
.pm-rival{max-width:300px;margin:0 auto 8px;text-align:center}.pm-rival .pm-note{margin:0 0 4px}
.pm-global{font:400 13px var(--tt-ui);color:#cdb98f;margin:2px 0 0;min-height:1.2em}
.pm-group{margin:8px 0 2px;font:600 11px var(--tt-ui);letter-spacing:.12em;text-transform:uppercase;color:#cdb98f;text-align:left}
.pm-all{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font:400 13px var(--tt-ui);color:var(--muted);cursor:pointer}
.pm-ladder>*{flex-shrink:0}
/* combo feed show / hide */
.eyebrow.has-feed-toggle{display:flex;align-items:center;gap:8px}
.feed-toggle:not(#_){margin-left:auto;padding:1px 8px;min-height:0;font:600 10px var(--tt-ui);letter-spacing:.1em;text-transform:uppercase;color:#cdb98f;background:#0d0807a6;border:1px solid #4a2f16;border-radius:3px;box-shadow:none;line-height:1.6}
.feed-toggle:hover:not(#_){color:var(--gold);border-color:#8a6c44}.feed-toggle::before,.feed-toggle::after{display:none!important}
body.feed-off #exchange-log,body.feed-off #ol-combos,body.feed-off #rogue-feed{display:none!important}
/* report a problem */
.report-link:not(#_){display:block;margin:12px auto 0;padding:2px 8px;min-height:0;background:none;border:0;box-shadow:none;font:400 12px var(--tt-ui);color:#9c876a;text-decoration:underline;text-underline-offset:3px}
.report-link:hover:not(#_){color:var(--gold)}.report-link::before,.report-link::after{display:none!important}
.report-dialog{width:min(520px,94vw);padding:20px 22px;background:#1c120e;color:var(--parchment);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807,0 18px 40px #000a}
.report-dialog::backdrop{background:#0d0807c0}
.report-dialog h2{margin:2px 0 10px;font:600 22px var(--tt-ui);color:var(--parchment)}
.report-dialog textarea{width:100%;box-sizing:border-box;padding:8px 10px;font:400 14px/1.4 var(--tt-ui);color:#f0e4c8;background:#0d0807;border:1px solid #4a2f16;resize:vertical}
.rp-kind{display:flex;gap:18px;margin:2px 0 10px;font:400 14px var(--tt-ui)}.rp-kind label{display:flex;gap:6px;align-items:center;cursor:pointer}
.rp-check{display:flex;gap:8px;align-items:center;margin:10px 0 2px;font:400 14px var(--tt-ui)}.rp-fine{margin:4px 0;font:400 12px var(--tt-ui);color:#9c876a}
.rp-status{min-height:1.3em;margin:6px 0;font:600 13px var(--tt-ui);color:#e8d27a}
/* how to play: the training yard (your board, the goal in a few words, your keys, the rival your swords land on) */
.tutorial{width:fit-content;max-width:96vw;max-height:96vh;padding:0;overflow:auto;background:#1c120e;color:var(--parchment);border:2px solid #4a2f16;box-shadow:0 0 0 2px #0d0807,0 18px 40px #000a}
.tutorial::backdrop{background:#0d0807c8}
.tu-top{display:flex;align-items:center;gap:16px;padding:12px 16px 0 22px}.tu-top .eyebrow{margin:0}
.tu-pips{display:flex;gap:10px;list-style:none;margin:0 auto;padding:0}
.tu-pips li{width:9px;height:9px;background:#4a2f16;box-shadow:0 0 0 2px #0d0807;transform:rotate(45deg)}.tu-pips li.done{background:#8a6a2a}.tu-pips li.on{background:var(--gold)}
.tu-body{display:flex;align-items:stretch;gap:20px;padding:14px 22px 20px}
.tu-you{display:flex;gap:8px;align-items:flex-start}
.tu-board{position:relative;border:3px solid #8c7554;box-shadow:0 0 0 2px #0d0807;line-height:0;background:#0d0807}
.tu-board canvas{display:block;width:auto;outline:none}
.tu-you .tu-board canvas{height:min(62vh,560px)}
.tu-marks{position:absolute;inset:0;pointer-events:none}
.tu-target{position:absolute;box-sizing:border-box;border:2px dashed #f2d27a;background:#f2d27a2a;animation:tu-pulse 1.2s steps(1) infinite}
@keyframes tu-pulse{50%{background:#f2d27a50}}
.tu-col{position:absolute;top:0;bottom:0;background:#d4383820;box-shadow:inset 0 0 0 2px #d43838aa}
.tu-next{padding:5px;border:2px solid #4a2f16;background:#0d0807;line-height:0}.tu-next canvas{width:22px;height:auto}
.tu-mid{width:clamp(190px,22vw,270px);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tu-mid h2{margin:0;font:600 13px var(--tt-ui);letter-spacing:.16em;text-transform:uppercase;color:#cdb98f}
.tu-goal{margin:0;font:600 clamp(22px,2.4vw,30px)/1.15 var(--tt-ui);color:var(--gold);text-shadow:0 2px 0 var(--crimson),var(--px-o1)}
.tu-count{display:flex;gap:8px;margin:2px 0 0;min-height:12px}.tu-count i{width:12px;height:12px;background:#4a2f16;box-shadow:0 0 0 2px #0d0807}.tu-count i.on{background:var(--gold)}
.tu-status{margin:0;min-height:1.4em;font:600 18px var(--tt-ui)}.tu-status.good{color:#9fe07a}.tu-status.bad{color:#f08a6a}
.tu-keys{margin-top:auto;display:grid;gap:8px}
.tu-keys span{display:flex;align-items:center;gap:4px;opacity:.5}.tu-keys span.lit{opacity:1}
.tu-keys small{margin-left:6px;font:400 13px var(--tt-ui);color:#cdb98f}
.tu-keys kbd{min-width:26px;height:26px;padding:0 6px;font:600 13px var(--tt-ui);color:var(--parchment);background:#0d0807;border:2px solid #6b4a22;border-bottom-width:4px;border-radius:0}
.tu-keys span.lit kbd{color:var(--gold);border-color:#c9a24e}
.tu-mid .button-row{justify-content:flex-start;gap:4px 14px}
.tu-rival{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:flex-end}
.tu-rival small{font:600 10px var(--tt-ui);letter-spacing:.16em;color:#cdb98f}
.tu-rival canvas{height:min(38vh,340px)}
.tu-hit{animation:tu-hit .2s steps(2)}
@keyframes tu-hit{50%{transform:translateY(3px)}}
.tu-ready{margin:auto 0 0!important;font:600 34px var(--tt-ui)!important;letter-spacing:0!important;text-transform:none!important;color:var(--gold)!important}
.tu-finished .tu-mid{justify-content:center}.tu-finished .tu-mid .button-row{margin-bottom:auto}
@media(max-width:620px){.tu-body{flex-wrap:wrap;justify-content:center;padding:12px}.tu-mid{width:100%;align-items:center}.tu-rival{display:none}.tu-you .tu-board canvas{height:min(48vh,420px)}}
@media(prefers-reduced-motion:reduce){.tu-target,.tu-hit{animation:none}}
.tu-open:not(#_){display:block;margin:8px auto 0;padding:2px 8px;min-height:0;background:none;border:0;box-shadow:none;font:400 13px var(--tt-ui);color:#cdb98f;text-decoration:underline;text-underline-offset:3px}
.tu-open::before,.tu-open::after{display:none!important}.tu-open:hover:not(#_){color:var(--gold)}
/* character rivals: speech bubbles, the toad's fog, the dragon's hoard glow, JD's entrance */
.rival-say{position:absolute;top:10px;left:8px;right:8px;z-index:4;padding:7px 10px;border-radius:10px;background:#f3e6c8;color:#2a1a0c;font:600 14px/1.25 var(--tt-ui);text-align:center;box-shadow:0 3px 0 #0006,0 0 0 2px #4a2f16;pointer-events:none;animation:rs-in .25s ease-out,rs-out .4s ease-in 2.8s forwards}
@keyframes rs-in{from{transform:translateY(-8px) scale(.9);opacity:0}}@keyframes rs-out{to{opacity:0;transform:translateY(-6px)}}
.board-frame.fog canvas{filter:blur(4px) saturate(.35) brightness(.75);animation:fog-lift 9s steps(1) infinite}
@keyframes fog-lift{0%,88%{filter:blur(4px) saturate(.35) brightness(.75)}89%,93%{filter:blur(1px) saturate(.7)}}
.board-frame.fog::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 70%,#4a7a3a55,transparent 60%),radial-gradient(circle at 70% 30%,#5a3a6a55,transparent 55%);animation:fog-drift 6s ease-in-out infinite alternate}
@keyframes fog-drift{to{background-position:20px -30px,-25px 20px}}
.board-frame.hoard{box-shadow:0 0 0 5px #211e22,0 0 calc(var(--hoard,0)*34px + 4px) calc(var(--hoard,0)*10px) #f2b13acc;transition:box-shadow .6s}
.eg-say{margin:-4px 0 12px;font:italic 400 15px var(--tt-ui);color:#f0e2c7;text-shadow:var(--px-o1)}.eg-say span{font-style:normal;color:#cdb98f;font-size:13px}
.airstrike{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.airstrike .as-plane{position:absolute;top:12%;left:-200px;width:180px;height:52px;background:#b9a57c;filter:drop-shadow(0 0 2px #000) drop-shadow(0 6px 0 #0007);clip-path:polygon(0 15%,8% 15%,16% 42%,48% 40%,40% 0,52% 0,70% 40%,94% 42%,100% 50%,94% 58%,70% 60%,52% 100%,40% 100%,48% 60%,16% 58%,8% 85%,0 85%,5% 50%);animation:as-fly 1.4s linear forwards}
@keyframes as-fly{to{left:calc(100% + 200px)}}
.airstrike .as-bomb{position:absolute;top:15%;width:14px;height:24px;border-radius:7px;background:#e8dcc0;box-shadow:0 0 0 2px #1d1d22;animation:as-drop .55s ease-in forwards}
@keyframes as-drop{to{top:62%}}
.airstrike .as-boom{position:absolute;top:58%;width:120px;height:120px;margin:-60px;border-radius:50%;background:radial-gradient(circle,#fff6c8,#f2a03a 40%,#c0392b00 70%);animation:as-boom .6s ease-out forwards;opacity:0}
@keyframes as-boom{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.8)}}
.as-shake{animation:as-shake .45s linear}
@keyframes as-shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
@media(prefers-reduced-motion:reduce){.airstrike,.board-frame.fog::after{display:none}.as-shake{animation:none}}

/* paused: everything under the card dims and holds still */
body:has(.game-overlay.shown .pause-card) :is(.board-frame canvas, canvas[id^="next-"], .next-piece canvas){filter:brightness(.35) saturate(.6);transition:filter .2s}
/* "Report a problem": a quiet text link, there when something goes wrong */
.pause-card .report-link:not(#_):not(#_),.endgame .report-link:not(#_):not(#_),.report-link:not(#_):not(#_){display:block;margin:10px auto 0;padding:0;min-height:0;width:auto;background:none!important;border:0!important;box-shadow:none!important;font:400 11px/1.4 var(--tt-ui)!important;letter-spacing:0!important;text-transform:none!important;color:#8a7558!important;opacity:.75;text-decoration:underline;text-underline-offset:2px;text-shadow:none!important}
.report-link:not(#_):not(#_):hover{opacity:1;color:var(--gold)!important}
/* Zen: no "You" label over the board; the board moves up into its place */
.zen-board .board-header>div:first-child{display:none}
.zen-board .board-header{height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible}
/* rival board view (title/rival-view.js): not full = your board centred, the clock up by Leave, the rival tucked top right */
.rv-toggle:not(#_){min-height:0;padding:2px 8px;margin-right:6px;font:400 12px var(--tt-ui);color:#e3d3b2;background:none;border:1px solid transparent;border-radius:0;box-shadow:none;text-shadow:var(--px-o1)}   /* a text item like Pause and Leave beside it */
.rv-toggle::before,.rv-toggle::after{display:none!important}.rv-toggle:not(#_):is(:hover,:focus-visible){color:var(--gold)}
body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) .boards .duel-mid{display:none}
body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) .match-tools>span.clock-moved{display:inline-block;margin-right:10px}
body:is([data-rival-view=mini],[data-rival-view=tiny]) :is(.boards,.ol-duel .ol-boards){position:relative}
body:is([data-rival-view=mini],[data-rival-view=tiny]) .boards #wrap-1{position:absolute;top:0;left:calc(50% + var(--fit-w,240px)/2 + 16px);transform-origin:top left}
body:is([data-rival-view=mini],[data-rival-view=tiny]) .ol-duel .ol-rival{position:absolute;top:0;left:calc(50% + var(--bw,260px)/2 + 16px);transform-origin:top left}
body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) .ol-duel .ol-boards .duel-mid{position:absolute;top:0;left:0}
body:is([data-rival-view=mini],[data-rival-view=tiny],[data-rival-view=hidden]) .ol-duel .ol-boards{justify-content:center}
body[data-rival-view=mini] :is(#wrap-1,.ol-duel .ol-rival){transform:scale(.32)}
body[data-rival-view=tiny] :is(#wrap-1,.ol-duel .ol-rival){transform:scale(.2)}
body[data-rival-view=mini] .ol-ffa .ol-rival{zoom:.7}
body[data-rival-view=tiny] .ol-ffa .ol-rival{zoom:.45}
body[data-rival-view=hidden] :is(#wrap-1,.ol-rival){display:none!important}
/* lean match layout (app.js fitLocal): side panels step aside so the boards can be as big as the window allows */
.match-grid.lean{grid-template-columns:minmax(0,1fr)!important}
.match-grid.lean>.match-loadout,.match-grid.lean>.match-notes{display:none!important}
.match-grid.lean .board-bottom{display:none}
body:has(.match-grid.lean) .control-guide{display:none}
/* match focus: the board is the heart of it, so while a match is on everything around it gets out of the way */
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) header.topbar{min-height:0!important;height:auto!important;padding-top:3px!important;padding-bottom:3px!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) header.topbar :is(.wordmark,.wordmark picture,.wordmark img){height:24px!important;width:auto!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) #app{padding-top:6px!important;padding-bottom:6px!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) .game-heading{margin:0 0 4px!important;align-items:center}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) .game-heading .eyebrow{display:none}
/* in a match the boards speak for themselves: no "You vs. …" title, just the tools */
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) .game-heading h1{display:none!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) .game-heading{justify-content:flex-end}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) .control-guide{display:none!important}
.match-grid .board-bottom{display:none!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) header.topbar :is(#settings-open,#tt-menu-open){min-height:0!important;height:28px!important;padding-top:0!important;padding-bottom:0!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) header.topbar #settings-open{width:28px!important}
body:has(#app :is(.match-grid,.ol-stage,.rogue-arena,.challenge-arena)) header.topbar #settings-open :is(svg,img){width:20px;height:20px}
.ol-stage.ol-lean{grid-template-columns:minmax(0,1fr)!important}
.ol-stage.ol-lean>.ol-rail{display:none!important}
/* Freebuild eraser: a proper tile-row button, as wide as the colours above it */
.fb-box .fb-eraser:not(#_){display:flex;align-items:center;justify-content:center;gap:8px;width:160px;min-height:0;height:34px;margin:12px 0 0!important;padding:0 10px!important;text-align:center;text-decoration:none;font-size:14px!important;color:#e8d8b4!important;background:#0d0807b3!important;border:1px solid #4a2f16!important;border-radius:3px;box-shadow:none!important;text-shadow:none!important}
.fb-box .fb-eraser:not(#_)::before,.fb-box .fb-eraser:not(#_)::after{display:none!important}
.fb-box .fb-eraser:not(#_):hover{border-color:#8a6c44!important;color:var(--gold)!important}
.fb-box .fb-eraser.on:not(#_){color:var(--gold)!important;border-color:var(--gold)!important;outline:2px solid var(--gold);outline-offset:2px;text-decoration:none}
/* the Forge: one short title, then straight to work */
.room-heading.forge-heading:not(#_){margin:0 0 8px;min-height:0}
.forge-heading h1:not(#_){font-size:26px;margin:0;line-height:1.1}
/* name and look live in the editor's header: type the name, click the blade to pick its look */
.forge-editor .fg-head:not(#_){gap:12px;align-items:center}
.forge-editor .fg-icon:not(#_){display:grid;justify-items:center;gap:2px;min-height:0;padding:4px 6px!important;background:#0000003a!important;border:1px solid #6b4a2a66!important;border-radius:4px;box-shadow:none!important;cursor:pointer}
.forge-editor .fg-icon:not(#_)::before,.forge-editor .fg-icon:not(#_)::after{display:none!important}
.forge-editor .fg-icon:not(#_):hover{border-color:#d8b47a99!important}
.forge-editor .fg-icon .sword-icon{width:32px!important;height:64px!important}
.forge-editor .fg-icon span{font:400 11px var(--tt-ui);color:#cdb98f;text-transform:none;letter-spacing:0}
.forge-editor .fg-namebox{flex:1;min-width:0}
.forge-editor input.fg-title:not(#_){width:100%;padding:4px 6px;background:transparent;border:0;border-bottom:1px solid #6b4a2a99;border-radius:0;font:400 22px var(--tt-display,inherit);color:#f3e2bd}
.forge-editor input.fg-title:not(#_):hover{border-bottom-color:#d8b47a88}
.forge-editor input.fg-title:not(#_):focus{outline:none;border-bottom-color:var(--gold);background:#0000002a}
.forge-editor input.fg-title::placeholder{color:#8a7558}
.forge-editor .fg-look-list{margin:8px 0 4px}
/* paint swatches keep the pieces' real shape (2:3), not squashed squares */
.forge-editor .pattern-palette .swatch:not(#_){width:36px!important;height:54px!important;min-width:0;min-height:0;aspect-ratio:2/3;padding:0!important;background-size:100% 100%!important}
@media(min-width:900px){.room-heading.forge-heading:not(#_){margin-bottom:-34px;position:relative;z-index:1;pointer-events:none;width:max-content}}
.forge-editor input.fg-title.bad:not(#_){border-bottom-color:#c0392b;color:#ffb39a}
/* Settings → Side panel size: the panels beside the boards shrink; the boards keep their size */
body[data-hud=compact] :is(.match-grid>.match-loadout,.match-grid>.match-notes,.ol-rail,.rogue-rail,.rogue-sidebar){zoom:.82}
body[data-hud=small] :is(.match-grid>.match-loadout,.match-grid>.match-notes,.ol-rail,.rogue-rail,.rogue-sidebar){zoom:.66}
/* small, quiet text actions on a pause card (Adventure's End run), styled like Report a problem */
.pause-card .pause-quiet:not(#_):not(#_){display:block;margin:12px auto 0;padding:0;min-height:0;width:auto;background:none!important;border:0!important;box-shadow:none!important;font:400 12px/1.4 var(--tt-ui)!important;letter-spacing:0!important;text-transform:none!important;color:#b08a6a!important;opacity:.85;text-decoration:underline;text-underline-offset:2px;text-shadow:none!important}
.pause-card .pause-quiet:not(#_):not(#_)::before,.pause-card .pause-quiet:not(#_):not(#_)::after{display:none!important}
.pause-card .pause-quiet:not(#_):not(#_):hover{opacity:1;color:#ff9d8a!important}

/* rival board view in Adventure fights */
body:is([data-rival-view=mini],[data-rival-view=tiny]) .rogue-playfield.duel{position:relative;justify-content:center}
body:is([data-rival-view=mini],[data-rival-view=tiny]) .rogue-playfield.duel>.rogue-opponent{position:absolute;top:0;left:calc(50% + var(--fit-w,240px)/2 + 16px);transform-origin:top left}
body[data-rival-view=mini] .rogue-playfield.duel>.rogue-opponent{transform:scale(.32)}
body[data-rival-view=tiny] .rogue-playfield.duel>.rogue-opponent{transform:scale(.2)}
body[data-rival-view=hidden] .rogue-playfield.duel>.rogue-opponent{display:none!important}
body:is([data-rival-view=hidden]) .rogue-playfield.duel{justify-content:center}
/* online lobby: your name sits quietly in the corner; the blade is the main choice */
.ol-heading:not(#_){position:relative}
.ol-name.ol-name-side:not(#_){position:absolute;right:0;top:4px;flex-direction:row;align-items:center;gap:8px;opacity:.8}
.ol-name.ol-name-side:not(#_):hover,.ol-name.ol-name-side:not(#_):focus-within{opacity:1}
.ol-name-side small{font:400 10px var(--tt-ui);letter-spacing:.12em;color:#a8916a}
.ol-name-side input:not(#_):not(#_){font:400 14px var(--tt-ui)!important;width:150px;padding:4px 8px!important;border-width:1px!important;background:#0d080799!important}
.ol-you:not(#_):not(#_):has(>.ol-blade-name:first-child){grid-template-columns:auto auto;justify-content:center;min-width:0;width:max-content;margin-left:auto;margin-right:auto;padding:10px 26px}
@media(max-width:640px){.ol-name.ol-name-side:not(#_){position:static;margin-top:8px;justify-content:center}}
/* ranks (dist/ranks.js): a small coloured chip after a name; your own rank above the leaderboard */
.ol-rank{display:inline-block;margin-left:8px;padding:1px 6px;font:400 10px/1.4 var(--tt-ui);font-style:normal;letter-spacing:.04em;color:var(--rank,#cdb98f);border:1px solid color-mix(in srgb,var(--rank,#cdb98f) 55%,transparent);background:color-mix(in srgb,var(--rank,#cdb98f) 12%,transparent);vertical-align:middle;white-space:nowrap}
.ol-mine-rank{text-align:center;margin:0 0 8px;font:400 13px var(--tt-ui);color:#e8d8b4}.ol-mine-rank .ol-rank{margin:0 6px 0 0;font-size:12px}
.ol-ranks li.placing{opacity:.7}
.ol-private{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 14px;background:#0d080788;border:1px solid #4a2f16}
.ol-private>span{font:400 12px var(--tt-ui);color:#a8916a}
.ol-record:not(#_){display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.ol-record span{white-space:nowrap}
/* Forge: "New blade" is an empty slot at the top of your patterns, the first thing you see */
.pattern-library #new-pattern.fg-new:not(#_):not(#_){display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:6px 0 14px;padding:10px 14px!important;text-align:left;background:#d8b47a14!important;border:2px dashed #d8b47a99!important;border-radius:6px;box-shadow:none!important;text-shadow:none!important;cursor:pointer;color:var(--gold)!important;font:400 18px var(--tt-display,var(--tt-ui))!important}
.pattern-library #new-pattern.fg-new:not(#_):not(#_)::before,.pattern-library #new-pattern.fg-new:not(#_):not(#_)::after{display:none!important}
.pattern-library #new-pattern.fg-new b{display:grid;place-items:center;width:40px;height:40px;flex:none;border:2px solid #d8b47a;border-radius:50%;font:400 26px/1 var(--tt-ui);color:var(--gold)}
.pattern-library #new-pattern.fg-new span{display:flex;flex-direction:column;gap:2px}
.pattern-library #new-pattern.fg-new small{font:400 11px var(--tt-ui);color:#cdb98f;letter-spacing:0}
.pattern-library #new-pattern.fg-new:not(#_):not(#_):hover{background:#d8b47a2a!important;border-color:var(--gold)!important;border-style:solid!important}
/* Forge: Save & equip and Equip sit together, centred, on one line */
.forge-editor .editor-actions:not(#_):not(#_){display:flex!important;grid-template-columns:none!important;justify-content:center;align-items:center;gap:28px;margin-top:4px}
.forge-editor .editor-actions:not(#_):not(#_)>button{width:auto!important;margin:0!important;flex:none}
.forge-editor .fg-share:not(#_){text-align:center}
.forge-editor .pattern-palette:not(#_):not(#_){display:flex;justify-content:center;align-items:center;gap:12px;padding:5px 0}
.forge-editor .fg-tools:not(#_){justify-content:center}
/* Forge: Duplicate / Delete / More centred like the rows above, More as plain text like its neighbours */
.forge-editor .fg-more:not(#_):not(#_){display:flex;justify-content:center;align-items:center;gap:22px}
.forge-editor .fg-more>button:not(#_){margin:0!important}
.forge-editor .fg-more .pattern-more>summary:not(#_):not(#_){background:none!important;border:0!important;box-shadow:none!important;padding:4px 6px!important;min-height:0;font:inherit;font-size:15px;color:#e8d8b4;list-style:none;cursor:pointer}
.forge-editor .fg-more .pattern-more>summary:not(#_):not(#_):hover{color:var(--gold)}
.forge-editor .fg-more .pattern-more>summary::-webkit-details-marker{display:none}
/* ---------- player cards (profile-card.js) ---------- */
.ol-who:not(#_):not(#_){all:unset;cursor:pointer;color:inherit;font:inherit;border-bottom:1px dotted #d8b47a66}
.ol-who:not(#_):not(#_):hover{color:var(--gold);border-bottom-color:var(--gold)}
.ol-me:not(#_):not(#_){display:flex;align-items:center;gap:10px;min-height:0;padding:4px 14px 4px 4px!important;background:none!important;border:0!important;border-right:1px solid #4a2f16!important;border-radius:0;box-shadow:none!important;text-shadow:none!important;text-align:left;cursor:pointer}
.ol-me:not(#_):not(#_)::before,.ol-me:not(#_):not(#_)::after{display:none!important}
.ol-me span{display:flex;flex-direction:column;gap:1px}
.ol-me strong{font:600 17px var(--tt-ui);color:var(--parchment)}
.ol-me i{font:400 11px var(--tt-ui);color:var(--gold);font-style:normal;letter-spacing:.06em}
.ol-me small{font:400 11px var(--tt-ui)!important;color:#cdb98f!important;letter-spacing:0!important}
.ol-me:hover strong{color:var(--gold)}
.ol-you:not(#_):not(#_):has(>.ol-me){grid-template-columns:auto auto auto;justify-content:center;width:max-content;min-width:0;margin-left:auto;margin-right:auto;gap:18px}
.rank-badge{display:inline-block;vertical-align:middle;flex:none;image-rendering:pixelated}
.pc-sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#0008;padding:16px}
.pc-panel{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:#140c08;border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807,0 18px 40px #000c;padding:18px 20px}
.pc-close:not(#_):not(#_){position:absolute;top:6px;right:8px;min-height:0;padding:2px 8px!important;background:none!important;border:0!important;box-shadow:none!important;font:400 22px var(--tt-ui);color:#a8916a;cursor:pointer}
.pc-close:not(#_):not(#_)::before,.pc-close:not(#_):not(#_)::after{display:none!important}
.pc-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.pc-sword .sword-icon{width:36px;height:72px;display:block}
.pc-head h2{margin:0;font:400 24px var(--tt-display,var(--tt-ui));color:#f3e2bd}
.pc-title{margin:2px 0 0;font:400 12px var(--tt-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pc-title.pc-none{color:#8a7558}
.pc-status{margin:4px 0 0;font:400 11px var(--tt-ui);color:#a8916a}
.pc-status.on::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;background:#5fd068;border-radius:50%;vertical-align:1px}
.pc-ranks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.pc-rank{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 10px;background:#0d080799;border:1px solid #4a2f16;border-left:3px solid var(--rank,#4a2f16)}
.pc-rank>small{grid-column:1/-1;font:400 9px var(--tt-ui);letter-spacing:.16em;color:#a8916a;margin-bottom:4px}
.pc-rank span{display:flex;flex-direction:column}
.pc-rank strong{font:600 14px var(--tt-ui);color:var(--rank,#cdb98f)}
.pc-rank em{font:400 11px var(--tt-ui);font-style:normal;color:#cdb98f}
.pc-unranked strong{color:#8a7558}
.pc-h2h{margin:0 0 10px;font:400 13px var(--tt-ui);color:#e8d8b4}
.pc-h2h b{color:var(--gold)}
.pc-sub{margin:12px 0 6px;font:400 10px var(--tt-ui);letter-spacing:.16em;color:var(--gold)}
.pc-sub i{font-style:normal;letter-spacing:0;color:#8a7558;margin-left:6px;text-transform:none}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;margin:0}
.pc-stats div{display:flex;flex-direction:column}
.pc-stats dt{font:400 10px var(--tt-ui);color:#a8916a}
.pc-stats dd{margin:0;font:600 15px var(--tt-ui);color:#f3e2bd}
.pc-blade>div{display:flex;align-items:center;gap:10px}
.pc-blade .pattern-thumb{width:54px}
.pc-blade strong{font:600 15px var(--tt-ui);color:#f3e2bd}
.pc-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.pc-pick>span{font:400 10px var(--tt-ui);letter-spacing:.16em;color:var(--gold)}
.pc-pick select{font:400 14px var(--tt-ui);padding:4px 8px;background:#0d0807;color:var(--parchment);border:1px solid #4a2f16}
.pc-pick small{font:400 11px var(--tt-ui);color:#8a7558}
.pc-missing p{color:#cdb98f;font:400 14px var(--tt-ui)}
@media(max-width:520px){.pc-stats{grid-template-columns:repeat(2,1fr)}.pc-ranks{grid-template-columns:1fr}}
/* leaderboards: the top of each mode side by side */
.lb-boards{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
@media(max-width:760px){.lb-boards{grid-template-columns:1fr}}
.lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.lb-list li{display:grid;grid-template-columns:24px auto 1fr auto auto;align-items:center;gap:8px;padding:5px 10px;background:#0d080799;border:1px solid #2a1a10;border-left:3px solid var(--rank,#4a2f16)}
.lb-list li.you{background:#d8b47a1c;border-color:#6b4a22}
.lb-list li.placing{opacity:.75}
.lb-list li.podium{background:linear-gradient(90deg,#d8b47a22,#0d080799 60%)}
.lb-list li.p1 .lb-pos{color:#ffe08a}.lb-list li.p2 .lb-pos{color:#d6dbe4}.lb-list li.p3 .lb-pos{color:#d79a5e}
.lb-pos{font:600 14px var(--tt-ui);color:#a8916a;text-align:center}
.lb-name{display:flex;flex-direction:column;min-width:0;font:600 14px var(--tt-ui);color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name small{font:400 10px var(--tt-ui);color:var(--rank,#a8916a)}
.lb-name em{font:400 10px var(--tt-ui);color:var(--gold);font-style:normal}
.lb-list b{font:600 15px var(--tt-ui);color:#f3e2bd}
.lb-wl{font:400 11px var(--tt-ui);color:#a8916a;min-width:42px;text-align:right}
.lb-list li.lb-gap{display:block;text-align:center;background:none;border:0;color:#6b4a22;padding:0;line-height:1}
.ol-board:not(#_):has(.lb-boards){width:min(880px,94vw);max-width:none;margin-left:calc(50% - min(440px,47vw));margin-right:calc(50% - min(440px,47vw))}
.lb-col{min-width:0}
.lb-col>.ol-sub{text-align:left}
.lb-col>.ol-sub{padding-left:4px}
.pc-modes{width:100%;border-collapse:collapse;font:400 12px var(--tt-ui);color:#e8d8b4}
.pc-modes th,.pc-modes td{padding:4px 6px;text-align:right;border-bottom:1px solid #2a1a10}
.pc-modes thead th{font-size:10px;color:#a8916a;font-weight:400}
.pc-modes tbody th{text-align:left;font-weight:600;color:#f3e2bd}
/* portraits (portraits.js): a 60x71 picture inside the 98x107 gilt frame */
.portrait{position:relative;display:inline-block;aspect-ratio:60/71;flex:none;image-rendering:pixelated}
.portrait img{position:absolute;image-rendering:pixelated}
.portrait .portrait-in{inset:0;width:100%;height:100%;border-radius:3px}
/* ---------- profiles (profile-card.js) ---------- */
.pc-panel.pf-panel,.pc-panel.hall-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--fit,1));max-width:none;max-height:none;overflow:hidden;display:flex;flex-direction:column;padding:20px 22px 22px}
.pf-host,.pf,.pl-host,.pl{flex:1;min-height:0;display:flex;flex-direction:column}
.pf>:not(.pf-body),.pl>:not(.pl-body),.pl-panel>.pl-head{flex:none}
.pf-body,.pl-body{flex:1;min-height:0;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#6b4a22 transparent}
.pf-panel.tall .pf-head{grid-template-columns:auto 1fr}.pf-panel.tall .pf-ratings{grid-column:1/-1}.pf-panel.tall .pf-over{grid-template-columns:1fr}.pf-panel.tall .pf-best{width:auto}
.pf-panel.tall .pf-noclip,.pf-panel.tall .pf-clip-canvas{width:96px}
.pf-ic{width:28px;height:28px;image-rendering:pixelated;flex:none}
.pf-head{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding-bottom:14px;border-bottom:1px solid #4a2f16}
.pf-id h2{margin:0;font:400 28px var(--tt-display,var(--tt-ui));color:#f3e2bd;line-height:1.1}
.pf-title{margin:4px 0 0;font:400 12px var(--tt-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pf-status{margin:6px 0 0;font:400 12px var(--tt-ui);color:#a8916a}
.pf-status.on::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;background:#5fd068;border-radius:50%;vertical-align:1px}
.pf-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pf-btn:not(#_):not(#_),.pf-view-acts button:not(#_):not(#_){display:inline-flex;align-items:center;gap:6px;min-height:0;padding:5px 12px!important;font:400 13px var(--tt-ui)!important;color:#f3e2bd!important;background:#0d0807b3!important;border:1px solid #6b4a22!important;border-radius:3px;box-shadow:none!important;text-shadow:none!important;cursor:pointer}
.pf-btn:not(#_):not(#_)::before,.pf-btn:not(#_):not(#_)::after,.pf-view-acts button:not(#_):not(#_)::before,.pf-view-acts button:not(#_):not(#_)::after{display:none!important}
.pf-btn:not(#_):not(#_):hover,.pf-view-acts button:not(#_):not(#_):hover{border-color:var(--gold)!important;color:var(--gold)!important}
.pf-btn .pf-ic{width:18px;height:18px}
.pf-ratings{display:flex;gap:10px}
.pf-rating{display:flex;flex-direction:column;align-items:center;min-width:104px;padding:8px 10px;background:#0d080799;border:1px solid #4a2f16}
.pf-rating small{font:400 9px var(--tt-ui);letter-spacing:.16em;color:#a8916a}
.pf-rating b{font:400 32px var(--tt-display,var(--tt-ui));color:var(--gold);line-height:1.1}
.pf-rating em{font:400 11px var(--tt-ui);font-style:normal;color:#cdb98f}
.pf-rating.none b{color:#6b4a22}
.pf-tabs{display:flex;gap:4px;margin:12px 0 14px}
.pf-tabs button:not(#_):not(#_){min-height:0;padding:6px 14px!important;font:400 14px var(--tt-ui)!important;color:#cdb98f!important;background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0;box-shadow:none!important;text-shadow:none!important;cursor:pointer}
.pf-tabs button:not(#_):not(#_)::before,.pf-tabs button:not(#_):not(#_)::after{display:none!important}
.pf-tabs button.on:not(#_):not(#_){color:var(--gold)!important;border-bottom-color:var(--gold)!important}
.pf-sub{margin:14px 0 8px;font:400 10px var(--tt-ui);letter-spacing:.16em;color:var(--gold)}
.pf-sub:first-child{margin-top:0}
.pf-sub i{font-style:normal;letter-spacing:0;color:#8a7558;margin-left:6px}
.pf-over{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.pf-best{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px}
.pf-clip-canvas{display:block;width:140px;aspect-ratio:4/13;background:#050307;border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807}
.pf-best p,.pf-viewer p{margin:0;text-align:center;display:flex;flex-direction:column;font:400 14px var(--tt-ui);color:#f3e2bd}
.pf-best small,.pf-viewer small{font:400 11px var(--tt-ui);color:#a8916a}
.pf-noclip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:140px;aspect-ratio:4/13;border:1px dashed #4a2f16;color:#8a7558;font:400 12px var(--tt-ui);text-align:center}
.pf-noclip .pf-ic{opacity:.5}
.pf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pf-tile{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0d080799;border:1px solid #2a1a10}
.pf-tile span{display:flex;flex-direction:column;min-width:0}
.pf-tile b{font:600 17px var(--tt-ui);color:#f3e2bd}
.pf-tile b i{font-style:normal;font-size:12px;color:#a8916a;font-weight:400}
.pf-tile small{font:400 10px var(--tt-ui);color:#a8916a}
.pf-h2h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:400 14px var(--tt-ui);color:#e8d8b4}
.pf-h2h b{color:var(--gold)}
.pf-h2h .pf-ic{width:22px;height:22px}
.pf-blade{display:flex;align-items:center;gap:10px}
.pf-blade .pattern-thumb:not(#_):not(#_){width:54px;flex:none}
/* the pinned combo: a board no taller than the numbers beside it, so the card fits without scrolling */
.pf-over .pf-best{width:100px}
.pf-main .pf-tiles+.pf-sub{margin-top:8px}.pf-main .pf-tiles+.pf-blade{margin-top:12px}.pf-blade .pf-sub{margin:0 0 4px}
.pf-over .pf-best .pf-clip-canvas:not(#_){width:100px}
.pf-blade strong{font:600 15px var(--tt-ui);color:#f3e2bd}
.pf-blade>span{display:flex;flex-direction:column;gap:2px}.pf-blade small{font:400 12px var(--tt-ui);color:#a8916a}
.pf-modes{width:100%;border-collapse:collapse;font:400 13px var(--tt-ui);color:#e8d8b4}
.pf-modes th,.pf-modes td{padding:5px 8px;text-align:right;border-bottom:1px solid #2a1a10}
.pf-modes thead th{font-size:10px;color:#a8916a;font-weight:400}
.pf-modes tbody th{text-align:left;font-weight:600;color:#f3e2bd}
.pf-empty{margin:4px 0;font:400 13px var(--tt-ui);color:#a8916a}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.pf-cell{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:#0d080799;border:1px solid #2a1a10;cursor:pointer;position:relative}
.pf-cell:hover{border-color:#6b4a22}
.pf-cell.best{border-color:var(--gold)}
.pf-cell canvas{width:62px;aspect-ratio:4/13;display:block}
.pf-cell figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;font:400 12px var(--tt-ui);color:#f3e2bd}
.pf-cell figcaption small{font-size:10px;color:#a8916a}
.pf-cell figcaption i{position:absolute;top:4px;right:4px;font:400 9px var(--tt-ui);font-style:normal;letter-spacing:.1em;color:#140c08;background:var(--gold);padding:1px 4px}
.pf-viewer{display:flex;gap:18px;align-items:flex-start;padding:10px;margin-bottom:6px;background:#0d080766;border:1px solid #4a2f16}
.pf-viewer[hidden]{display:none}
.pf-clip-canvas.pf-again{cursor:pointer}
/* the rival-board line on the pause card: a step down from Resume, a step up from Report a problem */
.pause-card .rv-pause:not(#_):not(#_){font-size:clamp(15px,2.2vmin,20px)!important;margin-top:8px}
.pf-view-side{display:flex;flex-direction:column;gap:10px}
.pf-view-side p{align-items:flex-start;text-align:left}
.pf-view-acts{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pf-portraits{display:flex;flex-wrap:wrap;gap:8px}
.pf-pp:not(#_):not(#_){min-height:0;padding:3px!important;background:none!important;border:2px solid transparent!important;border-radius:3px;box-shadow:none!important;cursor:pointer}
.pf-pp:not(#_):not(#_)::before,.pf-pp:not(#_):not(#_)::after{display:none!important}
.pf-pp.on:not(#_):not(#_){border-color:var(--gold)!important}
.pf-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-pick input{width:min(240px,100%)}
.pf-pick select,.pf-pick input{font:400 14px var(--tt-ui);padding:4px 8px;background:#0d0807;color:var(--parchment);border:1px solid #4a2f16}
/* recovery code: your code (hidden until shown) with Copy, and a box for a code from another device */
.pf-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0}
.pf-code input{width:min(300px,100%);font:400 14px var(--tt-ui);padding:4px 8px;background:#0d0807;color:var(--parchment);border:1px solid #4a2f16;letter-spacing:.04em}
.pf-code-note{margin:2px 0;font:400 12px var(--tt-ui);color:#a8916a}
.pf-watchable:not(#_){justify-content:flex-start;gap:12px;width:auto;margin:4px 0}
.pf-pick small{font:400 11px var(--tt-ui);color:#8a7558}

/* lobby: your portrait on your card; four leaderboards; friends; invites */
.ol-me .portrait{width:44px}
.ol-me small b{color:var(--gold)}
.ol-me sup,.lb-list sup{font-size:9px;color:#a8916a}
.lb-boards:not(#_){grid-template-columns:repeat(2,1fr)}
.lb-list li:not(#_){grid-template-columns:24px 1fr auto}
.ol-friends li{display:flex;align-items:center;gap:10px}
.ol-friends .fr-dot{width:8px;height:8px;border-radius:50%;background:#4a2f16;flex:none}
.ol-friends li.on .fr-dot{background:#5fd068}
.ol-friends li>div{flex:1;display:flex;flex-direction:column}
.ol-invite{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 16px;margin-bottom:10px;background:#d8b47a1f;border:1px solid var(--gold);font:400 15px var(--tt-ui);color:#f3e2bd}
.ol-invite b{color:var(--gold)}
.lb-boards:not(#_){padding:0 4px}

/* who's here (players.js) and the corner notes (social.js) */
.pl-head{margin:0 0 4px;font:400 26px var(--tt-display,var(--tt-ui));color:#f3e2bd}
.pl-tabs{margin:6px 0 10px}
.pl-tabs b{font-weight:400;color:#a8916a;margin-left:4px}
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pl-row{text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:6px 10px 6px 6px;background:#0d080799;border:1px solid #2a1a10;border-left:3px solid #5fd068}
.pl-row.busy{border-left-color:var(--gold)}
.pl-row.off{border-left-color:#4a2f16;opacity:.6}
.pl-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.pl-name:not(#_):not(#_){all:unset;cursor:pointer;font:600 15px var(--tt-ui);color:#f3e2bd;border-bottom:1px dotted #d8b47a66}
.pl-name:not(#_):not(#_):hover,.pl-name:not(#_):not(#_):focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.pl-who em{font:400 11px var(--tt-ui);color:#a8916a}
.pl-friend{font-style:normal;font-size:12px;color:var(--gold)}
.pl-title{font:400 10px var(--tt-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.pl-doing{flex-basis:100%;font:400 12px var(--tt-ui);color:#a8916a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-acts{display:flex;gap:6px}
.so-dock .pl-row{grid-template-columns:auto 1fr}.so-dock .pl-acts{grid-column:2;flex-wrap:wrap}
.so-toast{display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 12px;background:#140c08;border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807,0 10px 24px #000c;font:400 14px var(--tt-ui);color:#e8d8b4}
.so-toast b{color:var(--gold);font-weight:600}
.pl-new{display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;font:600 10px/16px var(--tt-ui)!important;color:#140c08!important;background:var(--gold);border-radius:8px;text-align:center}
.pf-btn.pf-quiet:not(#_):not(#_){color:#a8916a!important;border-color:#4a2f16!important}
.pl-body-chat{overflow:hidden;display:flex}
.pl-chat{flex:1;min-height:0;display:grid;grid-template-columns:132px 1fr;gap:12px}
.pl-threads{list-style:none;margin:0;padding:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;border-right:1px solid #2a1a10;padding-right:8px}
.pl-threads button:not(#_):not(#_){all:unset;box-sizing:border-box;display:block;width:100%;padding:6px 8px;cursor:pointer;font:400 14px var(--tt-ui);color:#cdb98f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid transparent}
.pl-threads button:not(#_):not(#_):hover{color:var(--gold)}
.pl-threads button.on:not(#_):not(#_){color:var(--gold);border-left-color:var(--gold);background:#0d080799}
.pl-convo{min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.pl-convo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding-bottom:6px;border-bottom:1px solid #2a1a10}
.pl-sub{font:400 12px var(--tt-ui);color:#a8916a}
.pl-log{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:6px;font:400 14px/1.35 var(--tt-ui);color:#e8d8b4;scrollbar-width:thin;scrollbar-color:#6b4a22 transparent}
.pl-log li{overflow-wrap:anywhere}
.pl-log time{margin-left:8px;font-size:10px;color:#6b5a44}
.pl-log .pl-name:not(#_):not(#_){font-size:14px}
.pl-log li.mine{align-self:flex-end;text-align:right;max-width:85%;padding:5px 9px;background:#2a1a10;border:1px solid #4a2f16}
.pl-log li.theirs{align-self:flex-start;max-width:85%;padding:5px 9px;background:#0d0807;border:1px solid #2a1a10}
.pl-log li.pl-empty{color:#8a7558;font-size:13px}
.pl-say{display:flex;gap:8px}
.pl-say input{flex:1;min-width:0;font:400 14px var(--tt-ui);padding:7px 9px;background:#0d0807;color:var(--parchment,#f3e2bd);border:1px solid #4a2f16}
.pl-say input:focus{outline:none;border-color:var(--gold)}
.pl-note{margin:0;min-height:14px;font:400 12px var(--tt-ui);color:#d98a6a}
.so-dock .pl-chat{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.so-dock .pl-threads{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #2a1a10;padding:0 0 6px}
.so-dock .pl-threads button:not(#_):not(#_){width:auto;border-left:0;border-bottom:2px solid transparent}
.so-dock .pl-threads button.on:not(#_):not(#_){border-bottom-color:var(--gold)}
#ol-lists .pl-body-chat{height:420px}
/* table chat (online: the room, the watch screen, between rounds) */
.tc{display:flex;flex-direction:column;gap:6px;text-align:left}
.tc-log{height:150px;flex:none;font-size:13px}
.ol-room-chat{width:min(520px,100%);margin:10px auto 0}
.ol-room-chat .tc-log{height:120px}
.ol-end-chat{margin:8px 0 4px}
.ol-end-chat .tc-log{height:90px}
.tc-watcher{margin-left:5px;font:400 10px var(--tt-ui);font-style:normal;color:#8a7558}
#ol-watchers:empty{display:none}
.so-coin{width:18px;height:18px;image-rendering:pixelated;vertical-align:-4px;margin-right:4px}
.pl-head{display:flex;align-items:baseline;justify-content:space-between;padding-right:28px}
.pl-coins{font:600 15px var(--tt-ui);color:var(--gold)}
.pl-coins .so-coin{width:22px;height:22px;vertical-align:-5px}
/* backing a player (watch screen) */
.ol-bet-card{display:flex;flex-direction:column;gap:8px;text-align:left}
.ol-bet-card[hidden]{display:none}
.ol-bet-picks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ol-bet-picks .pf-btn:not(#_):not(#_){flex-direction:column;align-items:flex-start;gap:0;padding:6px 10px!important}
.ol-bet-picks small{font-size:10px;color:#a8916a}
.ol-bet-stakes{display:flex;gap:4px;flex-wrap:wrap}
.ol-bet-stakes .pf-btn:not(#_):not(#_){padding:3px 9px!important}
#ol-bets .pf-btn.on:not(#_):not(#_){border-color:var(--gold)!important;color:var(--gold)!important;background:#2a1a10!important}
#ol-bets .pf-btn:disabled{opacity:.4;cursor:default}
.ol-bet-go:not(#_):not(#_){justify-content:center}
.ol-bet-meta{font:400 12px var(--tt-ui);color:#a8916a}
.ol-bet-line{margin:0;font:400 14px var(--tt-ui);color:#e8d8b4}
.ol-bet-line b{color:var(--gold)}
.ol-bet-side{display:block;font:400 12px var(--tt-ui);color:#a8916a}
/* the player's board size (Settings): modes sized here keep under the same cap as the others (fit-boards.js) */
body[data-board-cap] .challenge-board:not(.mini):not(#_):not(#_):not(#_){max-width:calc(var(--board-cap-w) + 14px)!important}

/* the tavern (dock.js): a button in the bottom-left corner, a panel that opens up from it */
.so-dock{position:fixed;left:0;bottom:0;z-index:60;pointer-events:none}
.so-dock[hidden]{display:none}
/* the corner: your profile, then the tavern */
.so-corner{pointer-events:auto;position:fixed;left:16px;bottom:12px;display:flex;gap:8px;align-items:stretch}
.so-me:not(#_):not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;font:400 14px var(--tt-ui);color:#e8d8b4;background:#140c08e6;border:1px solid #6b4a22;border-radius:4px;max-width:180px}
.so-me span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-me .portrait{border-radius:2px}
.so-me:not(#_):not(#_):hover,.so-me:focus-visible{color:var(--gold);border-color:var(--gold)}.so-me::before,.so-me::after{display:none!important}
.so-dock.so-on-title .so-me:not(#_):not(#_){display:none}
/* on the title, the same size as the tavern pill beside it */
.tt-bl .so-me:not(#_):not(#_){padding:4px 12px 4px 5px;border-width:2px;border-radius:6px;background:#140c08cc;font-size:clamp(12px,1.6vmin,15px);line-height:1.3}
.so-dock-tab:not(#_):not(#_){pointer-events:auto;position:static;display:flex;align-items:center;gap:8px;min-height:0;padding:7px 14px!important;font:400 14px var(--tt-ui)!important;letter-spacing:.04em;color:#e8d8b4!important;background:#140c08e6!important;border:2px solid #6b4a22!important;border-radius:6px;box-shadow:0 6px 18px #0009!important;cursor:pointer}
.so-dock-tab:not(#_):not(#_)::before,.so-dock-tab:not(#_):not(#_)::after{display:none!important}
.so-dock-tab:not(#_):not(#_):hover,.so-dock[data-state=open] .so-dock-tab:not(#_):not(#_){color:var(--gold)!important;border-color:var(--gold)!important}
.so-dock.so-on-title .so-dock-tab:not(#_):not(#_):not(#_){display:none}   /* the title's own "n in the tavern" line opens it there */
.so-dot{width:7px;height:7px;border-radius:50%;background:#5fd068}
.so-unread .so-dot{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.so-dock-panel{pointer-events:auto;position:fixed;left:16px;bottom:58px;width:min(380px,calc(100vw - 32px));height:min(600px,calc(100vh - 120px));display:none;flex-direction:column;padding:14px 16px 16px;background:#140c08;border:2px solid #6b4a22;box-shadow:0 0 0 2px #0d0807,0 18px 40px #000c}
.so-dock.so-on-title .so-dock-panel{bottom:44px}
.so-dock[data-state=open] .so-dock-panel{display:flex}
.so-dock-head{flex:none;display:flex;align-items:baseline;gap:10px;padding-right:28px;margin-bottom:2px}
.so-dock-head h2{margin:0;font:400 22px var(--tt-display,var(--tt-ui));color:#f3e2bd}
.so-dock-head .pl-coins{margin-left:auto}
.so-dock .pl-host{flex:1;min-height:0;display:flex;flex-direction:column}
.so-dock .pl-pp{width:34px!important}
/* the online lobby beside the dock: play on the left, the tables on the right */
.ol-lobby:has(.ol-cols){max-width:1080px}
.ol-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;width:100%;align-items:start}
.ol-col-play{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.ol-col-play .ol-you:not(#_):not(#_){width:auto;min-width:0;max-width:100%}
.ol-board.ol-col-tables:not(#_){width:auto;margin:0;min-width:0}
.ol-col-tables #ol-lists{max-height:calc(100vh - 260px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b4a22 transparent;padding-right:4px}
.ol-col-tables .ol-tabs{justify-content:flex-start;align-items:center}
/* the right column holds still: tables or your table in a panel of fixed height (scrolling inside), the chat card under it */
.ol-col-right{display:flex;flex-direction:column;gap:14px;min-width:0;height:calc(100dvh - 216px);max-height:880px}   /* tables fill what's left and scroll; the chat stays put at the bottom */
.ol-col-right>.ol-board:not(#_){height:auto;flex:1 1 0;min-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b4a22 transparent;padding-right:4px}
.ol-col-right #ol-lists:not(#_){max-height:none;overflow:visible}
.ol-lobby-chat-card:not(#_){width:100%;margin:0;text-align:left;flex:none}
.ol-lobby-chat-card .ol-chat-tabs{justify-content:flex-start;margin-bottom:6px}
.ol-lobby-chat-card .tc-log{height:120px}
.ol-col-room .ol-menu:not(#_){flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 22px}
@media(max-width:900px){.ol-cols{grid-template-columns:1fr}.ol-col-right{height:auto;max-height:none}.ol-col-tables #ol-lists{max-height:none}.ol-col-right>.ol-board:not(#_){height:auto;max-height:420px}}
.hall-panel .pf-tabs{flex:none}
.hall-body{text-align:left}
.hall-body .lb-list{gap:4px}
.hall-note{flex:none;margin:10px 0 0;font:400 12px var(--tt-ui);color:#8a7558}
/* the play column: the two modes side by side, sized to the column */
.ol-col-play .ol-modes{flex-wrap:nowrap;gap:8px;width:100%}
.ol-col-play .pm-diff-item:not(#_){flex:1 1 0;min-width:0;padding:4px .4em}
.ol-col-play .pm-diff-item strong{font-size:22px}
.ol-col-play .pm-diff-item small{font-size:12px;text-align:center}
.ol-col-play .ol-record:not(#_){gap:6px 18px}
.pf-noclip-over:not(#_){grid-template-columns:1fr}
.so-notes{position:fixed;left:16px;bottom:56px;z-index:90;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100vw - 32px);pointer-events:none}
.so-notes .so-toast{pointer-events:auto}
.so-toast-x:not(#_):not(#_){all:unset;cursor:pointer;padding:0 2px;font:400 18px var(--tt-ui);color:#8a7558}
.so-toast-x:not(#_):not(#_):hover{color:var(--gold)}
.pf-report{display:flex;gap:8px;align-items:flex-start;margin-top:8px}
.pf-report[hidden]{display:none}
.pf-report textarea{flex:1;min-width:0;font:400 13px var(--tt-ui);padding:6px 8px;background:#0d0807;color:var(--parchment,#f3e2bd);border:1px solid #4a2f16;resize:none}
.ol-follow b{color:var(--gold)}
/* solo Challenges: the score panel and caption beside the board (as in the free-for-all), so the board gets the
   window's height and follows the player's board size; fit-boards.js sets --fit-w */
@media(min-width:1000px){
  .challenge-arena:not(:has(.challenge-opponents)):not(#_){display:grid!important;grid-template-columns:minmax(220px,300px) auto minmax(220px,300px);grid-template-rows:auto auto 1fr;gap:14px 36px!important;justify-content:center;align-items:start;max-width:none!important}
  .challenge-arena:not(:has(.challenge-opponents))>.challenge-main{display:contents}
  .challenge-arena:not(:has(.challenge-opponents)) .challenge-hud:not(#_){grid-column:1;grid-row:1;display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0!important}
  .challenge-arena:not(:has(.challenge-opponents)) .challenge-stage-caption:not(#_){grid-column:1;grid-row:2;text-align:left!important;margin:0!important}
  .challenge-arena:not(:has(.challenge-opponents)) .challenge-feedback:not(#_){grid-column:1;grid-row:3;text-align:left;margin:0}
  .challenge-arena:not(:has(.challenge-opponents)) .challenge-playfield:not(#_){grid-column:2;grid-row:1/span 3;margin:0!important;width:auto!important}
  .challenge-arena:not(:has(.challenge-opponents)) .challenge-sidebar:not(#_){grid-column:3;grid-row:1/span 3}
  .challenge-arena:not(:has(.challenge-opponents)) .challenge-touch{display:none!important}
}
.challenge-playfield[style*="--fit-w"] .challenge-board:not(.mini):not(#_):not(#_):not(#_){width:var(--fit-w)!important;max-width:none!important;min-width:0!important}
@media(min-width:1000px){
  /* room for the next-pair box, which hangs off the board's left side */
  .challenge-arena:not(:has(.challenge-opponents)):not(#_),.challenge-arena:has(.challenge-opponents):not(#_):not(#_){column-gap:84px!important}
}
/* on the title screen the corner holds Music, Ambience, Night and Settings: notes sit above them */
body.tt-open .so-notes{bottom:56px}

/* ---------- one piece size everywhere outside the boards and next-pair boxes ----------
   Blade thumbnails, pattern panels (duel sides, pause card, sword rack, Play vs AI), palettes, patch notes:
   every piece and breaker is --piece-w × --piece-h. The boards, next-pair boxes and the Forge / Freebuild
   painting grids (editing surfaces) keep their own sizes. Change the size here, once. */
:root{--piece-w:20px;--piece-h:30px;--piece-gap:2px}
.pattern-thumb:not(#_):not(#_):not(#_){grid-template-columns:repeat(var(--cols,6),var(--piece-w))!important;width:max-content!important;max-width:none!important;gap:var(--piece-gap)!important;padding:3px!important}
.pattern-thumb i:not(#_):not(#_):not(#_){width:var(--piece-w)!important;height:var(--piece-h)!important;aspect-ratio:auto!important}
.pattern-preview:not(#_):not(#_):not(#_){grid-template-columns:repeat(6,var(--piece-w))!important;width:max-content!important;max-width:none!important;gap:var(--piece-gap)!important;margin-left:auto;margin-right:auto}
.pattern-preview .pattern-cell:not(#_):not(#_):not(#_){width:var(--piece-w)!important;height:var(--piece-h)!important;min-width:0!important;aspect-ratio:auto!important;background-size:100% 100%!important}
.pn-tile:not(#_):not(#_){width:var(--piece-w)!important;height:var(--piece-h)!important}
/* palettes: a piece-sized picture on a button with a little room around it */
.swatch:not(#_):not(#_):not(#_),.fb-palette .fb-colour:not(#_):not(#_):not(#_){width:calc(var(--piece-w) + 10px)!important;height:calc(var(--piece-h) + 10px)!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;padding:0!important;background-size:var(--piece-w) var(--piece-h)!important;background-position:center!important;background-repeat:no-repeat!important}
.fb-palette:not(#_){grid-template-columns:repeat(4,calc(var(--piece-w) + 10px))!important}
/* Freebuild's toolbox: bigger pieces, easy to pick */
.fb-palette{--fb-w:36px;--fb-h:54px}
.fb-palette .fb-colour:not(#_):not(#_):not(#_):not(#_){width:calc(var(--fb-w) + 10px)!important;height:calc(var(--fb-h) + 10px)!important;background-size:var(--fb-w) var(--fb-h)!important}
.fb-palette:not(#_):not(#_){grid-template-columns:repeat(4,calc(var(--fb-w) + 10px))!important}
/* except the Forge's blade list, which keeps its small thumbnails, two blades to a row */
.pattern-library .pattern-thumb:not(#_):not(#_):not(#_):not(#_){grid-template-columns:repeat(var(--cols,6),1fr)!important;width:40px!important;gap:1px!important}
.pattern-library .pattern-thumb i:not(#_):not(#_):not(#_):not(#_){width:auto!important;height:auto!important;aspect-ratio:2/3!important}
/* the Hall of Honour, under the play buttons */
.ol-hall-btn:not(#_):not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;width:min(420px,100%);padding:10px 18px;background:linear-gradient(180deg,#2a1a0ee6,#140c08e6);border:2px solid #8a5a26;border-radius:6px;box-shadow:0 0 0 2px #0d0807,0 8px 20px #0008;text-align:left}
.ol-hall-btn:not(#_):not(#_):hover,.ol-hall-btn:not(#_):not(#_):focus-visible{border-color:var(--gold);box-shadow:0 0 0 2px #0d0807,0 0 14px #d8b47a55}
/* names, list rows, tabs and closers in the social screens are links and cards, not menu lines: no diamond markers
   (several are all:unset, so the markers were placed against the whole list and showed at its edges) */
:is(.ol-who,.pl-name,.pl-threads button,.so-dock-tab,.so-dock-close,.so-toast-x,.pf-pp,.pc-close,.hall-panel [role=tab],.pl-panel [role=tab]):not(#_):not(#_)::before,
:is(.ol-who,.pl-name,.pl-threads button,.so-dock-tab,.so-dock-close,.so-toast-x,.pf-pp,.pc-close,.hall-panel [role=tab],.pl-panel [role=tab]):not(#_):not(#_)::after{display:none!important}
/* a card, not a menu line: no diamond markers (with all:unset they were placed against the whole lobby and floated off to its edges) */
.ol-hall-btn:not(#_):not(#_){position:relative}.ol-hall-btn:not(#_):not(#_)::before,.ol-hall-btn:not(#_):not(#_)::after{display:none!important}
.ol-hall-btn img{width:44px;height:44px;image-rendering:pixelated;flex:none}
.ol-hall-btn span{display:flex;flex-direction:column;gap:2px}
.ol-hall-btn b{font:400 22px var(--tt-display,var(--tt-ui));color:var(--gold);text-shadow:var(--px-o1)}
.ol-hall-btn small{font:400 12px var(--tt-ui);color:#cdb98f}

/* Adventure is test-build only for now (scrapsTesting): its top-bar link stays hidden on the live site */
body:not([data-testing]) .nav-button[data-view=solo]{display:none!important}

/* Freebuild: Clear is a plain red button (no menu diamonds); what was wasted reads quieter than the totals */
.fb-clear:not(#_)::before,.fb-clear:not(#_)::after{display:none!important}
.fb-waste{margin:-2px 0 6px;font:400 13px var(--tt-ui);color:#d9a07a}.fb-waste b{color:inherit}
/* online lobby: your table (Quick match uses it; Set table changes it) */
.ol-table-sum{margin:-4px 0 2px;text-align:center;font:400 12px var(--tt-ui);color:#a8916a;letter-spacing:.04em}
.ol-set{display:flex;flex-direction:column;gap:8px;padding:10px 14px;background:#0d080788;border:1px solid #4a2f16}
.ol-set-row{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:10px}
.ol-set-row>small{font:600 11px var(--tt-ui);letter-spacing:.14em;color:#a8916a}
.ol-seg{display:flex;flex-wrap:wrap;gap:4px}
.ol-seg button:not(#_):not(#_),.ol-ai-add:not(#_):not(#_),.ol-ai-chip button:not(#_):not(#_){all:unset;box-sizing:border-box;cursor:pointer;padding:3px 10px;font:400 14px var(--tt-ui);color:#d8c49c;border:1px solid #4a2f16;border-radius:3px;background:#140c08}
.ol-seg button.on:not(#_):not(#_){color:var(--gold);border-color:#8a6c44;background:#2a1a0e}
.ol-seg button:not(#_):not(#_):hover,.ol-ai-add:not(#_):not(#_):hover{color:var(--gold);border-color:#8a6c44}
.ol-seg button:focus-visible,.ol-ai-add:focus-visible,.ol-ai-chip button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.ol-ai{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:inherit}
.ol-ai-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 2px 1px 8px;font:400 14px var(--tt-ui);color:var(--parchment);border:1px solid #6b4a22;border-radius:3px;background:#2a1a0e}
.ol-ai-chip button:not(#_):not(#_){padding:0 6px;border:0;background:none}
.ol-seg button:not(#_)::before,.ol-seg button:not(#_)::after,.ol-ai-add:not(#_)::before,.ol-ai-add:not(#_)::after,.ol-ai-chip button:not(#_)::before,.ol-ai-chip button:not(#_)::after,.ol-put:not(#_)::before,.ol-put:not(#_)::after{display:none!important}
.ol-put:not(#_){align-self:center;margin-top:2px}
.ol-room .ol-ai{justify-content:center}
.ol-ai-row small{color:#a8916a}
.ol-series{margin:0 0 8px;text-align:center;font:400 15px var(--tt-ui);color:var(--parchment)}.ol-series b{color:var(--gold)}

/* Settings: a quiet link to the privacy page, top right of the panel */
.settings-privacy{position:absolute;top:18px;right:56px;margin:0;font:400 12px var(--tt-ui)}.settings-privacy a{color:#a8916a}.settings-privacy a:hover{color:var(--gold)}
/* the replay player: play and pause, a timeline with the highlights marked, the time, speeds; highlights to jump to */
.rp-bar{display:flex;align-items:center;gap:10px;margin:10px auto 0;max-width:min(100%,720px);padding:6px 10px;background:linear-gradient(180deg,#1c120cec,#120b08ee);border:1px solid #6e4419;border-radius:0;box-shadow:0 0 0 2px #0d0807,inset 0 2px 0 #f0cf7a14}
.rp-bar button:not(#_):not(#_),.rp-highlights button:not(#_):not(#_){all:unset;box-sizing:border-box;cursor:pointer;font:400 14px var(--tt-ui);color:#d8c49c}
.rp-bar button:not(#_)::before,.rp-bar button:not(#_)::after,.rp-highlights button:not(#_)::before,.rp-highlights button:not(#_)::after{display:none!important}
.rp-play:not(#_):not(#_){width:40px;height:40px;flex:none;display:grid;place-items:center;font-size:20px;color:var(--gold);border:2px solid #8a6c44;border-radius:0;background:#2a1a0e}
/* the bar's unset buttons leave play/pause only as big as its glyph: a full-size hit area around it, nothing drawn */
/* play/pause: no button diamonds; a wider invisible hit area round it */
.rp-bar .rp-play:not(#_):not(#_){position:relative}.rp-bar .rp-play:not(#_):not(#_)::before{display:none!important}
.rp-bar .rp-play:not(#_):not(#_)::after{display:block!important;content:""!important;position:absolute!important;inset:-6px -11px!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important;width:auto!important;height:auto!important;margin:0!important}
.rp-play:hover,.rp-play:focus-visible{border-color:var(--gold)}
.rp-track{position:relative;flex:1;min-width:80px;display:flex;align-items:center}
.rp-track input{width:100%;margin:0;accent-color:#d8b47a;cursor:pointer}
.rp-mark{position:absolute;top:-6px;width:6px;height:6px;margin-left:-3px;background:var(--gold);transform:rotate(45deg);pointer-events:none;box-shadow:0 0 0 1px #0d0807}
.rp-time{font:400 13px var(--tt-ui);color:#cdb98f;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-speeds{display:flex;gap:2px}
.rp-speeds button:not(#_):not(#_){padding:2px 6px;border:1px solid transparent;border-radius:0;font-size:13px}
.rp-speeds button.on:not(#_):not(#_){color:var(--gold);border-color:var(--gold-mid);background:#2a1a0e}
.rp-speeds button:not(#_):not(#_):hover{color:var(--gold)}
.rp-highlights{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:8px auto 0;max-width:min(100%,720px)}
.rp-highlights>span{font:600 11px var(--tt-ui);letter-spacing:.14em;color:#a8916a;margin-right:4px}
.rp-highlights button:not(#_):not(#_){padding:3px 9px;border:1px solid #4a2f16;border-radius:3px;background:#140c08}
.rp-highlights button:not(#_):not(#_):hover{color:var(--gold);border-color:#8a6c44}
.rp-highlights small{color:#a8916a;font-size:11px}
@media (max-width:640px){.rp-bar{flex-wrap:wrap}.rp-track{order:3;flex-basis:100%}}

/* watching someone's solo game: their board large, their rival's small beside it */
.sw-view{position:fixed;inset:0;z-index:1000;background:#0a0605f2;display:flex;flex-direction:column;align-items:center;padding:12px 16px;gap:10px;font-family:var(--tt-ui)}
.sw-top{width:min(720px,100%);display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-size:16px}
.sw-close:not(#_):not(#_){min-height:0;padding:4px 14px!important;font:400 15px var(--tt-ui)!important}
.sw-close:not(#_):not(#_)::before,.sw-close:not(#_):not(#_)::after{display:none!important}
.sw-boards{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;gap:18px}
.sw-boards figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.sw-boards figcaption{color:#e8dcc0;font-size:14px}
.sw-row{display:flex;align-items:flex-start;gap:8px}
.sw-me .sw-board{height:min(calc(100dvh - 120px),640px);aspect-ratio:4/13;background:#050307;border:2px solid #6b4a22}
.sw-rival .sw-board{height:min(calc((100dvh - 120px)*.45),300px);aspect-ratio:4/13;background:#050307;border:2px solid #6b4a22}
.sw-next{width:28px;height:84px;background:#050307;border:2px solid #6b4a22}
.sw-note{margin:0;color:#a8916a;font-size:14px;min-height:1.2em}

/* Choose colours: every pattern a blade's guard and grip can give, small, to click */
.cp-open:not(#_):not(#_){display:block;margin:2px auto 8px;min-height:0;padding:2px 8px!important;font:400 12px var(--tt-ui)!important;color:#cdb98f!important;background:none!important;border:0!important;text-decoration:underline;text-underline-offset:3px}
.cp-open:not(#_):not(#_):hover{color:var(--gold)!important}
.cp-open:not(#_):not(#_)::before,.cp-open:not(#_):not(#_)::after{display:none!important}
.cp-preview{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 14px}
.cp-side{display:flex;flex-direction:column;gap:8px}
.cp-drops{display:flex;justify-content:center;gap:10px;margin:0 0 12px}.cp-drops label{display:flex;flex-direction:column;gap:3px;margin:0}.cp-drops .cp-select:not(#_){display:block;min-width:104px;height:32px;padding:0 8px;font:400 14px var(--tt-ui);color:var(--parchment);background:#140c08;border:2px solid #6b4a22;border-radius:0;cursor:pointer}   /* real dropdowns here, not ‹ › cyclers */
.cp-drops .cp-select:not(#_):hover,.cp-drops .cp-select:not(#_):focus{border-color:var(--gold);outline:none}
.cp-drops .cp-select option{background:#140c08;color:var(--parchment)}
.cp-mirror:not(#_):not(#_){min-height:0;padding:4px 12px!important;font:400 13px var(--tt-ui)!important;background:#0d080799!important;border:2px solid #5a391b!important}
.cp-mirror.on:not(#_):not(#_){border-color:var(--gold)!important;color:var(--gold)!important}
.cp-mirror:not(#_):not(#_)::before,.cp-mirror:not(#_):not(#_)::after{display:none!important}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;max-height:min(40vh,320px);overflow-y:auto;padding:2px}
.cp-choice:not(#_):not(#_){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0;padding:6px!important;background:#0d080799!important;border:2px solid #5a391b!important;font:400 11px var(--tt-ui)!important}
.cp-choice:not(#_):not(#_):hover{border-color:#8a5a26!important}
.cp-choice.selected:not(#_):not(#_){border-color:var(--gold)!important;background:linear-gradient(180deg,#7d1b2044,#0d080766)!important}
.cp-choice:not(#_):not(#_)::before,.cp-choice:not(#_):not(#_)::after{display:none!important}
.cp-strip{display:flex;gap:1px}
.cp-strip i{display:block;width:14px;height:21px;background:center/100% 100% no-repeat;image-rendering:pixelated}

/* a board capped smaller than Fit (Settings: board size): the play area sits in the middle of the screen, not at the top */
body[data-board-cap] #app:has(>:is(.match-grid,.challenge-arena,.ol-stage)),body[data-board-cap] #app:has(>.rogue-layout .rogue-arena){display:flex;flex-direction:column;min-height:calc(100dvh - var(--app-top,40px))}
body[data-board-cap] #app>.game-heading:not(#_):not(#_){margin-top:auto!important}   /* the clock and buttons stay with the board */
body[data-board-cap] #app>:is(.match-grid,.challenge-arena,.ol-stage,.rogue-layout):not(#_):not(#_){margin-top:0;margin-bottom:auto}

/* Freebuild: try a piece set on the board, then keep it */
.fb-pieces{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid #4a2f16}
.fb-pieces .eyebrow{margin:0}
.fb-pieces label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.fb-pieces select{min-width:110px}
.fb-pieces #fb-pieces-save:not(#_){margin-top:4px;font-size:14px!important;padding:4px 10px!important}

/* an online table about to start, and the calmer count-in that follows it */
.ol-starting{margin:6px 0 2px;text-align:center;font:600 22px var(--tt-ui);color:var(--gold);text-shadow:var(--px-o1)}
.ol-players .ol-kick:not(#_){min-height:0;margin:0;padding:2px 8px!important;font-size:12px!important;color:#ffb39a!important}
.count-in.calm:not(#_){font-size:56px!important;opacity:.85;animation:none;text-shadow:0 3px 0 var(--crimson),var(--px-outline)}
/* Play vs AI setup on one screen: on shorter windows the VS, the swords, their names and the gaps shrink with the
   height, and the key guide (How to play has it) steps aside */
@media (min-width:901px){
 .pm-vs{font-size:clamp(40px,8.5vh,88px);margin-bottom:clamp(2px,1.2vh,14px)}
 .pm-center{padding-top:clamp(0px,2.5vh,30px)}
 .pm-sword:not(#_){width:clamp(80px,13vh,130px);height:clamp(130px,23vh,230px)}
 .pm-sword .sword-icon{width:clamp(64px,11.3vh,112px);height:clamp(128px,22.6vh,224px)}
 #app .pm-name{font-size:clamp(20px,3.3vh,28px);margin-bottom:clamp(4px,1.2vh,12px)}
 .pm-rung:not(#_){padding:clamp(1px,.4vh,4px) 8px}
 #start-duel:not(#_){font-size:clamp(22px,3.6vh,30px);margin-top:clamp(4px,1.2vh,12px)}
 .pm-side{--pm-h:calc(100dvh - 170px - 46vh)}
 .pm-side:has(.enamel-controls){--pm-h:calc(100dvh - 230px - 46vh)}
}
@media (min-width:901px) and (max-height:900px){body:has(#app .pm-versus) .control-guide{display:none}body:has(#app .pm-versus) #app{padding-bottom:4px!important}#app .pm-heading{margin-bottom:clamp(2px,1.2vh,20px)}}
@media (min-width:901px) and (max-height:700px){.pm-rung:not(#_){grid-template-columns:auto 1fr auto;grid-template-rows:auto}.pm-rung small{grid-column:2;grid-row:1;align-self:baseline}.pm-rung b{align-self:baseline}.pm-rung em{grid-column:3;grid-row:1}}
/* keep a replay: a kept one is never dropped to make room */
.replay-keep:not(#_){min-width:0;padding:2px 8px;font:400 24px/1 system-ui,sans-serif;color:#8a7458;background:none;border:0;box-shadow:none}
.replay-keep.on:not(#_),.replay-keep:hover:not(#_){color:var(--gold)}

/* The Sword Rack, compact: every blade on one screen. Small cards, the sword (vector art, sharp at any size) beside
   its name and attack pattern, grouped Favourites / Blades / Your patterns. Done is a green tick at the top right,
   where the eye and hand already are; close moves to the top left so the two never meet */
#modal:has(.sword-picker.compact){max-width:min(1120px,96vw);width:min(1120px,96vw)}
#modal:has(.sword-picker.compact) .modal-close:not(#_){right:auto;left:14px}
.sword-picker.compact>h2{font-size:26px!important;margin:0 0 4px!important}
.sword-picker.compact>.muted{margin:0 auto;max-width:none;text-align:center;font-size:13px}
.sword-picker.compact .rack-top{position:absolute;top:10px;right:14px;display:flex;align-items:center;gap:14px;z-index:2}
.sword-picker.compact .rack-clear:not(#_){min-height:0;padding:4px 6px;background:none;border:0;box-shadow:none;font:400 14px var(--tt-ui);color:#cdb98f}
.sword-picker.compact .rack-clear:not(#_)::before,.sword-picker.compact .rack-clear:not(#_)::after,.sword-picker.compact .rack-done:not(#_)::before,.sword-picker.compact .rack-done:not(#_)::after{display:none!important}
.sword-picker.compact .rack-done:not(#_){min-height:0;padding:7px 16px 7px 12px;border-radius:6px;border:2px solid #9fe08a!important;background:linear-gradient(#3f8f3a,#256b2a)!important;box-shadow:0 3px 0 #123d17,0 0 0 2px #0d0807!important;font:700 16px var(--tt-ui);color:#f3ffe9;text-shadow:0 2px 0 #123d17}
.sword-picker.compact .rack-done span:first-child{font-size:20px;margin-right:2px}
.sword-picker.compact .rack-done:hover:not(#_){filter:brightness(1.12)}
.sword-picker.compact .rack-done:disabled:not(#_){filter:grayscale(.8) brightness(.7);cursor:default}
.sword-picker.compact .sword-rack{grid-template-columns:repeat(auto-fill,minmax(clamp(108px,calc((100% - 42px)/8),122px),1fr));gap:6px;margin-top:8px}
/* fits one screen: the dialog is a column and only the blades scroll, and only if they must (phones, a big rack);
   cards narrow to keep eight across where 122px would drop a row */
#modal[open]:has(.sword-picker.compact){display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - 32px)}
.sword-picker.compact{display:flex;flex-direction:column;min-height:0}
.sword-picker.compact .sword-rack{flex:0 1 auto;min-height:0;grid-auto-rows:max-content;align-content:start;overflow-y:auto;overscroll-behavior:contain}
body:has(#modal[open] .sword-picker.compact){overflow:hidden}
@media(max-width:700px){.sword-picker.compact{padding-top:34px}}
.sword-picker.compact .rack-group{grid-column:1/-1;margin:6px 0 0;font:600 11px var(--tt-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.sword-picker.compact .rack-group::after{content:"";flex:1;height:1px;background:#5a391b}
.sword-picker.compact .sword-choice:not(#_){display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto 1fr;column-gap:8px;row-gap:3px;align-items:start;justify-items:start;text-align:left;padding:6px 22px 6px 7px;min-height:0;container-type:inline-size}
.sword-picker.compact .sword-choice .sword-icon{grid-row:1/3;width:32px;height:64px;align-self:center;margin:0 -2px}
.sword-picker.compact .sword-choice strong{font-size:12px;line-height:1.15;margin-right:10px}
.sword-picker.compact .sword-choice small{font-size:10px;grid-column:2}
.sword-picker.compact .sword-choice .pattern-preview{--piece-w:8px;--piece-h:12px;--piece-gap:1px;margin:0!important;pointer-events:none}
.sword-picker.compact .pm-random.small{grid-row:1/3;font-size:30px;line-height:64px;width:32px;text-align:center}
.sword-picker.compact .fav-star{top:4px;right:5px;font-size:13px}
.their-picker.compact .sword-choice.selected::after{display:none}
/* a card narrowed below 122px (eight across on a small screen; the query sees its content box) puts the name across
   the top so it never runs under the star */
@container (max-width:88.9px){.sword-picker.compact .sword-choice strong{grid-column:1/-1;margin-right:14px}.sword-picker.compact .sword-choice :is(.sword-icon,.pm-random.small){grid-row:2}}
/* =================== the title's surfaces on every screen (paint only: no box moves) =================== */
/* sheets that brought their own flat slab wear the panel frame too; the ones that scroll draw it 8px outward */
#rogue-stage:has(#rogue-start):not(#_),.tutorial:not(#_),.pc-panel:not(#_),.pn-inner:not(#_),.report-dialog:not(#_){
  background:none;border-color:transparent;border-image:url(ui/panel.png) 10 fill/20px/0 round!important;box-shadow:var(--px-drop)!important;image-rendering:pixelated}
.tutorial:not(#_),.pc-panel:not(#_),.pn-inner:not(#_),.report-dialog:not(#_){border-image-outset:8px!important}
#rogue-stage.adv-ending:not(#_){border-color:transparent;border-image:url(ui/panel.png) 10/20px/0 round!important;box-shadow:var(--px-drop);image-rendering:pixelated}   /* no fill: the biome picture shows */
#modal.im-plain:not(#_){border-image:none!important}   /* pause and confirm stay frameless */

/* pixel UI has square corners: the last rounded web corners */
:is(.touch-controls button,.ol-hall-btn,.pf-btn,input[type=checkbox]):not(#_):not(#_):not(#_),.rp-track input:not(#_){border-radius:0}
input[type=range]::-webkit-slider-runnable-track{border-radius:0}

/* touch pad: the title's buttons, Drop on the primary (crimson) one; pressed shows the sunken art */
.touch-controls button:not(#_):not(#_){border-color:transparent;background:none;box-shadow:none;color:var(--parchment);text-shadow:var(--px-o1);
  border-image:url(ui/btn.png) 5 fill/10px/0 round;image-rendering:pixelated}
.touch-controls button:last-child:not(#_):not(#_){color:var(--gold);border-image-source:url(ui/btn-primary.png)}
.touch-controls button:active:not(#_):not(#_){border-image-source:url(ui/btn-down.png)}
.touch-controls button:last-child:active:not(#_):not(#_){border-image-source:url(ui/btn-primary-down.png)}

.ol-col-tables :is(.ol-online,.ol-empty){text-shadow:var(--px-o1)}   /* straight on the room art, like every other label */

/* Adventure rail: "YOUR RUN" keeps its gem beside the words (rogue.css spreads every sidebar line) */
.rogue-sidebar>p.eyebrow{justify-content:flex-start}

/* Forge blade cards: names fit inside their frame (same card size); only a name with a word too long for the
   two-column rack (pattern-workshop.js marks it .long) steps down a size, the rest keep theirs */
.pattern-preset:not(#_){gap:4px}
@media(min-width:721px){.pattern-library .pattern-preset strong.long:not(#_){font-size:13px!important;line-height:18px!important}}
/* a replay's highlights: the rival's combos in red beside your gold, and a Rival switch that hides them */
.rp-mark.rival{background:#d0453c}
.rp-highlights button.rival:not(#_):not(#_){color:#f0a39a;border-color:#6e2420;background:#1a0b0a}
.rp-highlights button.rival:not(#_):not(#_):hover{color:#ffd2cc;border-color:#c8463d}
/* the switch sits apart at the end of the row: a checkbox, so it never reads as a combo */
.rp-rival-check{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding-left:12px;border-left:1px solid #3a2410;font:400 11px var(--tt-ui);color:#cdb894;cursor:pointer;white-space:nowrap}
.rp-rival-check input{accent-color:#c8463d;margin:0}
body.rp-no-rival :is(.rp-mark.rival,.rp-highlights button.rival){display:none!important}
/* the rack's Select switch: lit while several blades can be picked */
.sword-picker.compact #mine-select[aria-pressed=true]:not(#_){color:var(--gold);text-decoration:underline;text-underline-offset:4px}

/* end-of-game choices, every mode: a 2x2 grid of big buttons, each with its pixel icon and its own colour
   (play again crimson, watch blue, change amber, menu dark), so the next move is one glance and one click */
.end-actions:not(#_):not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(460px,100%);margin:14px auto 0;align-items:stretch;justify-content:center}
.end-actions>p{grid-column:1/-1;text-align:center}
.end-actions>button:last-child:nth-child(odd):not(#_){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
.end-actions>button:not(#_):not(#_):not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 14px 8px 10px;
  font:600 17px/1.1 var(--tt-ui);color:var(--parchment);text-shadow:var(--px-o1);text-align:left;background:var(--eb-bg,#1a130f);border:2px solid var(--eb-edge,#6b5238);box-shadow:0 3px 0 #0d0807,inset 0 0 0 1px #0007}
.end-actions>button:not(#_):not(#_):not(#_)::before{content:""!important;display:block!important;position:static!important;flex:none;width:32px!important;height:32px!important;margin:0!important;transform:none!important;border:0!important;box-shadow:none!important;
  background:var(--eb-ic) center/32px 32px no-repeat!important;image-rendering:pixelated;opacity:1!important}
.end-actions>button:not(#_):not(#_):not(#_)::after{display:none!important}
.end-actions>button:not(#_):not(#_):not(#_):hover{filter:brightness(1.18)}
.end-actions>button:not(#_):not(#_):not(#_):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.end-actions>button:not(#_):not(#_):not(#_):disabled{opacity:.5;cursor:default;filter:none}
.end-actions>.eb-again{--eb-ic:url(ui/icon-spar.png)}
.end-actions>.eb-watch{--eb-ic:url(ui/icon-repl.png)}
.end-actions>.eb-change{--eb-ic:url(ui/icon-solo.png)}
.end-actions>.eb-seed{--eb-ic:url(ui/icon-chal.png)}
.end-actions>.eb-menu{--eb-ic:url(ui/icon-home.png)}
/* one look for all of them, the tavern's dark wood; the main one (play again) is the one in gold. Hover lights the rim gold */
.end-actions>button:not(#_):not(#_):not(#_){background:linear-gradient(#241810,#150d09);border-color:#5a391b;color:var(--parchment)}
.end-actions>button.primary:not(#_):not(#_):not(#_){background:linear-gradient(#3a2410,#1e130a);border-color:var(--gold);color:var(--gold);text-shadow:0 2px 0 var(--crimson),var(--px-o1)}
.end-actions>button:not(#_):not(#_):not(#_):hover{filter:none;border-color:var(--gold);color:var(--gold)}
@media(max-width:420px){.end-actions>button:not(#_):not(#_):not(#_){font-size:15px;min-height:48px;padding:6px 10px 6px 8px}.end-actions>button:not(#_):not(#_):not(#_)::before{width:24px!important;height:24px!important;background-size:24px 24px!important}}
.pause-card .pause-settings:not(#_):not(#_){font-size:clamp(15px,2.2vmin,20px)!important;margin-top:8px}
/* the rival's board at a smaller size on a desktop: shrunk to the top of its own space (or hidden), so your board, the
   clock and the side panels stay exactly where they were */
body:is([data-rival-size=mini],[data-rival-size=tiny]) :is(.boards #wrap-1,.ol-rival,.rogue-playfield.duel>.rogue-opponent){transform-origin:top right;transition:none}   /* shrinks to its far edge; rival-view.js slides your board to the middle */
body[data-rival-size=mini] :is(.boards #wrap-1,.ol-rival,.rogue-playfield.duel>.rogue-opponent){transform:scale(.5)}
body[data-rival-size=tiny] :is(.boards #wrap-1,.ol-rival,.rogue-playfield.duel>.rogue-opponent){transform:scale(.3)}
body[data-rival-size=hidden] :is(.boards #wrap-1,.ol-rival,.rogue-playfield.duel>.rogue-opponent){visibility:hidden}
/* the tavern panel opens above the title's bottom-left row, never over it; on big screens (1440p, 4K) the panel, its
   corner tab and the title's corner rows grow with the screen like the rest of the menus */
.so-dock.so-on-title .so-dock-panel:not(#_){bottom:64px;height:min(600px,calc(100vh - 140px))}
@media (min-width:2200px) and (min-height:1200px){.so-dock,#title-screen .tt-corner{zoom:1.4}}
@media (min-width:3000px) and (min-height:1600px){.so-dock,#title-screen .tt-corner{zoom:1.75}}
/* your table: its name and Leave on one line at the top, the seats, then the other tables under a rule */
.ol-room-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.ol-room-head .ol-room-title{margin:0}
.ol-room .ol-menu:empty,.ol-room .ol-notice:empty{display:none}
.ol-others:not(#_){margin-top:4px;padding-top:12px;border-top:1px solid #3a2410}
.ol-others .ol-sub:not(#_){text-align:left}