/* Actual viewport, not a square inherited from the former Xiangqi board.
   Only match pages opt in; marketing, account and rules layouts are untouched. */
/* The page scrolls freely; nothing snaps while the reader drags. Starting a game
   brings the table into view once, and only if it is not there already. */
html.ya-game-page{scroll-padding-top:calc(var(--ya-topbar-h,62px) + 6px);}
.ya-game-page .ya-shell{padding-top:10px;padding-bottom:24px;}
.ya-game-page .ya-page-head{margin:8px 0 16px;}
.ya-game-page .ya-page-head h1{font-size:23px;}
.ya-game-page .ya-page-head p{font-size:13px;}
.ya-game-page .ya-game-shell .game-container{width:100%;max-width:none;}
/* game-viewport.js builds .ya-play-screen at the end of the body. Until then the
   single-player table is still in the inherited markup and styles, so keep it
   unpainted rather than flash that layout first. */
.ya-game-shell>.game-container:has(#single-restart):not(:has(>.ya-play-screen)){visibility:hidden;}
.ya-play-screen{--ya-stage-h:500px;box-sizing:border-box;height:calc(var(--ya-view-h,100dvh) - var(--ya-topbar-h,62px) - 12px);min-height:0;display:grid;grid-template-rows:38px minmax(0,1fr) auto;gap:6px;position:relative;isolation:isolate;padding:0 0 4px;}
.ya-play-screen>*{min-width:0;min-height:0;}
.ya-play-screen .game-header{margin:0;gap:8px;padding:0 4px;}
.ya-play-screen .game-header h2{font-size:17px;line-height:1.2;}
.ya-play-screen .settings-gear-btn{width:34px;height:34px;min-width:34px;padding:6px;box-shadow:none;}
.ya-play-screen .settings-dropdown{z-index:40;max-height:calc(var(--ya-view-h,100dvh) - 110px);overflow-y:auto;}
.ya-play-screen .ya-stage{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto!important;margin:0!important;display:grid;place-items:center;}
.ya-play-screen .ya-stage>#hf-table,.ya-play-screen .ya-stage>#df-table{width:100%;height:100%;min-height:0;box-sizing:border-box;}
.ya-play-screen .ya-stage>#sg-board,.ya-play-screen .ya-stage>#sg-online-board{width:100%;height:auto;min-height:0;max-width:none;}
.ya-play-footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.ya-play-footer .ya-status{flex:1;gap:5px 10px;border:0;border-radius:5px;background:#eeebe38c;padding:5px 8px;font-size:11px;line-height:1.4;min-height:30px;}
.ya-play-footer .ya-status .ya-turn{font-size:12px;}
.ya-play-footer .ya-status:empty{display:none!important;min-height:0!important;}
.ya-play-footer #hf-message,.ya-play-footer #df-message{order:3;flex-basis:100%;min-height:0!important;padding:3px 8px;max-height:36px;overflow:auto;}
.ya-play-footer .game-controls{display:flex;gap:5px;margin:0;padding:0;}
.ya-play-footer .game-controls .btn{font-size:12px;min-height:32px;padding:5px 10px;margin:0;border-radius:5px;}
.ya-game-details{margin-top:14px;border:1px solid #dfdbd0;border-radius:6px;background:#fffefa;}
.ya-game-details>summary{padding:10px 13px;cursor:pointer;color:#55645f;font-size:13px;}
.ya-game-details>.ya-panel{border:0;box-shadow:none;margin:0!important;}
.ya-game-details .chat-container{margin:0;}
.ya-return-game{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:920;border:1px solid #c2ac7b;background:#233c49;color:#fff7dd;border-radius:24px;padding:11px 18px;font:600 13px var(--ya-font-ui);box-shadow:0 4px 20px #122a3440;cursor:pointer;}
.ya-return-game[hidden]{display:none;}
/* A deliberate, compact start card. Both scrim and card are bound to stage. */
.ya-play-screen .game-start-overlay,.ya-play-screen .game-end-overlay{inset:0;width:100%;height:100%;box-sizing:border-box;padding:16px;z-index:20;align-items:center;justify-content:center;background:#152b2f99;backdrop-filter:blur(3px);border-radius:8px;overflow:auto;}
.ya-play-screen .game-start-overlay.hidden,.ya-play-screen .game-end-overlay.hidden{display:none;}
.ya-play-screen .game-start-content,.ya-play-screen .game-end-content{box-sizing:border-box;position:relative;transform:none!important;top:auto!important;left:auto!important;width:min(100%,420px);max-width:100%;max-height:100%;overflow:auto;padding:22px;border-radius:10px;background:#fffdf6;border:1px solid #c8b78f;box-shadow:0 14px 40px #071b2b40;}
.ya-start-emblem{display:block;width:44px;height:44px;margin:0 auto 12px;background:#233c49;border-radius:50%;padding:3px;}
.ya-play-screen .game-start-content h2,.ya-play-screen .game-end-content h2{font-size:23px;line-height:1.4;margin:0 0 8px;color:#233c49;}
.ya-play-screen .game-start-content p,.ya-play-screen .game-end-content p{font-size:13px;line-height:1.65;margin:0 0 14px;color:#6e7266;}
.ya-play-screen .difficulty-cta{font-size:11px;letter-spacing:.08em;color:#8a7d61;margin:0 0 8px;}
.ya-play-screen .difficulty-start-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.ya-play-screen .difficulty-start-btn{min-height:44px;padding:10px 8px;font-size:14px;border:1px solid #d3c8af;background:#f0ece0!important;color:#354a4c!important;box-shadow:inset 0 1px #fff;}
.ya-play-screen .difficulty-start-btn[data-diff=medium]{background:#233c49!important;border-color:#233c49;color:#fff8e7!important;}
.ya-play-screen .difficulty-start-btn:hover{filter:brightness(1.06);border-color:#9e8150;}
.ya-play-screen .hide-overlay-btn{position:static;transform:none;margin:8px auto 0;width:44px;height:44px;min-height:44px;}
.ya-play-screen .game-end-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.ya-play-screen .game-end-buttons .btn{font-size:13px;padding:9px 12px;}
.ya-play-screen .game-stats{margin:8px 0;}
/* Shogi: fit by BOTH dimensions, including stands and the coordinate rim. */
.ya-play-screen .sg-root{gap:5px;}
.ya-play-screen .sg-board-wrap,.ya-play-screen .sg-stand{width:var(--sg-fit-width,100%);max-width:100%;}
.ya-play-screen .sg-board-wrap.sg-has-coords{padding:18px 24px 10px 10px;}
.ya-play-screen .sg-files{left:10px;right:24px;top:2px;height:15px;font-size:10px;}
.ya-play-screen .sg-ranks{top:18px;bottom:10px;right:2px;width:20px;font-size:10px;}
.ya-play-screen .sg-stand{height:38px;min-height:38px;padding:2px 6px;gap:5px;}
.ya-play-screen .sg-stand-list{min-height:32px;flex-wrap:nowrap;gap:2px;}
.ya-play-screen .sg-stand-label{font-size:10px;letter-spacing:0;}
.ya-play-screen .sg-stand-empty{font-size:10px;}
.ya-play-screen .sg-hand-piece{width:min(30px,12%);height:32px;flex:0 1 30px;}
.ya-play-screen .sg-hand-count{font-size:9px;min-width:13px;height:13px;line-height:13px;bottom:0;}
/* Hanafuda: opponent, field, hand. Captures are concise horizontal rails. */
.ya-play-screen .hf-table{padding:8px;gap:6px;grid-template-rows:auto minmax(0,1fr) auto;border-width:4px;}
.ya-play-screen .hf-seat{padding:5px 7px;gap:3px;min-width:0;min-height:0;}
.ya-play-screen .hf-seat-head{font-size:11px;gap:6px;line-height:18px;}
.ya-play-screen .hf-seat-points b{font-size:13px;}
.ya-play-screen .hf-seat-badge{font-size:9px;padding:0 5px;}
.ya-play-screen .hf-hand{min-height:0;flex-wrap:nowrap;gap:0;align-items:end;justify-content:center;padding-top:8px;}
.ya-play-screen .hf-seat-opponent .hf-hand{padding-top:0;gap:3px;}
.ya-play-screen .hf-seat-opponent .hf-card{--hf-w:22px;}
.ya-play-screen .hf-seat-you .hf-hand{display:grid;grid-template-columns:var(--hf-tracks,repeat(7,30px) 50px);grid-auto-rows:auto;row-gap:var(--hf-row-gap,0px);justify-content:center;}
.ya-play-screen .hf-seat-you .hf-hand .hf-card{--hf-w:var(--hf-hand-w,50px);}
.ya-play-screen .hf-selectable:hover{transform:translateY(-5px);}
.ya-play-screen .hf-selected{transform:translateY(-7px);}
.ya-play-screen .hf-pile:empty,.ya-play-screen .hf-yaku:empty,.ya-play-screen .hf-hand:empty{display:none;}
.ya-play-screen .hf-pile{display:flex;gap:7px;padding:3px;overflow-x:auto;max-height:43px;scrollbar-width:thin;}
.ya-play-screen .hf-pile-group{flex-wrap:nowrap;flex:0 0 auto;gap:2px;}
.ya-play-screen .hf-pile-kind{width:auto;flex:0 0 auto;font-size:9px;}
.ya-play-screen .hf-pile .hf-card{--hf-w:19px;box-shadow:0 2px 2px #0004;}
.ya-play-screen .hf-pile-group.is-stacked .hf-card+.hf-card{margin-left:-12px;}
.ya-play-screen .hf-pile-group.is-stacked .hf-card:hover{margin-right:0;}
.ya-play-screen .hf-yaku{flex-wrap:nowrap;overflow-x:auto;max-height:23px;margin:0;gap:4px;}
.ya-play-screen .hf-yaku-chip{white-space:nowrap;font-size:10px;padding:1px 5px;}
.ya-play-screen .hf-field{min-height:0;padding:6px;display:flex;flex-direction:column;gap:4px;overflow:hidden;}
.ya-play-screen .hf-field-label{font-size:10px;min-height:16px;margin:0;gap:5px;}
.ya-play-screen .hf-rounds{gap:3px;}
.ya-play-screen .hf-round-dot{width:6px;height:6px;}
.ya-play-screen .hf-field-row{flex:1;display:grid;grid-template-columns:repeat(var(--hf-field-cols,4),var(--hf-field-w,44px));gap:4px;justify-content:center;align-content:center;min-height:0;}
.ya-play-screen .hf-field-row .hf-card{--hf-w:var(--hf-field-w,44px);}
.ya-play-screen .hf-field-empty{font-size:11px;color:#f0e1be;}
.ya-play-screen .hf-decision-box{padding:16px;max-height:100%;overflow:auto;}
.ya-play-screen .hf-decision-box h3{font-size:24px;}
/* Daifugo: keep all opponents in one row; fan preserves readable indices. */
.ya-play-screen .df-table{padding:8px;gap:6px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;border-width:4px;min-width:0;}
.ya-play-screen .df-opponents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
.ya-play-screen .df-seat{min-width:0;padding:4px 5px;border-radius:5px;}
.ya-play-screen .df-seat-name{font-size:11px;line-height:16px;margin:0;}
.ya-play-screen .df-seat-title{font-size:9px;padding:0 4px;margin:0;}
.ya-play-screen .df-seat-cards{min-height:22px;}
.ya-play-screen .df-seat-cards .df-card{--df-w:15px;}
.ya-play-screen .df-seat-cards .df-card+.df-card{margin-left:-10px;}
.ya-play-screen .df-seat-count{font-size:10px;line-height:15px;margin:0;}
.ya-play-screen .df-seat-count b{font-size:12px;}
.ya-play-screen .df-pass-tag{font-size:9px;padding:0 5px;margin:0;}
.ya-play-screen .df-flags{min-height:0;gap:4px;}
.ya-play-screen .df-flags:empty{display:none;}
.ya-play-screen .df-flag{font-size:10px;padding:2px 6px;}
.ya-play-screen .df-field{min-height:0;padding:6px;gap:3px;overflow:hidden;}
.ya-play-screen .df-field-cards{justify-content:center;gap:3px;}
.ya-play-screen .df-field-cards .df-card{--df-w:clamp(32px,calc(var(--ya-stage-h)*.12),76px);}
.ya-play-screen .df-field-meta,.ya-play-screen .df-field-empty{font-size:11px;}
.ya-play-screen .df-you{padding:6px 7px;min-height:0;}
.ya-play-screen .df-you-head{font-size:11px;gap:6px;margin:0;line-height:18px;}
.ya-play-screen .df-hand{min-height:0;min-width:0;width:100%;padding-top:13px;display:grid;grid-template-columns:var(--df-tracks,repeat(13,24px) 64px);grid-auto-rows:auto;row-gap:var(--df-row-gap,10px);justify-content:center;}
.ya-play-screen .df-hand .df-card{--df-w:var(--df-hand-w,64px);margin:0!important;}
.ya-play-screen .df-selected{transform:translateY(-9px);}
.ya-play-screen .df-selectable:hover{transform:translateY(-7px);}
.ya-play-screen .df-actions{gap:8px;margin-top:10px;}
.ya-play-screen .df-btn{min-height:40px;padding:7px 20px;min-width:100px;font-size:13px;}
.ya-play-screen .df-hint{font-size:10px;line-height:14px;min-height:14px;margin-top:3px;}
.ya-play-screen .df-exchange-box{max-height:100%;overflow:auto;padding:14px;}
/* Online uses the same table sizing; optional chat is below the playing screen. */
.ya-play-online{grid-template-rows:minmax(0,1fr) auto;}
.ya-play-screen .game-info-panel{padding:0;margin:0;min-height:0;background:transparent;box-shadow:none;}
.ya-play-screen .game-info{padding:5px;gap:8px;margin:0;}
.ya-play-screen .player-avatar{width:26px;height:26px;font-size:13px;}
.ya-play-screen .player-details h3{font-size:12px;}
.ya-play-screen .game-status{font-size:11px;gap:4px;}
.ya-play-screen .game-pass-action{margin:0;padding:0;}
.ya-play-screen .game-pass-action .btn{padding:6px 10px;font-size:12px;}
@media(max-width:980px){
 .ya-game-page .ya-shell{padding-left:6px;padding-right:6px;}
 .ya-game-page .ya-sidebar{max-height:var(--ya-view-h,100dvh);}
 .ya-play-screen{gap:4px;grid-template-rows:34px minmax(0,1fr) auto;padding-bottom:env(safe-area-inset-bottom,0px);}
 .ya-play-online{grid-template-rows:minmax(0,1fr) auto;}
 .ya-play-screen .game-header h2{font-size:15px;}
 .ya-play-screen .hf-table,.ya-play-screen .df-table{border-width:3px;padding:5px;gap:4px;}
}
@media(max-height:540px) and (orientation:landscape){
 .ya-play-screen{grid-template-rows:30px minmax(0,1fr) auto;gap:3px;}
 .ya-play-online{grid-template-rows:minmax(0,1fr) auto;}
 .ya-play-screen .ya-start-emblem{display:none;}
 .ya-play-screen .game-start-content{padding:12px 18px;width:440px;}
 .ya-play-screen .difficulty-start-btns{grid-template-columns:repeat(4,minmax(0,1fr));}
 .ya-play-screen .game-start-content p{margin-bottom:6px;font-size:12px;}
 .ya-play-screen .game-start-content h2{font-size:19px;}
 .ya-play-screen .hf-table{grid-template-columns:1fr 1.35fr 1fr;grid-template-rows:minmax(0,1fr);align-items:stretch;}
 .ya-play-screen .hf-seat{align-content:center;}
 .ya-play-screen .hf-seat-you .hf-hand{display:flex;flex-wrap:wrap;gap:3px;}
 .ya-play-screen .hf-seat-you .hf-hand .hf-card{--hf-w:34px;}
 .ya-play-screen .hf-seat-opponent .hf-hand{flex-wrap:wrap;}
 .ya-play-screen .hf-pile{max-height:36px;}
 .ya-play-screen .df-opponents{grid-area:1/1/4/2;display:flex;flex-direction:column;}
 .ya-play-screen .df-table{grid-template-columns:110px 1fr;grid-template-rows:auto minmax(0,1fr) auto;}
 .ya-play-screen .df-flags{grid-area:1/2;}
 .ya-play-screen .df-field{grid-area:2/2;}
 .ya-play-screen .df-you{grid-area:3/2;}
 .ya-play-screen .df-seat-cards{display:none;}
 .ya-play-screen .df-you{display:grid;grid-template-columns:1fr auto;gap:4px;}
 .ya-play-screen .df-you-head{grid-column:1/-1;}
 .ya-play-screen .df-hand{padding-top:8px;}
 .ya-play-screen .df-actions{flex-direction:column;margin:0;gap:3px;}
 .ya-play-screen .df-btn{padding:4px 10px;min-height:30px;min-width:70px;}
 .ya-play-screen .df-hint{grid-column:1/-1;margin:0;}
}
@media(prefers-reduced-motion:reduce){html.ya-game-page{scroll-behavior:auto;}}
/* Captured cards keep all four kind counts visible, even late in a round. */
.ya-play-screen .hf-pile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;gap:3px;}
.ya-play-screen .hf-pile-group{min-width:0;overflow:hidden;gap:1px;}
.ya-play-screen .hf-pile-group .hf-card+.hf-card{margin-left:-14px;}
.ya-play-screen .hf-pile-group.is-stacked .hf-card+.hf-card{margin-left:-18px;}
.ya-play-screen .hf-pile-kind{font-size:8px;}
.ya-play-screen .df-field{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ya-play-screen .df-field-cards{display:grid;min-width:0;width:100%;grid-template-columns:var(--df-field-tracks,50px);justify-content:center;gap:0;}
.ya-play-screen .df-field-cards .df-card{--df-w:var(--df-field-hand-w,50px);}
/* Quiet controls, clear focus, and readable inspection outside the small table. */
.ya-confirm,.ya-card-inspector{margin:auto;padding:24px;background:#fffdf7;color:#253b43;border:1px solid #c6ba9f;border-radius:8px;box-shadow:0 18px 70px #071a3540;max-width:min(92vw,600px);max-height:85dvh;overflow:auto;}
.ya-confirm::backdrop,.ya-card-inspector::backdrop{background:#122b386b;backdrop-filter:blur(2px);}
.ya-confirm h2,.ya-card-inspector h2{font-size:20px;line-height:1.6;margin:0 0 20px;}
.ya-confirm-actions{display:flex;justify-content:flex-end;gap:12px;}
.ya-confirm .btn,.ya-card-inspector .btn{min-height:44px;}
.ya-confirm .secondary-btn,.ya-card-inspector .secondary-btn{background:#eeebe3;color:#37463f;border:1px solid #d8d2c4;border-radius:5px;box-shadow:inset 0 1px #fff;}
.ya-confirm .primary-btn{background:#233c49;color:#fff8e7;border:1px solid #233c49;border-radius:5px;}
.ya-card-inspector{width:560px;max-width:calc(100vw - 24px);box-sizing:border-box;}
.ya-inspector-header{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.ya-inspector-header h2{margin:0;font-size:18px;}
.ya-settings-note{font-size:12px;line-height:1.6;color:#6c716d;border-top:1px solid #dedbd2;margin:12px 0 0;padding-top:10px;}
.ya-inspector-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:18px 12px;margin-top:20px;}
.ya-inspector-cards figure{margin:0;display:flex;align-items:center;flex-direction:column;gap:7px;}
.ya-inspector-cards .hf-card{--hf-w:85px;}
.ya-inspector-cards figcaption{font-size:12px;line-height:1.5;text-align:center;}
.ya-play-screen button:focus-visible,.ya-play-screen [role=button]:focus-visible{outline:3px solid #dcb96b;outline-offset:3px;z-index:15;}
.ya-play-screen .hf-pile[role=button]{cursor:zoom-in;border-radius:3px;}
.ya-play-screen .hf-pile[role=button]:hover{background:#ffffff0e;}
.ya-play-screen .game-controls .btn:disabled{opacity:.4;cursor:default;}
.ya-play-screen .df-card.df-disabled{cursor:default;}
.ya-play-screen .df-selected{outline:2px solid #d5b268;outline-offset:1px;z-index:4;}
.ya-play-screen .game-end-content .ya-table th,.ya-play-screen .game-end-content .ya-table td{padding:6px 8px;}
.ya-play-screen .game-end-content .ya-table-wrap{margin:10px 0;}
.ya-play-screen .game-start-content p{display:block;}
@media(min-width:981px) and (min-height:700px){
 .ya-play-screen .hf-seat-head,.ya-play-screen .df-you-head{font-size:13px;line-height:22px;}
 .ya-play-screen .hf-field-label,.ya-play-screen .df-field-meta{font-size:12px;}
 .ya-play-screen .hf-seat-opponent .hf-card{--hf-w:28px;}
 .ya-play-screen .df-seat-name{font-size:13px;line-height:20px;}
 .ya-play-screen .df-seat-cards .df-card{--df-w:21px;}
 .ya-play-screen .df-seat-count,.ya-play-screen .df-hint{font-size:12px;line-height:18px;}
 .ya-play-screen .hf-pile-kind{font-size:10px;}
 .ya-play-screen .game-controls .btn{min-height:36px;}
}
@media(pointer:coarse){.ya-play-screen .game-controls .btn{min-height:40px;}.ya-play-screen .settings-gear-btn{width:40px;height:40px;}}
.ya-play-screen .df-exchange{position:absolute;inset:0;z-index:18;display:grid;place-items:center;padding:12px;background:#132e38ae;}
.ya-play-screen .df-exchange-box{width:min(100%,560px);padding:20px;max-height:100%;overflow:auto;background:#fffdf7;color:#263c43;border:1px solid #bca77a;border-radius:6px;box-shadow:0 12px 40px #071b2b40;}
.ya-play-screen .df-exchange-box h3{font-size:17px;line-height:1.5;margin:0 0 18px;}
.ya-play-screen .df-exchange-hand{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:14px 7px;padding:10px 0;}
.ya-play-screen .df-exchange-hand .df-card{--df-w:100%;width:100%;}
.ya-play-screen .df-exchange-confirm{margin-top:14px;width:100%;}
/* Touch: a tap is not a double-tap zoom, a long press does not select a card, and
   a finger does not leave a card lifted the way a hovering mouse would. */
.ya-play-screen .ya-stage{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
@media(hover:none){
 .ya-play-screen .hf-selectable:not(.hf-selected):hover,.ya-play-screen .df-selectable:not(.df-selected):hover{transform:none;}
}
/* Phone, upright. The scarce resource is width, and the header row, the opponent
   and the status text are all competing with the playing surface for height. */
@media(max-width:640px) and (orientation:portrait){
 .ya-game-page .ya-shell{padding-left:4px;padding-right:4px;}
 body.ya-game-page>header .container{min-height:46px;}
 .ya-play-screen{gap:3px;}
 .ya-play-screen:not(.ya-play-online){grid-template-rows:34px minmax(0,1fr) auto;}
 .ya-play-screen .game-header h2{font-size:14px;}
 .ya-play-screen .settings-gear-btn{width:34px;height:34px;min-width:34px;padding:5px;}
 .ya-play-screen .ya-stage{border-radius:6px;}
 /* One surface for all three games: the board sits on a mat the way the cards sit
    on felt, so spare height on a tall phone reads as table rather than empty page. */
 .ya-play-screen[data-game=shogi] .ya-stage{background:linear-gradient(180deg,#1f3a47,#172c37)!important;box-shadow:inset 0 0 0 1px #c9a55c33,inset 0 0 40px #0a1c2640!important;border-radius:8px!important;}
 /* Shogi: a thin rim gives its width to the squares, and the stands grow into
    whatever height the board leaves, because that is where drops are tapped. */
 .ya-play-screen .sg-root{gap:6px;}
 .ya-play-screen .sg-board-wrap.sg-has-coords{padding:14px 16px 6px 6px;}
 .ya-play-screen .sg-files{left:6px;right:16px;top:1px;height:12px;font-size:9px;}
 .ya-play-screen .sg-ranks{top:14px;bottom:6px;right:1px;width:14px;font-size:9px;}
 .ya-play-screen .sg-stand{height:var(--sg-stand-h,44px);min-height:var(--sg-stand-h,44px);padding:2px 5px;}
 .ya-play-screen .sg-stand-list{min-height:0;height:100%;align-items:center;justify-content:flex-end;}
 .ya-play-screen .sg-stand-label,.ya-play-screen .sg-stand-empty{color:#5b4322;font-size:11px;}
 .ya-play-screen .sg-hand-piece{height:calc(var(--sg-stand-h,44px) - 6px);width:calc((var(--sg-stand-h,44px) - 6px)*.86);max-width:14%;flex:0 1 auto;}
 .ya-play-screen .sg-hand-piece .sg-face{font-size:calc(var(--sg-stand-h,44px)*.4);}
 .ya-play-screen .sg-hand-count{font-size:10px;min-width:15px;height:15px;line-height:15px;}
 .ya-play-screen .sg-promo-ask{left:50%!important;top:50%!important;transform:translate(-50%,-50%);padding:12px;gap:12px;}
 .ya-play-screen .sg-promo-ask button{min-width:72px;min-height:64px;font-size:24px;}
 /* Cards: the fitted hand wraps, so it no longer needs room above for a fan. */
 .ya-play-screen .hf-table,.ya-play-screen .df-table{border-width:3px;padding:4px;gap:3px;border-radius:7px;}
 .ya-play-screen .hf-seat-you .hf-hand{padding-top:7px;}
 .ya-play-screen .hf-seat-opponent .hf-card{--hf-w:18px;}
 .ya-play-screen .hf-seat{padding:3px 6px;}
 .ya-play-screen .hf-field{padding:4px;}
 .ya-play-screen .df-opponents{display:flex;gap:4px;}
 .ya-play-screen .df-seat{flex:1 1 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px;}
 .ya-play-screen .df-seat-cards{grid-column:1/-1;min-height:18px;}
 /* The actions sit on your name row, directly above the hand; the hand itself
    stays at the very bottom, under the thumb. */
 .ya-play-screen .df-you{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px;padding:4px 6px;}
 .ya-play-screen .df-you-head{grid-column:1;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .ya-play-screen .df-actions{grid-column:2;grid-row:1;margin:0;gap:6px;flex-wrap:nowrap;}
 .ya-play-screen .df-btn{min-width:72px;min-height:42px;padding:0 12px;font-size:14px;white-space:nowrap;}
 .ya-play-screen .df-btn:disabled{opacity:1;background:#ffffff12;color:#ffffff66;}
 .ya-play-screen .df-hint{grid-column:1/-1;grid-row:2;min-height:0;margin:2px 0 0;}
 .ya-play-screen .df-hint:empty,.ya-play-screen .df-hint.is-waiting{display:none;}
 .ya-play-screen .df-hand{grid-column:1/-1;grid-row:3;padding-top:10px;}
 .ya-play-footer{gap:4px;}
 .ya-play-footer .ya-status{min-width:0;padding:4px 6px;}
 .ya-play-footer .game-controls{flex:0 0 auto;}
 .ya-play-footer .game-controls .btn{min-height:40px;padding:4px 9px;white-space:nowrap;}
 .ya-play-footer .ya-status{flex:1 1 40%;}
 .ya-play-footer #hf-message,.ya-play-footer #df-message{padding:2px 6px;max-height:32px;}
 /* Online: the opponent above the table and you below it, as every phone board
    and card app lays it out. The desktop panel dissolves so its parts can sit in
    those two rows: opponent, clock and turn on top; you and the actions below. */
 .ya-play-online{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;gap:3px 6px;}
 .ya-play-online>.ya-stage{grid-column:1/-1;grid-row:2;}
 .ya-play-online .game-info-panel,.ya-play-online .game-info{display:contents;}
 .ya-play-online .player-info{grid-column:1;box-sizing:border-box;min-width:0;width:100%;max-width:100%;overflow:hidden;height:36px;display:flex;align-items:center;gap:7px;margin:0;padding:0 8px 0 5px;flex:none;border-radius:18px;background:transparent;transition:background .2s,box-shadow .2s;}
 /* Whose move it is reads from across the room: their bar lights up. */
 .ya-play-online .player-info.is-turn{background:#fff8e6;box-shadow:inset 0 0 0 1.5px #c9a55c;}
 .ya-play-online .player-info:first-child{grid-row:3;}
 .ya-play-online .player-info:last-child{grid-row:1;flex-direction:row;justify-content:flex-start;}
 .ya-play-online .player-info:last-child .player-avatar{order:-1;}
 .ya-play-online .player-details,.ya-play-online .player-info:first-child .player-details,.ya-play-online .player-info:last-child .player-details{flex:1 1 auto;display:flex;flex-direction:row;align-items:baseline;gap:6px;min-width:0;text-align:left;}
 .ya-play-online .player-details h3{flex:0 1 auto;min-width:0;font-size:13px;line-height:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .ya-play-online .side-chip{flex:0 0 auto;font-size:10px;line-height:14px;white-space:nowrap;}
 .ya-play-online .player-avatar{width:26px;height:26px;flex:0 0 26px;margin:0;}
 .ya-play-online .game-status{grid-column:2;grid-row:1;order:0;display:flex;flex-direction:row-reverse;align-items:center;gap:8px;margin:0;}
 .ya-play-online .game-status .timer{font-size:12px;gap:3px;display:flex;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;}
 .ya-play-online .turn-indicator{font-size:12px;font-weight:700;white-space:nowrap;margin:0;padding:0;}
 .ya-play-online .game-pass-action{grid-column:2;grid-row:3;display:flex;gap:5px;align-items:center;margin:0;padding:0;}
 .ya-play-online .game-pass-action .btn{min-height:36px;margin:0;padding:0 10px;font-size:12px;width:auto;white-space:nowrap;}
 .ya-play-online #online-forfeit-notice{grid-column:1/-1;grid-row:4;margin:0!important;padding:3px 8px;font-size:12px;line-height:1.4;}
 /* Once a game is on, the page above it is only in the way. */
 body.ya-playing .ya-play-intro{display:none;}
 body.ya-playing .ya-game-shell>.game-container>.game-header{display:none;}
 /* In the lobby the page title above already says this; only the gear earns a row. */
 body.ya-game-page:not(.ya-playing) .ya-game-shell>.game-container>.game-header{justify-content:flex-end;margin:0 0 6px;min-height:0;}
 body.ya-game-page:not(.ya-playing) .ya-game-shell>.game-container>.game-header h2{display:none;}
 /* Dialogs stay inside the stage and keep thumb-sized choices. */
 .ya-play-screen .game-start-content,.ya-play-screen .game-end-content{padding:16px;}
 .ya-play-screen .game-end-buttons .btn{flex:1 1 40%;min-height:44px;}
 .ya-play-screen .hf-decision{padding:10px;}
 .ya-play-screen .hf-decision-box h3{font-size:21px;line-height:1.35;}
 .ya-play-screen .hf-decision-box .hf-decision-sub{font-size:13px;line-height:1.55;margin-bottom:10px;}
 .ya-play-screen .hf-decision-yaku{margin-bottom:12px;}
 .ya-play-screen .hf-decision-yaku .hf-yaku-chip{font-size:12px;padding:3px 8px;}
 .ya-play-screen .hf-decision-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
 .ya-play-screen .hf-decision-box button{min-width:0;min-height:64px;padding:8px 6px;font-size:16px;line-height:1.25;}
 .ya-play-screen .hf-btn-sub{font-size:11px;line-height:1.3;}
 /* The whole hand fits without scrolling, so the confirm button is always in reach. */
 .ya-play-screen .df-exchange{padding:8px;}
 .ya-play-screen .df-exchange-box{padding:12px;}
 .ya-play-screen .df-exchange-box h3{font-size:15px;margin:0 0 8px;text-align:center;}
 .ya-play-screen .df-exchange-hand{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 5px;padding:4px 0;}
 .ya-play-screen .df-exchange-confirm{position:sticky;bottom:0;margin-top:8px;min-height:46px;}
}
@media(max-width:360px) and (orientation:portrait){
 .ya-play-online .side-chip{display:none;}
 .ya-play-footer .ya-status{font-size:10px;}
 .ya-play-footer .game-controls .btn{padding:4px 7px;font-size:11px;}
}
/* Wide window. The table takes the full height and everything else lives in one
   column on the right: who is playing, whose turn it is, the controls, and the
   one reference each game is played with (the 棋譜, the yaku, the card order).
   While a game is running the site menu shrinks to its icons. The query matches
   deskQuery in game-viewport.js. */
.ya-side-extra{display:none;}
.hf-deck{display:none;}
@media(min-width:1024px) and (min-height:600px) and (orientation:landscape){
 body.ya-playing .ya-shell{--ya-sidebar-w:64px;grid-template-columns:64px minmax(0,1fr);gap:14px;max-width:1880px;padding-left:12px;padding-right:16px;}
 body.ya-playing .ya-sidebar{padding:8px 6px;}
 body.ya-playing .ya-sidebar-title,body.ya-playing .ya-game-names,body.ya-playing .ya-game-caret{display:none;}
 body.ya-playing .ya-game-head{justify-content:center;padding:6px 0;}
 body.ya-playing .ya-game-links{padding:0;margin:2px 0 4px;}
 body.ya-playing .ya-game-links a,body.ya-playing .ya-sidebar-foot a{justify-content:center;font-size:0;gap:0;padding:9px 0;}
 body.ya-playing .ya-game-links a i,body.ya-playing .ya-sidebar-foot a i{font-size:14px;width:auto;}
 body.ya-playing .ya-play-intro{display:none;}
 body.ya-playing .ya-game-shell>.game-container>.game-header{display:none;}

 .ya-play-screen{--ya-side-w:clamp(264px,21vw,320px);grid-template-columns:minmax(0,1fr) var(--ya-side-w);grid-template-rows:auto minmax(0,1fr);gap:10px 14px;}
 .ya-play-screen>.ya-stage{grid-column:1;grid-row:1/-1;}
 .ya-play-screen>.game-header{grid-column:2;grid-row:1;padding:0 2px;min-height:38px;}
 .ya-play-screen>.game-header h2{font-size:18px;}
 .ya-play-footer,.ya-play-online .game-info-panel{grid-column:2;grid-row:2;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;min-height:0;padding:12px;background:#fffdf7;border:1px solid #e3dccb;border-radius:10px;box-shadow:0 4px 18px #2a302a0c;overflow:hidden;}
 .ya-play-online{grid-template-rows:minmax(0,1fr);}
 .ya-play-online .game-info-panel{grid-row:1;}

 /* Status: whose turn, large; the details of the deal and the clock beneath. */
 .ya-play-footer .ya-status{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:12px 14px;border-radius:8px;background:#f3eee2;font-size:13px;line-height:1.5;min-height:0;color:#4b5651;}
 .ya-play-footer .ya-status .ya-turn{flex:1 1 auto;font-size:18px;line-height:1.4;font-weight:700;}
 .ya-play-footer .ya-status .ya-timer{order:1;margin-left:auto;font-variant-numeric:tabular-nums;}
 .ya-play-footer .ya-status>span:not(.ya-turn):not(.ya-timer){order:2;}
 .ya-play-footer .ya-status:has(>span:not(.ya-turn):not(.ya-timer):not(:empty))::after{content:'';order:1;flex-basis:100%;height:0;}
 .ya-play-footer #hf-message,.ya-play-footer #df-message{order:0;flex:0 0 auto;max-height:none;min-height:0!important;padding:10px 12px;background:#fff;border:1px solid #ece5d6;font-size:13px;line-height:1.6;}
 .ya-play-footer .game-controls{order:5;margin-top:auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;}
 .ya-play-footer .game-controls .btn{min-height:42px;font-size:13px;padding:8px 6px;white-space:nowrap;}

 /* The game's own panels share whatever height is left and scroll inside. */
 .ya-side-extra{order:3;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
 .ya-side-extra:empty{display:none;}
 .ya-game-details{display:none;}
 .ya-side-extra>.ya-panel,.ya-side-extra>.ya-side-panel,.ya-side-extra>.chat-container{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;margin:0!important;padding:0;border:0;box-shadow:none;background:transparent;}
 .ya-side-extra h3,.ya-side-extra .chat-header h3{font-size:12px!important;letter-spacing:.08em;color:#7d7461;margin:0 0 6px!important;font-weight:700;}
 .ya-side-extra .chat-header{padding:0;border:0;background:none;}
 .ya-side-extra .sg-kifu,.ya-side-extra .ya-table-wrap,.ya-side-extra .ya-side-body{min-height:0;overflow:auto;}
 .ya-side-extra .sg-kifu{flex:1 1 auto;max-height:none;font-size:14px;border-radius:8px;}
 .ya-side-extra .sg-kifu:empty::before{content:attr(data-empty);display:block;padding:14px 12px;color:#9a917f;font-size:13px;}
 .ya-side-extra>.ya-panel:has(.sg-kifu),.ya-side-extra>#sg-online-kifu{flex:1 1 0;min-height:120px;}
 .ya-side-extra .ya-table{width:100%;min-width:0;table-layout:fixed;}
 .ya-side-extra .ya-table th,.ya-side-extra .ya-table td{padding:6px 8px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .ya-side-extra .ya-table th:first-child,.ya-side-extra .ya-table td:first-child{width:42%;}
 .ya-side-extra #sg-online-kifu,.ya-side-extra>.ya-panel:has(.sg-kifu){order:-1;}
 .ya-side-extra .system-message p{font-size:12px;margin:4px 0;}

 /* Hanafuda yaku list */
 .hf-yaku-guide{display:grid;gap:1px;background:#ece5d6;border:1px solid #ece5d6;border-radius:8px;}
 .hf-guide-row{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;gap:8px;align-items:center;padding:4px 10px;background:#fff;font-size:13px;line-height:1.4;}
 .hf-guide-row b{text-align:right;color:#6e6352;font-variant-numeric:tabular-nums;}
 .hf-guide-count{font-size:12px;color:#8b8474;font-variant-numeric:tabular-nums;}
 .hf-guide-row.is-held{background:#fbf1d8;color:#8c1d33;font-weight:700;}
 .hf-guide-row.is-held b{color:#8c1d33;}

 /* Daifugo card order and rules */
 .df-ladder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
 .df-ladder span{display:grid;place-items:center;height:28px;border-radius:4px;background:#fff;border:1px solid #e3dccb;font:700 13px/1 Georgia,serif;color:#33413f;}
 .df-ladder span:last-child{background:#233c49;border-color:#233c49;color:#f3d79c;}
 .df-ladder.is-reversed span:not(:last-child){background:#fbeaea;border-color:#e8c2c2;color:#8c1d33;}
 .df-ladder-ends{display:flex;justify-content:space-between;font-size:11px;color:#8b8474;margin:4px 0 10px;}
 .df-guide-rule{display:grid;gap:1px;padding:7px 0;border-top:1px solid #eee7d8;font-size:12px;line-height:1.55;color:#5c625c;}
 .df-guide-rule b{font-size:13px;color:#33413f;}

 /* Online: the opponent at the top of the column, you at the foot, the same
    order the table reads in. */
 .ya-play-online .game-info-panel>.game-header{order:0;margin:0;padding:0 0 4px;border-bottom:1px solid #eee7d8;}
 .ya-play-online .game-info-panel>.game-header h2{font-size:16px;}
 .ya-play-online .game-info{display:contents;}
 .ya-play-online .player-info{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;width:auto;min-width:0;border-radius:10px;background:#f6f2e8;flex:0 0 auto;transition:background .2s,box-shadow .2s;}
 .ya-play-online .player-info:last-child{order:1;}
 .ya-play-online .player-info:first-child{order:4;}
 .ya-play-online .player-info .player-avatar{order:-1;width:36px;height:36px;flex:0 0 36px;margin:0;}
 .ya-play-online .player-info.is-turn{background:#fff6df;box-shadow:inset 0 0 0 2px #c9a55c;}
 .ya-play-online .player-details,.ya-play-online .player-info:first-child .player-details,.ya-play-online .player-info:last-child .player-details{flex:1 1 auto;min-width:0;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
 .ya-play-online .player-details h3{font-size:14px;line-height:1.4;margin:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .ya-play-online .side-chip{font-size:11px;}
 .ya-play-online .game-status{order:2;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:2px 4px;}
 .ya-play-online .turn-indicator{font-size:16px;font-weight:700;margin:0;}
 .ya-play-online .game-status .timer{font-size:13px;display:flex;gap:4px;align-items:center;font-variant-numeric:tabular-nums;margin:0;color:#6d6f69;}
 .ya-play-online #online-forfeit-notice{order:2;margin:0!important;}
 .ya-play-online .game-pass-action{order:5;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;}
 .ya-play-online .game-pass-action:not(:has(.btn:not(.hidden))){display:none;}
 .ya-play-online .game-pass-action .btn{min-height:42px;font-size:13px;padding:8px 6px;margin:0;width:auto;}
 .ya-side-extra>.chat-container{flex:1 1 0;min-height:150px;height:auto;max-height:none;}
 .ya-side-extra .chat-messages{flex:1 1 auto;min-height:0;height:auto;max-height:none;border-radius:8px;}
 .ya-side-extra .chat-input{flex:0 0 auto;margin-top:6px;}

 /* Shogi: a mat under the board, and the 駒台 beside it — the opponent's to the
    upper left, yours to the lower right. */
 .ya-play-screen[data-game=shogi] .ya-stage{background:linear-gradient(180deg,#1f3a47,#172c37)!important;box-shadow:inset 0 0 0 1px #c9a55c33,inset 0 0 60px #0a1c2650!important;border-radius:10px!important;}
 .ya-play-screen[data-sg-layout=rails] .sg-root{justify-items:stretch;grid-template-columns:var(--sg-rail) var(--sg-fit-width) var(--sg-rail);grid-template-rows:auto;gap:12px;align-items:stretch;justify-content:center;}
 .ya-play-screen[data-sg-layout=rails] .sg-stand{width:auto;max-width:none;height:auto;min-height:calc(var(--sg-fit-width)*.42);flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 12px;}
 .ya-play-screen[data-sg-layout=rails] .sg-stand-top{grid-column:1;grid-row:1;align-self:start;}
 .ya-play-screen[data-sg-layout=rails] .sg-board-wrap{grid-column:2;grid-row:1;}
 .ya-play-screen[data-sg-layout=rails] .sg-stand-bottom{grid-column:3;grid-row:1;align-self:end;}
 .ya-play-screen[data-sg-layout=rails] .sg-stand-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 6px;align-content:start;justify-items:center;height:auto;min-height:0;}
 .ya-play-screen[data-sg-layout=rails] .sg-hand-piece{width:48px;height:52px;flex:none;}
 .ya-play-screen[data-sg-layout=rails] .sg-hand-count{font-size:11px;min-width:17px;height:17px;line-height:17px;}
 .ya-play-screen[data-sg-layout=rails] .sg-stand-label{font-size:13px;color:#5b4322;}
 .ya-play-screen[data-sg-layout=rails] .sg-stand-empty{font-size:12px;color:#7a6142;}
 .ya-play-screen[data-sg-layout=stack] .sg-stand{height:64px;min-height:64px;}
 .ya-play-screen[data-sg-layout=stack] .sg-hand-piece{width:44px;height:50px;flex:none;}
 .ya-play-screen .sg-files,.ya-play-screen .sg-ranks{font-size:12px;}

 /* Hanafuda: the opponent and their captures across the top, the field with the
    draw pile, then your captures and a hand of large cards. */
 .ya-play-screen .hf-table{padding:12px;gap:10px;}
 .ya-play-screen .hf-seat{padding:8px 12px;gap:6px;}
 .ya-play-screen .hf-seat-opponent{display:grid;grid-template-columns:minmax(220px,auto) minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;align-items:center;}
 .ya-play-screen .hf-seat-opponent .hf-seat-head{grid-column:1;grid-row:1;}
 .ya-play-screen .hf-seat-opponent .hf-hand{grid-column:1;grid-row:2;justify-content:flex-start;}
 .ya-play-screen .hf-seat-opponent .hf-card{--hf-w:30px;}
 .ya-play-screen .hf-seat-opponent .hf-pile{grid-column:2;grid-row:1/3;}
 .ya-play-screen .hf-seat-opponent .hf-yaku{grid-column:1/-1;grid-row:3;}
 .ya-play-screen .hf-seat-you{display:flex;flex-direction:column;}
 .ya-play-screen .hf-seat-you .hf-seat-head{order:0;}
 .ya-play-screen .hf-seat-you .hf-pile{order:1;}
 .ya-play-screen .hf-seat-you .hf-yaku{order:2;}
 .ya-play-screen .hf-seat-you .hf-hand{order:3;padding-top:14px;}
 .ya-play-screen .hf-seat-head{font-size:14px;line-height:22px;}
 .ya-play-screen .hf-seat-points b{font-size:16px;}
 .ya-play-screen .hf-pile{max-height:none;gap:10px;padding:2px 0;}
 .ya-play-screen .hf-pile .hf-card{--hf-w:30px;}
 .ya-play-screen .hf-pile-group .hf-card+.hf-card{margin-left:-17px;}
 .ya-play-screen .hf-pile-group.is-stacked .hf-card+.hf-card{margin-left:-23px;}
 .ya-play-screen .hf-pile-kind{font-size:11px;margin-right:4px;}
 .ya-play-screen .hf-yaku{max-height:none;flex-wrap:wrap;}
 .ya-play-screen .hf-yaku-chip{font-size:12px;padding:2px 8px;}
 .ya-play-screen .hf-field{position:relative;padding:10px 12px 10px 136px;}
 .ya-play-screen .hf-field-label{font-size:12px;}
 .ya-play-screen .hf-field-label .hf-deck-count{display:none;}
 .ya-play-screen .hf-field-row{gap:8px;}
 .hf-deck{display:flex;position:absolute;left:24px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:6px;}
 .hf-deck .hf-card{--hf-w:84px;box-shadow:3px 3px 0 #2b1a14,6px 6px 0 #1d120e,0 10px 18px #0006;}
 .hf-deck-left{font:700 13px/1 Georgia,serif;color:#f3e3bd;letter-spacing:.06em;}
 .ya-play-screen .hf-would-take{outline:3px solid #f2cf7a;outline-offset:2px;transform:translateY(-4px);transition:transform .12s;}

 /* Daifugo: the other players around the table — next to play on the left,
    then across, then on the right — the field in the middle, your hand below. */
 .ya-play-screen .df-table{padding:12px;gap:10px;grid-template-columns:minmax(150px,13%) minmax(0,1fr) minmax(150px,13%);grid-template-rows:auto auto minmax(0,1fr) auto;}
 .ya-play-screen .df-opponents{display:contents;}
 .ya-play-screen .df-seat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 8px;border-radius:8px;}
 .ya-play-screen .df-seat:nth-child(1){grid-column:1;grid-row:1/4;align-self:center;}
 .ya-play-screen .df-seat:nth-child(2){grid-column:2;grid-row:1;justify-self:center;min-width:240px;}
 .ya-play-screen .df-seat:nth-child(3){grid-column:3;grid-row:1/4;align-self:center;}
 .ya-play-screen .df-seat:only-child{grid-column:2;grid-row:1;justify-self:center;align-self:start;min-width:260px;}
 .ya-play-screen .df-seat-name{font-size:14px;line-height:20px;}
 .ya-play-screen .df-seat-title{font-size:11px;padding:1px 6px;}
 .ya-play-screen .df-seat-cards{min-height:48px;}
 .ya-play-screen .df-seat-cards .df-card{--df-w:32px;}
 .ya-play-screen .df-seat-cards .df-card+.df-card{margin-left:-24px;}
 .ya-play-screen .df-seat-count{font-size:13px;}
 .ya-play-screen .df-pass-tag{font-size:11px;padding:1px 8px;}
 .ya-play-screen .df-flags{grid-column:2;grid-row:2;justify-content:center;}
 .ya-play-screen .df-flag{font-size:12px;padding:3px 10px;}
 .ya-play-screen .df-field{grid-column:2;grid-row:3;padding:12px;}
 .ya-play-screen .df-field-meta,.ya-play-screen .df-field-empty{font-size:13px;}
 .ya-play-screen .df-you{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;padding:10px 14px 12px;}
 .ya-play-screen .df-you-head{grid-column:1;grid-row:1;font-size:14px;line-height:22px;}
 .ya-play-screen .df-hint{grid-column:2;grid-row:1;margin:0;font-size:13px;line-height:20px;min-height:20px;text-align:center;}
 .ya-play-screen .df-hint.is-waiting{visibility:hidden;}
 .ya-play-screen .df-actions{grid-column:3;grid-row:1;justify-self:end;flex-wrap:nowrap;margin:0;}
 .ya-play-screen .df-hand{grid-column:1/-1;grid-row:2;padding-top:16px;}
 .ya-play-screen .df-btn{min-height:42px;min-width:112px;font-size:14px;}
 .ya-play-screen .df-btn:disabled{opacity:1;background:#ffffff10;color:#ffffff59;box-shadow:none;}
}
@media(max-width:640px) and (orientation:portrait){
 .ya-play-online .game-status .settings-gear-container{order:-1;position:relative;}
 .ya-play-online .game-status .settings-gear-btn{width:32px;height:32px;min-width:32px;padding:6px;}
 .ya-play-online .game-status .settings-dropdown{right:0;left:auto;top:calc(100% + 6px);}
}
/* The exchange confirm stays in reach on every screen, never scrolled away. */
.ya-play-screen .df-exchange-confirm{position:sticky;bottom:0;box-shadow:0 -8px 12px -6px #fffdf7;}
@media(max-height:540px) and (orientation:landscape){
 .ya-play-screen .df-exchange-box{padding:10px 12px;}
 .ya-play-screen .df-exchange-box h3{font-size:14px;margin:0 0 6px;}
 .ya-play-screen .df-exchange-box{width:min(100%,820px);}
 .ya-play-screen .df-exchange-hand{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:2px 0;}
 .ya-play-screen .df-exchange-confirm{margin-top:6px;min-height:38px;}
}
.ya-play-screen .df-exchange-confirm:disabled{opacity:1;background:#e9e3d4;color:#9a917f;border-color:#ddd5c3;}

/* ------------------------------------------------------------ chat dock
   yamato-chat-dock.js. It never floats over the board: on a wide window it is
   the foot of the side column; elsewhere a button in your own bar and a sheet
   you open on purpose. */
.ya-chat-toggle{position:relative;display:flex;align-items:center;gap:8px;min-width:0;border:1px solid #e3dccb;background:#fffdf7;color:#233c49;border-radius:10px;cursor:pointer;font:inherit;transition:background .15s,border-color .15s;}
.ya-chat-toggle:hover{border-color:#cfc3a6;background:#fbf7ee;}
.ya-chat-toggle:focus-visible{outline:3px solid #dcb96b;outline-offset:2px;}
.ya-chat-icon{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;}
.ya-chat-icon svg{width:20px;height:20px;}
.ya-chat-label{font-weight:700;font-size:13px;white-space:nowrap;}
.ya-chat-last{flex:1 1 auto;min-width:0;font-size:12.5px;color:#7a7466;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.ya-chat-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#b3262f;color:#fff;font:700 11.5px/20px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fffdf7;}
.ya-chat-toggle.has-unread{border-color:#e8b9a6;}
.ya-chat-toggle.has-unread .ya-chat-last{color:#233c49;font-weight:600;}
.ya-chat-panel{display:flex;flex-direction:column;min-height:0;background:#fffdf7;}
.ya-chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px;border-bottom:1px solid #eee7d8;}
.ya-chat-head b{font-size:13px;letter-spacing:.06em;color:#7d7461;}
.ya-chat-close{width:32px;height:32px;display:grid;place-items:center;border:0;background:none;border-radius:8px;color:#7d7461;cursor:pointer;}
.ya-chat-close:hover{background:#efe9db;color:#233c49;}
.ya-chat-close svg{width:18px;height:18px;}
.ya-chat-panel .chat-container{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;box-shadow:none;background:transparent;height:auto;max-height:none;}
.ya-chat-panel .chat-messages{flex:1 1 auto;min-height:0;height:auto;max-height:none;overflow-y:auto;padding:10px 2px;display:flex;flex-direction:column;gap:8px;border:0;background:transparent;}
.ya-chat-panel .chat-messages:not(:has(.message)):not(:has(.system-message))::before{content:attr(data-empty);margin:auto;color:#9a917f;font-size:13px;}
.ya-chat-panel .chat-messages .message{max-width:85%;align-self:flex-start;margin:0;padding:7px 11px;border-radius:12px 12px 12px 4px;background:#f1ece0;color:#2f3b37;border:0;box-shadow:none;}
.ya-chat-panel .chat-messages .message.own-message{align-self:flex-end;border-radius:12px 12px 4px 12px;background:#233c49;color:#fff8e7;}
.ya-chat-panel .message-sender{display:block;font-size:11px;font-weight:700;color:#8a7d61;margin:0 0 2px;}
.ya-chat-panel .own-message .message-sender{color:#d9c48f;}
.ya-chat-panel .chat-messages .message p{margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;}
.ya-chat-panel .system-message{align-self:center;max-width:92%;margin:0;padding:0;background:none;border:0;}
.ya-chat-panel .system-message p{margin:0;font-size:12px;line-height:1.5;color:#8b8474;text-align:center;}
.ya-chat-panel .chat-input{flex:0 0 auto;display:flex;gap:6px;margin:0;padding:8px 0 0;border-top:1px solid #eee7d8;}
.ya-chat-panel .chat-input input{flex:1 1 auto;min-width:0;min-height:42px;font-size:15px;border-radius:9px;border:1px solid #ddd5c3;padding:0 12px;background:#fff;}
.ya-chat-panel .chat-input button{flex:0 0 44px;min-height:42px;border-radius:9px;background:#233c49;color:#fff8e7;border:0;}
/* The site-wide focus ring sits 4px outside the field, where the panel's edge
   clips it; in the side column the ring is drawn inside the field instead. */
.ya-chat-panel .chat-input input:focus,.ya-chat-panel .chat-input input:focus-visible,
.ya-side-extra input:focus,.ya-side-extra input:focus-visible,
.ya-play-online .spectate-url-input:focus,.ya-play-online .spectate-url-input:focus-visible{outline:none;border-color:#b8954a;box-shadow:inset 0 0 0 1px #b8954a;}
.ya-chat-panel .chat-input button:focus-visible{outline:2px solid #dcb96b;outline-offset:-4px;}
.ya-chat-panel .spectate-info-bar{margin-top:8px;}
/* Toasts: an echo of each new line while the chat is closed. Never a tap target. */
.ya-chat-toasts{position:fixed;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none;}
.ya-chat-toast{max-width:100%;display:flex;flex-direction:column;gap:1px;padding:7px 12px 8px;border-radius:12px 12px 4px 12px;background:#fffdf7;border:1px solid #e3dccb;box-shadow:0 6px 18px rgba(20,32,40,.16);color:#233c49;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;}
.ya-chat-toast:not(.is-mine){align-self:flex-start;border-radius:12px 12px 12px 4px;}
.ya-chat-toast.is-mine{background:#233c49;border-color:#233c49;color:#fffdf7;}
.ya-chat-toast b{font-size:11px;font-weight:700;color:#8a7d61;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ya-chat-toast.is-mine b{color:#e8cf8f;}
.ya-chat-toast span{font-size:13.5px;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ya-chat-toast.is-shown{opacity:.97;transform:none;}
.ya-chat-toast.is-leaving{opacity:0;transform:translateY(-4px);}
body.ya-chat-open .ya-chat-toasts{display:none;}
.ya-chat-scrim{display:none;}

/* Wide window: the bar is the column's last row; open, it takes the place of
   the reference panels, so players, turn and buttons are never covered. */
@media(min-width:1024px) and (min-height:600px) and (orientation:landscape){
 .ya-play-online .game-info-panel>.ya-chat-toggle{order:6;flex:0 0 auto;width:100%;min-height:44px;padding:0 12px;}
 .ya-play-online .game-info-panel>.ya-chat-panel{order:3;display:none;flex:1 1 0;min-height:160px;}
 .ya-play-online .game-info-panel.is-chatting>.ya-chat-panel{display:flex;}
 .ya-play-online .game-info-panel.is-chatting>.ya-side-extra{display:none;}
 .ya-play-online .game-info-panel.is-chatting>.ya-chat-toggle .ya-chat-last{visibility:hidden;}
}
/* Phone and narrow window: a button in your own bar, a sheet from below. */
@media not all and (min-width:1024px) and (min-height:600px) and (orientation:landscape){
 .ya-play-online .game-pass-action .ya-chat-toggle{order:9;flex:0 0 auto;width:40px;height:36px;min-height:36px;padding:0;justify-content:center;gap:0;}
 .ya-play-online .game-pass-action .ya-chat-label,.ya-play-online .game-pass-action .ya-chat-last{display:none;}
 .ya-play-online .game-pass-action .ya-chat-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;line-height:18px;font-size:10.5px;padding:0 5px;}
 .ya-play-online .game-pass-action{display:flex;}
 body.ya-playing .ya-chat-scrim{display:block;position:fixed;inset:0;z-index:1190;background:#0f1d2466;opacity:0;pointer-events:none;transition:opacity .2s;}
 body.ya-playing.ya-chat-open .ya-chat-scrim{opacity:1;pointer-events:auto;}
 body>.ya-chat-panel{position:fixed;left:0;right:0;bottom:0;z-index:1200;height:min(64dvh,520px);padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;box-shadow:0 -10px 30px #0f1d2433;transform:translateY(105%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s .26s;}
 body.ya-playing.ya-chat-open>.ya-chat-panel{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1);}
 body:not(.ya-playing)>.ya-chat-panel{display:none;}
 .ya-play-online .player-info:first-child{position:relative;}
}
@media(prefers-reduced-motion:reduce){body>.ya-chat-panel,.ya-chat-scrim,.ya-chat-toast{transition:none!important;}}

/* ---- Result card (yamato-result.js) ---------------------------------------
   Open: a light veil, no blur, so the final position still reads behind the
   card. Folded ("View board", Esc, a tap on the veil): nothing over the table
   at all, and a "Show result" button waits in the status row. */
.ya-play-screen .game-end-overlay{background:rgba(14,28,36,.42);-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px;animation:ya-res-veil .2s ease both;}
.ya-play-screen .game-end-overlay.overlay-hidden{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none;animation:none;}
.ya-play-screen .game-end-overlay.overlay-hidden .game-end-content{display:none;}
.game-end-overlay:not(#spectate-game-end-overlay) .show-overlay-btn{display:none!important;}
body.ya-result-collapsed .sg-banner{display:none;}
.ya-play-screen .game-end-content{display:flex;flex-direction:column;align-items:center;width:min(100%,380px);max-height:100%;overflow:hidden;padding:22px 20px 18px;border-radius:16px;background:#fffdf7;border:1px solid #e4d8bd;box-shadow:0 24px 60px rgba(8,22,30,.34);text-align:center;animation:ya-res-rise .3s cubic-bezier(.2,.8,.2,1) both;}
@keyframes ya-res-veil{from{opacity:0}to{opacity:1}}
@keyframes ya-res-rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* "View board": a labelled button in the corner, not a lone chevron. */
.ya-play-screen .game-end-content .ya-result-peek{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;transform:none!important;display:inline-flex;align-items:center;gap:6px;width:auto!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 11px 0 9px!important;border-radius:16px!important;border:1px solid #e2d6bb!important;background:#f6f1e4!important;color:#3b4f57!important;font:600 12.5px/1 var(--ya-font-ui);box-shadow:none!important;cursor:pointer;z-index:1;}
.ya-play-screen .game-end-content .ya-result-peek:hover{background:#efe6d2!important;border-color:#c9b78c!important;color:#233c49!important;}
.ya-play-screen .game-end-content .ya-result-peek:focus-visible{outline:2px solid #c9a227;outline-offset:2px;}
.ya-result-peek svg{width:16px;height:16px;flex:0 0 auto;}

/* The seal: 勝 gold, 負 ink, 分 for a draw. */
.ya-result-mark{flex:0 0 auto;display:grid;place-items:center;width:54px;height:54px;margin:6px 0 10px;border-radius:50%;font:700 26px/1 var(--ya-font-brush);color:#fffdf7;background:#233c49;box-shadow:0 0 0 4px #fffdf7,0 0 0 5px #d9ccad;}
.ya-result-mark:empty{display:none;}
.ya-result-mark:empty+h2{margin-top:30px!important;}
.game-end-overlay.is-win .ya-result-mark{background:radial-gradient(circle at 35% 30%,#e9c86a,#b8891f);color:#fffdf7;}
.game-end-overlay.is-lose .ya-result-mark{background:#4a5a61;}
.game-end-overlay.is-draw .ya-result-mark{background:#8a7d61;}
.ya-play-screen .game-end-content h2{margin:0 0 4px!important;padding:0;border:0!important;font-size:24px;line-height:1.3;color:#1f343e;outline:none;}
.ya-play-screen .game-end-content h2:focus,.ya-play-screen .game-end-content h2:focus-visible{outline:none;box-shadow:none;}
.game-end-overlay.is-win .game-end-content h2{color:#8a6412;}
.ya-play-screen .game-end-content .game-end-reason{margin:0 0 14px!important;font-size:13.5px;color:#6e7266;}
.ya-play-screen .game-end-content .game-end-reason:empty{display:none;}

/* Moves / time as two quiet tiles. */
.ya-play-screen .game-end-content .game-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:0 0 14px!important;}
.ya-play-screen .game-end-content .stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border-radius:10px;background:#f6f1e4;border:1px solid #ece2cc;}
.ya-play-screen .game-end-content .stat-label{font-size:11.5px;letter-spacing:.04em;color:#8a7d61;}
.ya-play-screen .game-end-content .stat-value{font:700 20px/1.2 var(--ya-font-ui);color:#1f343e;font-variant-numeric:tabular-nums;}

/* Round tables and finishing orders scroll inside the card, every column in view. */
.ya-play-screen #single-result-extra,.ya-play-screen #online-result-extra{flex:1 1 auto;min-height:0;width:100%;overflow:auto;margin:0 0 14px;overscroll-behavior:contain;}
.ya-play-screen #single-result-extra:empty,.ya-play-screen #online-result-extra:empty{display:none;}
.ya-play-screen .game-end-content .ya-table-wrap{width:100%;max-width:none;margin:0;overflow:visible;border:1px solid #ece2cc;border-radius:10px;}
.ya-play-screen .game-end-content .ya-table{width:100%;min-width:0;table-layout:auto;font-size:13px;margin:0;}
.ya-play-screen .game-end-content .ya-table th{position:sticky;top:0;z-index:1;background:#f3ecdc;font-size:12px;padding:7px 10px;}
.ya-play-screen .game-end-content .ya-table td{padding:6px 10px;}
.ya-play-screen .game-end-content .ya-table .ya-num{text-align:right;white-space:nowrap;}

.ya-play-screen .game-end-content .game-end-buttons{display:grid;grid-template-columns:1fr;gap:8px;width:100%;flex:0 0 auto;}
.ya-play-screen .game-end-content .game-end-buttons .btn{min-height:44px;margin:0;font-size:14px;padding:10px 12px;border-radius:10px;}
.ya-play-screen .game-end-content .game-end-buttons .primary-btn{font-size:15px;}
.ya-play-screen .game-end-content .game-end-buttons .secondary-btn{background:transparent;border:1px solid #e2d6bb;color:#3b4f57;}
.ya-play-screen .game-end-content .game-end-buttons .secondary-btn:hover{background:#f6f1e4;}

/* Folded: "Show result" in the status row, beside the turn text. */
.ya-result-reopen{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:32px;margin:0 6px;padding:0 12px 0 10px;border-radius:16px;border:1px solid #c9a55c;background:#fff8e4;color:#233c49;font:700 12.5px/1 var(--ya-font-ui);cursor:pointer;white-space:nowrap;}
.ya-result-reopen[hidden]{display:none;}
.ya-result-reopen svg{width:15px;height:15px;}
.ya-result-reopen:hover{background:#fdf0c9;}
.ya-result-reopen:focus-visible{outline:2px solid #c9a227;outline-offset:2px;}
.ya-result-reopen.is-new{animation:ya-res-nudge 1.4s ease 1;}
@keyframes ya-res-nudge{0%{box-shadow:0 0 0 0 rgba(201,162,39,.55)}70%{box-shadow:0 0 0 10px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
@media(prefers-reduced-motion:reduce){.ya-play-screen .game-end-overlay,.ya-play-screen .game-end-content,.ya-result-reopen.is-new{animation:none!important;}}

/* Phone: the card nearly fills the table width; the round table gets the room. */
@media(max-width:640px){
 .ya-play-screen .game-end-overlay{padding:10px;}
 .ya-play-screen .game-end-content{width:100%;padding:18px 14px 14px;border-radius:14px;}
 .ya-result-mark{width:46px;height:46px;font-size:22px;margin:2px 0 8px;}
 .ya-play-screen .game-end-content h2{font-size:21px;}
 .ya-play-screen .game-end-content .ya-result-peek{top:10px!important;right:10px!important;}
 .ya-result-reopen{height:30px;padding:0 10px 0 8px;margin:0 4px;font-size:12px;}
 /* The online top bar also carries the opponent's name: the icon alone. */
 .ya-play-online .ya-result-reopen{width:32px;padding:0;justify-content:center;margin:0 2px;}
 .ya-play-online .ya-result-reopen span{display:none;}
}