/* Phone play mode (body.phone-play, set by phone.js on screens ≤700px while playing).
   Board fits the width as a 4-column snake; player, dice and challenge sit in a bottom dock. */
@media screen{
body.phone-play{overscroll-behavior-y:none}
html:has(body.phone-play){scroll-padding:12px 0 calc(var(--dock-h,100px) + 12px)}
body.phone-play main{padding:10px 12px calc(var(--dock-h,100px) + 20px)}

/* Header: one compact row */
body.phone-play .top{flex-wrap:nowrap;gap:10px;margin:0 0 10px}
body.phone-play .logo.brand-logo img{height:28px;width:auto}
body.phone-play .brand-sep{height:24px}
body.phone-play .game-name{min-width:0}
body.phone-play .game-name h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone-play .game-name p{display:none}
body.phone-play nav{width:auto;margin:0 0 0 auto;flex:none}
body.phone-play .steps,body.phone-play .board-footer,body.phone-play .trail-note{display:none}

/* Board: fits the screen, no sideways scrolling */
body.phone-play .workspace{display:block}
body.phone-play .board-scroll{overflow:visible;padding:0}
body.phone-play .board[data-layout="phone"]{display:grid;min-width:0;width:100%;max-width:640px;margin:0 auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(96px,auto);gap:6px}
body.phone-play .board[data-layout="phone"] .cell{padding:7px 4px 5px;border-radius:12px;min-height:96px;justify-content:flex-start}
body.phone-play .board[data-layout="phone"] .number{font-size:10.5px;align-self:flex-start;margin:0 0 2px 2px}
body.phone-play .board[data-layout="phone"] .text{font-size:16px;line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
body.phone-play .board[data-layout="phone"] .cell.long .text{font-size:13px;-webkit-line-clamp:3}
body.phone-play .board[data-layout="phone"] .pinyin{font-size:10.5px;line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
body.phone-play .board[data-layout="phone"] .english,body.phone-play .board[data-layout="phone"] .icon{display:none}
body.phone-play .board[data-layout="phone"] .start strong,body.phone-play .board[data-layout="phone"] .finish strong{font-size:14px;line-height:1.3}
body.phone-play .board[data-layout="phone"] .tokens{min-height:22px;gap:1px}
body.phone-play .board[data-layout="phone"] .token{width:22px;height:22px;font-size:14px}
body.phone-play .board[data-layout="phone"] .cell.moving-cell .tokens .token{width:28px;height:28px;font-size:19px}

/* Bottom dock: whose turn + dice; grows into the challenge sheet */
body.phone-play aside{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:20;max-width:none;margin:0;max-height:72vh;overflow:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -10px 30px #10222B1f}
body.phone-play #playPanel{display:block}
body.phone-play #playPanel .compact-turn{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:0;padding:0 84px 0 0;min-height:72px;background:none;border:0}
body.phone-play #turnAvatar{flex:none}
body.phone-play .compact-turn #turnTitle{font-size:17px}
body.phone-play #playPanel .game-settings{margin:0 0 0 auto;order:3;padding:0;border:0;grid-column:auto}
body.phone-play #playPanel .game-settings[open]{flex:1 1 100%}
body.phone-play #playPanel .board-challenge{margin:0}
body.phone-play #playPanel .question{margin:10px 0 0;padding:14px 4px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;text-align:center}
body.phone-play #playPanel #question{font-size:30px;margin:8px 0 2px}
body.phone-play #playPanel #answerActions{display:grid;gap:6px;margin-top:14px;padding-top:0;border:0}
body.phone-play #playPanel #answerActions[hidden]{display:none}
body.phone-play #playPanel #answerActions button{width:100%;min-height:52px;font-size:17px}
body.phone-play #playPanel #gameHint{display:block;margin:8px 0 0;font-size:12.5px;text-align:center}
body.phone-play #playPanel #gameHint[hidden]{display:none}
/* While the pawn hops, keep the sheet small so the board stays visible */
body.phone-play[data-phase="moving"] #playPanel .question #questionPinyin,
body.phone-play[data-phase="moving"] #playPanel .question #questionEnglish{display:none}
body.phone-play[data-phase="moving"] #playPanel #question{font-size:20px;margin:4px 0 0}

/* Dice: sits on the right of the dock row */
body.phone-play #boardDiceDock{position:fixed;right:14px;bottom:calc(var(--dock-h,100px) - 90px);z-index:21;margin:0;padding:0;width:auto;height:auto;background:none;border:0;box-shadow:none}
body.phone-play #boardDicePanel{margin:0;padding:0;background:none;border:0;box-shadow:none}
body.phone-play #boardDicePanel .roll-row{display:flex;flex-direction:row-reverse;align-items:center;gap:8px;margin:0}
body.phone-play #boardDicePanel .dice-button{zoom:.5;margin:0}
body.phone-play .turn-copy{min-width:0}
body.phone-play #playPanel .turn-copy #diceHint{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin:2px 0 0;font-size:13px;line-height:1.35;font-weight:600;text-align:left}
body.phone-play #playPanel .turn-copy #diceHint small{display:block;margin:1px 0 0;font-size:12.5px;font-weight:500}
body.phone-play #playPanel .turn-copy #diceHint,body.phone-play #playPanel .turn-copy #diceHint small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone-play[data-phase="challenge"] #playPanel .turn-copy #diceHint,body.phone-play[data-phase="won"] #playPanel .turn-copy #diceHint{display:none}
body.phone-play[data-phase="challenge"] #playPanel .compact-turn,body.phone-play[data-phase="won"] #playPanel .compact-turn{min-height:60px}
/* Small phones (iPhone SE and similar) */
@media (max-width:400px){
body.phone-play .top{flex-wrap:wrap;row-gap:6px}
body.phone-play .brand-sep{display:none}
body.phone-play .game-name{order:3;flex:1 1 100%}
body.phone-play .game-name h1{font-size:18px}
body.phone-play .board[data-layout="phone"]{gap:5px}
body.phone-play .board[data-layout="phone"] .text{font-size:15px}
body.phone-play #playPanel .compact-turn{padding-right:70px;gap:8px}
body.phone-play .compact-turn #turnTitle{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone-play #boardDicePanel .dice-button{zoom:.42}
body.phone-play #boardDiceDock{right:10px}
body.phone-play #playPanel #question{font-size:26px;margin-top:4px}
body.phone-play #playPanel #answerActions button{min-height:46px}
}
}
/* Keep the signed-in toolbar, including VIP tags and avatar, within phone width. */
@media screen and (max-width:700px){
body.phone-play .top{flex-wrap:wrap}
body.phone-play nav{width:100%;min-width:0;display:flex;flex-wrap:wrap;gap:4px;margin:0}
body.phone-play nav button,body.phone-play nav>a{font-size:12px;padding:7px 6px;gap:4px}
body.phone-play nav #accountMenu{margin-left:auto}
body.phone-play .game-name{min-width:0;flex:1}
}
/* A large centered dice row stays in the dock flow, including when the task expands. */
@media screen{
body.phone-play #boardDiceDock{position:static;display:flex;justify-content:center;width:100%;height:auto;margin:0;padding:6px 0 10px;transform:none}
body.phone-play #boardDiceDock #boardDicePanel{margin:0}
body.phone-play #boardDicePanel .roll-row{justify-content:center}
body.phone-play #boardDicePanel .dice-button{zoom:1;width:130px;height:130px;min-height:130px}
body.phone-play #playPanel .compact-turn{padding:0;min-height:60px}
}
@media screen{body.phone-play #playPanel #boardDicePanel .dice-button{transform:none;transform-origin:center;zoom:1}}