/* Shared ink shell. Artwork is deliberately outside every color treatment. */
body[data-ink-ui] { --bg:#f1f1f1;--surface:#f9f9f9;--surface-2:#e8e8e8;--text:#252525;--text-soft:#717171;--line:#cecece;--primary:#272727;background:var(--bg);color:var(--text);min-width:0 }
body[data-ink-ui] .app { max-width:1480px;width:calc(100% - 64px);padding-bottom:0 }
body[data-ink-ui] .app-nav { min-height:92px;border:0;padding:18px 0;gap:16px }
body[data-ink-ui] .app-nav .brand { font-weight:400;letter-spacing:3px;font-size:20px }
body[data-ink-ui] .brand img { width:46px;height:46px;filter:none }
body[data-ink-ui] .brand small { font-size:10px;letter-spacing:2px;margin-top:5px }
body[data-ink-ui] .app-nav nav { margin-left:auto;position:static;width:auto;height:auto;border:0;padding:0;background:none }
body[data-ink-ui] #navLobby,body[data-ink-ui] #navDecks,body[data-ink-ui] #navArchive { display:none }
body[data-ink-ui] .account-bar { margin:0;gap:10px }
body[data-ink-ui] .account-bar button,body[data-ink-ui] .app-nav .nav-link { font-size:12px }
body[data-ink-ui] .lobby-announcement { position:sticky;top:0;z-index:90;background:#edededee;border:0;border-block:1px solid #d1d1d1;box-shadow:none;height:30px;margin:0;font-size:12px;backdrop-filter:blur(6px) }
body[data-ink-ui] .lobby-disclaimer { font-size:11px;line-height:1.7;color:#767676;border-top:1px solid #d1d1d1;margin:24px 0 0;padding:14px 0;clear:both }
body[data-ink-ui] .lobby-columns { display:block }
body[data-ink-ui] .lobby-columns>[hidden] { display:none!important }
body[data-ink-ui] .lobby-screen { position:relative;min-height:620px }
.ink-home { height:590px;position:relative;isolation:isolate;overflow:hidden }
.ink-home-copy { position:absolute;z-index:3;left:6.4%;top:55px;pointer-events:none;transition:opacity .5s,transform .8s }
.ink-home-copy .eyebrow { font-size:10px;letter-spacing:3px }
.ink-home-copy h1 { font:400 clamp(46px,6.7vw,76px)/1.25 'Songti SC','SimSun',serif;letter-spacing:8px;margin:20px 0 22px }
.ink-home-copy p { font-size:12px;line-height:2.2;letter-spacing:2px;color:#717171 }
.ink-board-camera { position:absolute;left:29%;top:5px;width:65%;height:558px;transition:transform 1.2s cubic-bezier(.6,.02,.2,1),opacity 1s }
.ink-board-art { width:100%;height:100%;display:block;opacity:.65 }
.ink-river { position:absolute;left:12%;right:12%;top:47%;display:flex;justify-content:space-around;color:#969696;font:19px 'SimSun',serif;letter-spacing:15px;pointer-events:none }
.ink-board-menu { position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;transform:translate(-50%,-50%);width:108px;height:108px;z-index:2;border:0!important;border-radius:50%;padding:0;background:transparent!important;color:#202020!important;transition:transform .35s }
.ink-board-menu::before { content:'';position:absolute;inset:8px;border:1px solid transparent;border-radius:50%;transition:all .3s;transform:scale(.7) }
.ink-board-menu:hover::before,.ink-board-menu:focus-visible::before { border-color:#898989;transform:scale(1) }
.ink-board-menu:hover { transform:translate(-50%,-54%) }
.ink-board-menu b { font:400 27px/1.35 'Songti SC','SimSun',serif;letter-spacing:5px;padding-left:5px;background:#f1f1f1eb }
.ink-board-menu small { font-size:9px;letter-spacing:2px;color:#717171;background:#f1f1f1 }
.ink-board-menu.featured b { font-size:35px }
.ink-board-menu.featured::after { content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#202020;bottom:10px }
.ink-ghost { position:absolute;width:106px;height:106px;display:grid;place-items:center;border:1px solid #888;outline:1px solid #aaa;outline-offset:-9px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fffffff0,#dfdfdfce);font:34px 'SimSun',serif;opacity:0;pointer-events:none;z-index:5;box-shadow:0 12px 20px #15151520;transform:translate(-50%,-50%) }
.ink-ring { position:absolute;width:110px;height:110px;border-radius:50%;border:1px solid #888;opacity:0;pointer-events:none;transform:translate(-50%,-50%) }
.stone-landing .ink-ghost { animation:ink-stone-drop .75s both }.stone-landing .ink-ring { animation:ink-stone-ripple 1.1s .23s both }
.zoom-in .ink-board-camera { transform:scale(3.4);opacity:0 }.zoom-in .ink-home-copy { opacity:0;transform:translateY(-20px) }
.zoom-out .ink-board-camera { animation:ink-board-return 1.2s both }
.inkstone { position:absolute;left:5%;bottom:36px;width:142px;height:90px;border-radius:48% 46% 42% 40%;transform:rotate(-19deg);background:radial-gradient(ellipse at 46% 43%,#121212 0 37%,#313131 39%,#505050 41%,#242424 48%,#353535 60%,#1f1f1f 77%);box-shadow:12px 18px 24px #28282825,inset 3px 2px 3px #90909055 }
.ink-brush { position:absolute;left:14%;bottom:58px;width:220px;height:9px;border-radius:30% 5px 5px 30%;background:linear-gradient(0deg,#242424,#747474 50%,#343434);transform:rotate(-38deg);box-shadow:3px 6px 9px #14141420 }
.ink-brush::before { content:'';position:absolute;left:-40px;top:-3px;width:48px;height:15px;border-radius:85% 8% 8% 60%;background:linear-gradient(0deg,#191919,#545454 58%,#222) }
.ink-home-foot { position:absolute;bottom:4px;right:7%;display:flex;align-items:center;gap:22px;color:#717171;font-size:11px;letter-spacing:2px }
.ink-home-foot::before { content:'';width:56px;height:1px;background:#a1a1a1 }
.ink-piece-nav { position:fixed;left:max(42px,calc((100vw - 1480px)/2 + 24px));--ink-nav-top:178px;top:var(--ink-nav-top);width:152px;display:flex;flex-direction:column;align-items:start;gap:15px;z-index:60;--speed:1 }
.ink-piece-nav::before { content:'';position:absolute;inset:-40px -22px;z-index:-1;background-image:linear-gradient(#7474741a 1px,transparent 1px),linear-gradient(90deg,#7474741a 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(90deg,#000 50%,transparent);pointer-events:none }
.ink-nav-piece { width:64px;height:64px;padding:0;min-height:0;border-radius:50%;border:1px solid #b4b4b4;outline:1px solid #c4c4c4;outline-offset:-6px;background:radial-gradient(circle at 30% 20%,#fdfdfd,#e2e2e2);color:#252525;box-shadow:3px 6px 9px #21212113,inset 0 -3px 2px #b1b1b133;font:18px 'SimSun',serif;transition:transform .5s,background .4s,color .4s;position:relative }
.ink-nav-piece:nth-child(2) { margin-left:70px }.ink-nav-piece:nth-child(3) { margin-left:13px }.ink-nav-piece:nth-child(4) { margin-left:60px }.ink-nav-piece:nth-child(5) { margin-left:5px }
.ink-nav-piece.active { background:radial-gradient(circle at 35% 20%,#444,#161616);color:#f2f2f2;border-color:#3c3c3c;outline-color:#898989;transform:scale(1.2);box-shadow:5px 10px 16px #21212130 }
.ink-nav-piece:hover { transform:translateY(-4px) }.ink-nav-piece.active:hover { transform:scale(1.2) translateY(-3px) }
    .ink-piece-nav .ink-nav-piece{isolation:isolate;overflow:visible}
    .ink-piece-nav .piece-face{position:absolute;inset:0;z-index:1;border-radius:inherit;background:inherit;border:1px solid #b4b4b4;outline:1px solid #c4c4c4;outline-offset:-6px;pointer-events:none;transition:background .3s,border-color .3s}
    .ink-piece-nav .ink-nav-piece.active .piece-face{border-color:#3c3c3c;outline-color:#898989}
    .ink-piece-nav .piece-label{position:relative;z-index:2;pointer-events:none}
    .ink-piece-nav .piece-stain{position:absolute;left:calc(50% + var(--ink-x));top:calc(50% + var(--ink-y));width:170%;height:170%;max-width:none;z-index:0;pointer-events:none;opacity:0;transform:translate(-50%,-50%) rotate(var(--ink-angle)) scale(.88);transition:opacity .23s ease-out,transform .3s ease-out}
    .ink-piece-nav .ink-nav-piece.inked .piece-stain{opacity:1;transform:translate(-50%,-50%) rotate(var(--ink-angle)) scale(1)}
    .ink-piece-nav .falling-ink{position:absolute;z-index:4;left:calc(50% + var(--ink-x));top:calc(50% + var(--ink-y));width:24px;height:29px;background:#191918;border-radius:39% 57% 45% 54%;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
    .ink-piece-nav .ink-nav-piece.ink-falling .falling-ink{animation:piece-ink-fall calc(.32s * var(--speed)) cubic-bezier(.55,.02,.85,.5) both}
    .ink-piece-nav .ink-nav-piece.ink-impact .piece-stain{animation:piece-ink-bloom calc(.42s * var(--speed)) ease-out both}
    @keyframes piece-ink-fall{0%{opacity:0;transform:translate(-50%,-240px) scale(.65,1.6);filter:blur(2px)}18%{opacity:.95}70%{opacity:1;transform:translate(-50%,-50%) scale(.75,1.2);filter:blur(0)}85%{opacity:.8;transform:translate(-50%,-50%) scale(1.8,.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3,.25)}}
    @keyframes piece-ink-bloom{0%{opacity:.8;transform:translate(-50%,-50%) rotate(var(--ink-angle)) scale(.28)}42%{opacity:1;transform:translate(-50%,-50%) rotate(var(--ink-angle)) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) rotate(var(--ink-angle)) scale(1)}}

.ink-home-return { margin:19px 0 0 15px;font-size:11px;white-space:nowrap;color:#717171;padding:8px 0;border:0;border-bottom:1px solid #aaa;background:none }
body[data-ink-ui]:not([data-ink-page=home]):not(.screen-game) .lobby-screen,body[data-ink-ui] .archive-page,body[data-ink-ui] .builder-screen { margin:0 0 0 205px;width:calc(100% - 205px);padding:30px 0 15px }
.ink-page-heading { margin:0 0 28px }.ink-page-heading h1 { font:400 40px/1.25 'Songti SC','SimSun',serif;letter-spacing:6px;margin:12px 0 }.ink-page-heading p { font-size:13px;color:#717171;letter-spacing:1px }
.ink-lobby-notice { font-size:12px;color:#717171;margin:10px 0!important;overflow-wrap:anywhere }
body[data-ink-page=home] .ink-lobby-notice { position:relative;z-index:6 }
body[data-ink-ui] .ink-function-page { max-width:980px }
body[data-ink-ui] .lobby-panel { border:0;background:none;padding:20px 0;box-shadow:none;border-radius:0 }
body[data-ink-ui] .lobby-panel .panel-head h2 { font-size:18px;font-weight:500 }
body[data-ink-ui] .play-tabs { border-bottom:1px solid #ccc;gap:24px;padding:0;background:none }
body[data-ink-ui] .play-tabs button { background:none;color:#717171;border:0;border-radius:0;padding:10px 0;min-width:100px;box-shadow:none }
body[data-ink-ui] .play-tabs button[aria-selected=true] { border-bottom:2px solid #252525;color:#252525 }
body[data-ink-ui] .mode-cards { gap:14px;margin:24px 0 }
body[data-ink-ui] .mode-card { border:1px solid #d2d2d2;border-radius:2px;background:#f6f6f6;min-height:150px;padding:20px;box-shadow:none }
body[data-ink-ui] .mode-card.selected { border-color:#252525;background:#e9e9e9 }
body[data-ink-ui] .mode-card strong { font:400 24px 'Songti SC','SimSun',serif;letter-spacing:2px }
body[data-ink-ui] .mode-card span,body[data-ink-ui] .mode-card b { font-size:12px }
body[data-ink-ui] .lobby-panel .new-game { gap:18px;grid-template-columns:repeat(2,minmax(0,1fr)) }
body[data-ink-ui] .new-game input,body[data-ink-ui] .new-game select { background:transparent;border:0;border-bottom:1px solid #aaa;border-radius:0 }
body[data-ink-ui] .new-game #newGameButton { min-height:46px }
body[data-ink-ui] .rule-summary { border-top:1px solid #ccc;margin:22px 0 0;padding-top:16px;font-size:12px;line-height:1.8 }
body[data-ink-ui] .appearance-panel:not([hidden]) { display:grid;max-width:780px;grid-template-columns:1fr 1fr;gap:20px }
body[data-ink-ui] .appearance-panel>.appearance-preview { grid-column:1/-1;max-width:600px;width:100%;margin:0 0 16px }
body[data-ink-ui] .appearance-panel>.eyebrow,body[data-ink-ui] .appearance-panel>h2 { display:none }
body[data-ink-ui] .appearance-panel>.asset-status { grid-column:1/-1 }
body[data-ink-ui] .builder-screen .modal-panel { padding:0;background:none }
body[data-ink-ui] .page-heading h1,body[data-ink-ui] .deck-modal-panel>.panel-head h2 { font:400 32px/1.4 'Songti SC','SimSun',serif;letter-spacing:3px }
.ink-orbit { width:190px;height:190px;border-radius:50%;border:1px solid #afafaf66;outline:1px solid #c9c9c966;outline-offset:22px;display:grid;place-items:center;margin:35px auto 48px }
.ink-taiji { width:134px;height:134px;border-radius:50%;background:linear-gradient(90deg,#222 50%,#f6f6f6 50%);position:relative;box-shadow:0 0 0 1px #333,0 18px 40px #1f1f1f15;animation:ink-taiji-turn 8s linear infinite }
.ink-taiji::before,.ink-taiji::after { content:'';position:absolute;left:25%;width:50%;height:50%;border-radius:50%;box-sizing:border-box }
.ink-taiji::before { top:0;background:#f6f6f6;border:25px solid #222 }.ink-taiji::after { bottom:0;background:#222;border:25px solid #f6f6f6 }
.ink-match-arrival { position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;display:grid;place-items:center;z-index:5500;overflow:hidden;background:transparent }
.ink-match-arrival::backdrop { background:#f1f1f1;animation:ink-arrival-paper 1.35s both }
.ink-match-arrival .ink-taiji { animation:ink-taiji-expand 1.35s cubic-bezier(.64,.02,.32,1) both }
.ink-game-arrive { animation:ink-game-arrive .8s both }
body[data-ink-ui] .matchmaking-dialog { text-align:center;background:#f1f1f1;border:1px solid #bbb;width:min(560px,calc(100vw - 28px));padding:30px }
body[data-ink-ui] .matchmaking-dialog h2 { font:400 28px 'SimSun',serif;letter-spacing:5px }
@keyframes ink-stone-drop {0%{opacity:0;transform:translate(-50%,-85%) scale(1.7);filter:blur(6px)}55%{opacity:.9;transform:translate(-50%,-50%) scale(.96);filter:blur(0)}75%{transform:translate(-50%,-50%) scale(1.03);opacity:.85}100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}}
@keyframes ink-stone-ripple {20%{opacity:.5}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
@keyframes ink-board-return {from{transform:scale(2.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ink-taiji-turn {to{transform:rotate(360deg)}}
@keyframes ink-taiji-expand {0%{transform:rotate(0) scale(1);opacity:1}80%{transform:rotate(200deg) scale(15);opacity:1}100%{transform:rotate(230deg) scale(19);opacity:0}}
@keyframes ink-arrival-paper {0%,75%{opacity:1}100%{opacity:0}}
@keyframes ink-game-arrive {from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}
@media(max-width:900px) {
  body[data-ink-ui] .app { width:calc(100% - 28px);padding-bottom:0 }
  body[data-ink-ui] .app-nav { min-height:74px;padding:12px 0;gap:8px;flex-wrap:wrap }
  body[data-ink-ui] .app-nav .brand { font-size:16px;letter-spacing:2px;gap:7px }
  body[data-ink-ui] .brand img { width:34px;height:34px }body[data-ink-ui] .brand small { font-size:9px }
  body[data-ink-ui] .app-nav nav { order:3;width:100%;justify-content:flex-end;gap:8px }
  body[data-ink-ui] .app-nav nav:has(>#navAdmin[hidden]):has(>#resumeGame[hidden]) { display:none }
  body[data-ink-ui] .account-bar { margin-left:auto;gap:4px }.account-bar .edition-tag { font-size:11px }
  body[data-ink-ui] .account-bar button { font-size:11px;padding:6px }
  body[data-ink-ui] .lobby-announcement { font-size:11px;height:26px }
  .ink-home { height:590px }.ink-home-copy { left:5%;top:20px }.ink-home-copy h1 { font-size:42px;line-height:1.25;margin:14px 0 }.ink-home-copy h1 br { display:none }
  .ink-home-copy p { font-size:11px }.ink-home-copy p br { display:none }.ink-home-copy .eyebrow { font-size:9px;letter-spacing:2px }
  .ink-board-camera { left:3%;width:94%;top:165px;height:370px }.ink-board-menu { width:86px;height:86px }.ink-board-menu b { font-size:22px }.ink-board-menu.featured b { font-size:28px }.ink-board-menu small { font-size:8px;letter-spacing:1px }
  .ink-river { font-size:14px;letter-spacing:8px }.ink-ghost { width:80px;height:80px;font-size:28px }
  .inkstone { width:88px;height:55px;bottom:0;left:8% }.ink-brush { left:18%;bottom:29px;width:138px;height:6px }.ink-brush::before { width:30px;height:10px;left:-25px;top:-2px }.ink-home-foot { bottom:5px;right:4%;font-size:9px;letter-spacing:1px;gap:10px }.ink-home-foot::before { width:22px }
  body[data-ink-ui] .lobby-screen { min-height:590px }
  .ink-piece-nav { left:15px;--ink-nav-top:164px;width:82px;gap:25px }.ink-nav-piece { width:53px;height:53px;font-size:15px }.ink-nav-piece:nth-child(2){margin-left:22px}.ink-nav-piece:nth-child(3){margin-left:0}.ink-nav-piece:nth-child(4){margin-left:24px}.ink-nav-piece:nth-child(5){margin-left:5px}.ink-home-return{font-size:10px;margin-left:0}.ink-piece-nav::before { background-size:42px 42px;right:0 }
  body[data-ink-ui]:not([data-ink-page=home]):not(.screen-game) .lobby-screen,body[data-ink-ui] .archive-page { margin:0 0 88px 110px;width:calc(100% - 110px);padding:24px 0 0 }
  .ink-page-heading { margin-bottom:20px }.ink-page-heading h1 { font-size:30px }.ink-page-heading p { font-size:12px;letter-spacing:0 }
  body[data-ink-ui] .mode-cards,body[data-ink-ui] #multiModes { grid-template-columns:1fr;gap:8px;margin:15px 0 }
  body[data-ink-ui] .mode-card { min-height:100px;padding:14px;gap:8px }.mode-card b{display:none}
  body[data-ink-ui] .mode-card strong { font-size:22px }
  body[data-ink-ui] .lobby-panel .new-game { grid-template-columns:1fr;gap:16px }
  body[data-ink-ui] .play-tabs { gap:12px }body[data-ink-ui] .play-tabs button { min-width:0;flex:1;font-size:12px }
  body[data-ink-ui] .lobby-panel .panel-head { flex-wrap:wrap;gap:8px }body[data-ink-ui] .lobby-panel .subtle { display:none }
  body[data-ink-ui] .lobby-decks { grid-template-columns:1fr }body[data-ink-ui] .lobby-deck { padding:10px;gap:8px }
  body[data-ink-ui] .appearance-panel:not([hidden]) { grid-template-columns:1fr }.appearance-panel>*{min-width:0}
  body[data-ink-ui] .appearance-panel select { width:100% }body[data-ink-ui] .watch-code { flex-wrap:wrap }body[data-ink-ui] .room-card { flex-direction:column;gap:10px }body[data-ink-ui] .room-card-actions { flex-wrap:wrap }
  body[data-ink-ui] .lobby-disclaimer { margin-top:18px;font-size:10px;padding:12px 0 }
  /* The editor needs its full width; navigation becomes a compact bottom row. */
  body[data-ink-ui].screen-builder .builder-screen { margin:0;width:100%;padding:18px 0 120px }
  body[data-ink-ui].screen-builder .ink-piece-nav { position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;flex-direction:row;align-items:center;justify-content:space-around;gap:6px;padding:7px 8px max(7px,env(safe-area-inset-bottom));background:#efefeff5;border-top:1px solid #ccc }
  body[data-ink-ui].screen-builder .ink-piece-nav::before { display:none }body[data-ink-ui].screen-builder .ink-nav-piece { width:40px;height:40px;margin:0;font-size:12px }.screen-builder .ink-home-return { margin:0;font-size:10px }
  body[data-ink-ui] .mobile-deck-save { bottom:58px }
  body[data-ink-ui] .archive-page .filters label { flex-basis:100%;width:100% }body[data-ink-ui] .archive-page .metrics { grid-template-columns:1fr }body[data-ink-ui] .archive-page .surface { padding:12px }
  body[data-ink-ui] .page-heading h1 { font-size:26px;letter-spacing:1px }
}
/* Keep the rail anchored even on short screens; only its contents may scroll. */
@media(max-height:650px) {
  body[data-ink-ui]:not(.screen-builder) .ink-piece-nav { width:200px;margin:-20px -24px -16px;padding:20px 24px 16px;max-height:calc(100dvh - var(--ink-nav-top) + 12px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin }
  body[data-ink-ui]:not(.screen-builder) .ink-nav-piece { flex-shrink:0 }
}
@media(max-width:900px) and (max-height:650px) {
  body[data-ink-ui]:not(.screen-builder) .ink-piece-nav { width:130px }
}
@media(prefers-reduced-motion:reduce){body[data-ink-ui] .ink-home *,body[data-ink-ui] .ink-piece-nav *,body[data-ink-ui] .ink-taiji,.ink-game-arrive{animation:none!important;transition:none!important}.ink-match-arrival{display:none}}