/* Casual screens reuse the room palette and original board assets. */
.casualMenu>main,.casualPlay>main{max-width:1200px;margin:0 auto;padding:8px 12px;background:#fffef9}
.casualMenu>header,.casualPlay>header{max-width:1200px;margin:0 auto;padding:6px 12px;background:#fffef9}
.casualOpponent{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid #9fb9b4;border-radius:6px;margin:5px 0;background:#f4f8f4}
.casualOpponent>img{width:56px;height:56px;object-fit:contain}.casualOpponent>div{flex:1;min-width:0}
.casualOpponent h3{margin:0;font-size:17px;background:none;padding:0}.casualOpponent p{margin:4px 0;font-size:14px}
.casualOpponent button{flex:none;border:2px solid #7896a4;border-radius:6px;background:#fffef9;font-weight:bold;padding:8px 12px}
.casualOpponent button:hover,.casualActions button:hover{border-color:#e68428;box-shadow:0 0 3px #ed892d80}
.casualMenu dialog,.casualPlay dialog:not(.resultDialog){border:2px solid #7896a4;border-radius:12px;max-width:90vw;background:#233138;color:#fff;padding:20px}
.casualMenu dialog::backdrop,.casualPlay dialog:not(.resultDialog)::backdrop{background:#18292e99}
.casualPlay .roomLayout{display:block;width:100%;min-width:0;margin:0;padding:0}
.casualPlay #gamePanel{margin:0;padding:0;max-width:none}.casualPlay .boardColumn{min-width:0}
.casualPlay .gameInfo{min-width:0}.casualPlay .playerBar p{margin:3px 0}
.casualPlay .casualActions{display:flex;gap:8px;align-items:center;padding:8px 0}
.casualPlay .casualActions button{padding:8px 14px;border:2px solid #7896a4;border-radius:6px;font-weight:bold}
.casualPlay #replayControls{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:32px;padding:3px}
.casualPlay #replayControls button{padding:4px 7px}.casualPlay #position{align-self:center;font-size:12px}
.casualPlay .square{aspect-ratio:1/1.1}.casualPlay .square img{pointer-events:none}
.casualPlay .youBadge{font-weight:800;color:#173f50;margin-left:8px}
.casualPlay #promotion button,.casualPlay #resignConfirm button{padding:8px 16px;margin:4px}
.casualPlay .handCharacter{display:none}.casualPlay.tallLayout .handCharacter{display:block}
.casualMenu .centerReturn,.casualPlay .centerReturn{color:#183b52;font-weight:700}
.casualMenu .centerReturn:hover,.casualPlay .centerReturn:hover{text-decoration:underline;text-decoration-color:#e68428;text-decoration-thickness:3px}
@media(max-width:600px){.casualMenu>main,.casualPlay>main,.casualMenu>header,.casualPlay>header{padding:3px 5px}.casualOpponent{gap:6px;padding:7px 5px}.casualOpponent>img{width:44px;height:44px}.casualOpponent h3{font-size:15px}.casualOpponent p{font-size:12px}.casualOpponent button{padding:6px}}

/* Casual action visibility follows the game lifecycle, independently of room replay styles. */
.casualPlay #gamePanel.gameArea #resign{visibility:visible}
.casualPlay:not(.tallLayout) .ownHand{height:var(--casualBoardHeight);align-self:start;justify-content:flex-end}
.casualPlay.tallLayout .boardColumn{display:contents}
.casualPlay.tallLayout .boardColumn .boardFrame{grid-row:2}
.casualPlay.tallLayout #replayControls{grid-row:4}
.casualPlay.tallLayout .ownHand{height:auto}

/* Room colors and controls remain the reference for both casual screens. */
.casualMenu>main,.casualPlay>main,.casualMenu>header,.casualPlay>header{background:var(--theme-page);color:var(--theme-ink)}
.casualMenu h1.roomHeader,.casualPlay h1.roomHeader{display:block;margin:5px 0 4px;padding:3px 10px;font-size:26px;line-height:1.3}
.casualMenu .sectionTitle{padding:3px 10px;font-size:20px;line-height:1.3}
.casualOpponent{background:var(--theme-card);border:2px solid var(--theme-line);border-radius:var(--theme-radius);box-shadow:var(--theme-shadow);color:var(--theme-ink)}
.casualOpponent button,.casualActions button{background:var(--theme-card);color:var(--theme-ink);border-color:var(--theme-line);box-shadow:0 1px 3px #344b3014}
.casualPlay .gameToolbar{gap:8px}
/* Keep an exterior board rim also in portrait, within the existing board width. */
.casualPlay.hasGame .boardFrame{padding:12px}
#pawns{display:flex;justify-content:center;gap:10px;padding:25px 8px 16px;perspective:700px}
.tossPawn{position:relative;display:block;width:48px;height:58px;transform-style:preserve-3d}
.tossPawn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;filter:drop-shadow(0 3px 2px #0005)}
.tossPawn .tossBack{transform:rotateY(180deg)}
.casualPlay .resultDialog{--result-band-max-width:860px}
.casualPlay .resultDialog .actions{flex-wrap:wrap}
@media(max-width:600px){.casualMenu h1.roomHeader,.casualPlay h1.roomHeader{font-size:22px}.tossPawn{width:42px;height:52px}}
.casualMenu .sectionTitle{background:var(--theme-heading);color:#fffdf3;border:1px solid #32795d;border-radius:5px 3px 5px 4px;box-shadow:0 1px 1px #30462b22,inset 0 1px #ffffff20;text-shadow:0 1px 1px #16433270;font-weight:800}
.casualPlay .resultDialog[data-outcome="draw"] .resultSash{--band:#536b67}

/* Names share the room's fit-to-width behavior; preserve the icon and YOU badge. */
.casualPlay .playerIdentity{gap:var(--identityGap,8px)}
.casualPlay :is(#opponentName,#userName){display:block;flex:1 1 0;min-width:0;overflow:hidden;line-height:1.25}
.casualPlay .identityText{display:inline-block;white-space:nowrap;max-width:none;vertical-align:top}
.casualPlay .youBadge{flex:none}

/* Fill the unused mobile hand-rail area with the same dark wood as the hand. */
.casualPlay.tallLayout.hasGame .handRail{background:#966b43}
.casualPlay.tallLayout #gameToolbar #undo{padding:8px 14px;border:2px solid var(--theme-line);border-radius:6px;background:var(--theme-card);color:var(--theme-ink);font-weight:bold}
.casualPlay.tallLayout #gameToolbar #undo:hover{border-color:#e68428;box-shadow:0 0 3px #ed892d80}

/* Active controls and finished-game replay occupy the same mobile row. */
.casualPlay.tallLayout #gameToolbar{grid-row:4;grid-column:1;display:flex;justify-content:center;align-items:center;flex-direction:row;gap:8px;margin:0;padding:4px 0}
.casualPlay:not(.tallLayout) .gameInfo{display:flex;flex-direction:column;align-self:stretch}
.casualPlay:not(.tallLayout) #gameToolbar{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-top:auto;padding:8px 0 0}
.casualPlay #gameToolbar #undo{padding:8px 14px;border:2px solid var(--theme-line);border-radius:6px;background:var(--theme-card);color:var(--theme-ink);font-weight:bold}
.casualPlay #gameToolbar #undo:hover{border-color:#e68428;box-shadow:0 0 3px #ed892d80}

/* 結果表示中もメニューへ戻るリンクを操作できるようにする。 */
.casualPlay.resultVisible > header{position:relative;z-index:101}

/* Wait for an explicit start before admission, stock consumption and play. */
.casualPlay #centerMarquees{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.casualPlay .boardFrame{position:relative}
.casualPlay .casualStartPrompt{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:#fff8e51f}
.casualPlay #startGame{max-width:100%;padding:18px 28px;border:3px solid #21573d;border-radius:14px;background:linear-gradient(#43805b,#28613f);color:#fffdf3;box-shadow:0 6px 0 #18432d,0 10px 20px #172a3255,inset 0 1px 0 #ffffff70;font-size:22px;font-weight:700;line-height:1.7;text-align:center;white-space:nowrap;cursor:pointer;text-shadow:0 1px 1px #123b2b}
.casualPlay #startGame strong{font-size:32px;font-weight:800}
.casualPlay #startGame:hover:not(:disabled){background:linear-gradient(#52936b,#307348);border-color:#17462f}
.casualPlay #startGame:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #18432d,0 4px 10px #172a3244,inset 0 1px 0 #ffffff70}
.casualPlay #startGame:focus-visible{outline:4px solid #fffdf3;outline-offset:4px}
.casualPlay #startGame:disabled{background:linear-gradient(#6e8272,#58695c);border-color:#45574a;box-shadow:0 3px 0 #344a3b,0 6px 12px #172a3244;cursor:default}

.tumeMenu>header,.tumeMenu>main{width:100%;max-width:1200px;margin:auto;box-sizing:border-box;}
.tumeMenu>main{padding:12px;}
.tumeMenu #tumeList{max-width:1040px;margin-inline:auto;}
.tumeModes,.tumePages{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:12px 0;}
.tumeModes a,.tumePages a,.tumeNumbers a{padding:6px 10px;border:1px solid #819b84;border-radius:5px;background:#f7faf3;color:#245a43;text-decoration:none;}
.tumeModes [aria-current="true"]{font-weight:800;background:#dbe9ce;}
.tumePages select{max-width:100%;padding:5px;}
.tumeImages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;}
.tumeImages a{min-width:0;text-align:center;padding:8px;border:1px solid #a8b99b;background:#fffcf2;border-radius:6px;color:#245a43;text-decoration:none;}
.tumeImages strong{display:block;margin-bottom:6px;}
.tumeImages img{display:block;max-width:100%;height:auto;margin:auto;}
.tumeNumbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;}
.tumeNumbers a{text-align:center;font-size:14px;}
.tumeHelp{margin-top:20px;line-height:1.6;}
.tumeHelp ul{padding-left:22px;}

.tumeMenu #randomChallenge{padding:8px 14px;border:1px solid #819b84;border-radius:5px;background:#dbe9ce;color:#245a43;font-family:inherit;font-size:16px;font-weight:700;line-height:1.4;cursor:pointer;text-shadow:none;box-shadow:none;}
.tumeMenu #randomChallenge:hover{background:#eaf1df;border-color:#e68428;}
.tumeMenu #randomChallenge:focus-visible{outline:2px solid #e68428;outline-offset:2px;}
@media(max-width:600px){.tumeMenu>header,.tumeMenu>main{padding-inline:5px;}}