/* AI practice: board appearance only; no battle player or media loading. */
.practice-return{margin:0 0 8px}body>header{padding:16px 24px}body>header strong{font-size:26px;color:#ecc778}body>header small{font-size:14px}
html[data-practice-game=ninja] #board-frame{background:#43473a url('./moss-ground.webp') center/cover;border-color:#777966}
html[data-practice-game=kishin] #board-frame{background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px) 0 0/47px 47px,radial-gradient(ellipse at 70% 60%,#49316f,transparent 65%),linear-gradient(145deg,#030611,#132641);border-color:#637996}
html:is([data-practice-game=ninja],[data-practice-game=kishin]) #board{background:transparent;box-sizing:border-box;width:100%;border:0;box-shadow:none}
html:is([data-practice-game=ninja],[data-practice-game=kishin]) #board .square{background:transparent;border:.5px solid #e2ddc16b}
html[data-practice-game=kishin] #board .square{border-color:#a6c4e87a}
html:is([data-practice-game=ninja],[data-practice-game=kishin]) :is(.file-labels,.rank-labels){color:#fff4cd;text-shadow:0 1px 3px #000,0 0 4px #000}
html:is([data-practice-game=ninja],[data-practice-game=kishin]) #board .square.selected{background:#ffd55c30;box-shadow:inset 0 0 0 2px #ffe07a}
html[data-practice-game=ninja] #board.dark-board .square.fog{background:#08101988}
@media(max-width:600px){html[data-practice-game=ninja] #board-frame{background-image:url('./moss-ground-mobile.webp')}body>header{padding:12px 16px}}

/* Game-specific pieces. The parent cell keeps click and visibility handling. */
html[data-practice-game=ninja] #board .square{display:flex;align-items:center;justify-content:center;padding:0}
html[data-practice-game=kishin] #board .square{display:flex;align-items:center;justify-content:center;padding:0}
.kishin-disc{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:78%;aspect-ratio:1;flex:none;border-radius:50%;border:3px solid #88cfff;background:radial-gradient(circle at 35% 25%,#b7e5ff,#3070a4 55%,#123054);box-shadow:inset 0 0 0 2px #203b68,0 3px 2px #0008;color:#fff;font:bold clamp(16px,3vw,32px)/1 "Yu Mincho","Hiragino Mincho ProN",serif;text-shadow:0 1px 2px #000;pointer-events:none}
.kishin-disc.gote{border-color:#ffad9e;background:radial-gradient(circle at 35% 25%,#ffd5c8,#a94242 55%,#4c1425);box-shadow:inset 0 0 0 2px #782234,0 3px 2px #0008}
.kishin-disc.reversed{transform:rotate(180deg)}
.kishin-disc.promoted{color:#e00000;text-shadow:0 0 2px white,0 0 4px white}
.practice-piece-hand{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:60px}
.practice-piece-hand .ninja-token{height:48px!important;max-width:none!important}
.practice-piece-hand .kishin-disc{width:44px;font-size:22px}
@media(max-width:600px){.practice-piece-hand{min-height:50px;padding:3px 5px}.practice-piece-hand .ninja-token{height:40px!important}.practice-piece-hand .kishin-disc{width:38px;font-size:20px}}

/* Blur only the continuous terrain layer, never pieces, coordinates or grid. */
html:is([data-practice-game=ninja],[data-practice-game=kishin]) #board-frame{position:relative;isolation:isolate;overflow:hidden;background:#08111d}
html:is([data-practice-game=ninja],[data-practice-game=kishin]) #board-frame::before{content:"";position:absolute;inset:-8px;z-index:0;pointer-events:none;filter:blur(2.5px);background-position:center;background-size:cover}
html:is([data-practice-game=ninja],[data-practice-game=kishin]) #board-frame>div{position:relative;z-index:1}
html[data-practice-game=ninja] #board-frame::before{background-image:linear-gradient(#17271c55,#17271c55),url('./moss-ground.webp')}
html[data-practice-game=kishin] #board-frame::before{background-image:
radial-gradient(ellipse at 18% 72%,#8a467a88,transparent 36%),
radial-gradient(ellipse at 68% 30%,#477eaa99,transparent 40%),
radial-gradient(ellipse at 48% 52%,#7867a977,transparent 27%),
radial-gradient(ellipse at 80% 82%,#192e6599,transparent 45%),
linear-gradient(135deg,transparent 22%,#40597b66 37%,#8587a855 45%,#443c7666 53%,transparent 69%),
radial-gradient(circle at 12% 24%,#d9e6ff 0 1px,transparent 2px),
radial-gradient(circle at 77% 17%,#d9e6ff 0 1px,transparent 2px),
radial-gradient(circle at 35% 81%,#d9e6ff 0 1px,transparent 2px),
radial-gradient(circle at 84% 58%,#d9e6ff 0 1px,transparent 2px),
linear-gradient(145deg,#020612,#101629 55%,#050c1c)}
html[data-practice-game=kishin] #board .kishin-disc{width:80%;height:auto;min-height:0;max-height:none;aspect-ratio:1/1;border-radius:50%;clip-path:circle(50%);box-shadow:none;flex-shrink:0}
html[data-practice-game=kishin] #board .kishin-disc:not(.reversed){transform:none}
@media(max-width:600px){html[data-practice-game=ninja] #board-frame::before{background-image:linear-gradient(#17271c55,#17271c55),url('./moss-ground-mobile.webp')}}

/* Anchor the disc to the CELL, not an auto-sized grid content track. */
html[data-practice-game=kishin] #board .square{position:relative!important}
html[data-practice-game=kishin] #board .square>.kishin-disc{position:absolute!important;left:10%!important;top:10%!important;width:80%!important;height:80%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important;aspect-ratio:1/1;border-radius:50%!important;clip-path:none!important;display:flex!important;align-items:center!important;justify-content:center!important}

/* Hand buttons have explicit token height; derive width from the atlas ratio. */
.practice-piece-hand .ninja-token{width:auto!important}

/* Standalone PNGs supply an intrinsic ratio; no CSS background or percentage-height dependency. */
html[data-practice-game=ninja] #board .square>.ninja-token{height:auto!important;min-width:0;min-height:0;overflow:visible}
.ninja-token>img{display:block!important;width:100%!important;height:auto!important;max-width:none!important;opacity:1!important;visibility:visible!important}
.practice-piece-hand .ninja-token{width:40px!important;height:auto!important}
@media(max-width:600px){.practice-piece-hand .ninja-token{width:34px!important;height:auto!important}}

/* Same terrain shade for occupied and empty squares; explicit assist/selection stays separate. */
html[data-practice-game=ninja] #board.dark-board .square:not(.assist-seen):not(.selected){background:#08101988}
.player-speech-setting{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin:12px 0;font-size:14px}
.player-speech-setting input{width:18px;height:18px;accent-color:#e9bd50}
.player-effect-speech{position:absolute;left:0;bottom:6px;transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border:2px solid #15384b;border-radius:16px;background:#fff8da;color:#102f40;font:bold 18px/1.2 sans-serif;box-shadow:0 2px 8px #0004}
.player-surprise-vortex{display:block;font-size:36px;line-height:1;animation:player-surprise-attack .8s ease-in-out both}
@keyframes player-surprise-attack{from{transform:translate(-50%,-36px) rotate(0deg);opacity:.4}to{transform:translate(-50%,8px) rotate(540deg);opacity:1}}

/* Darken terrain without darkening pieces or coordinates. */
html[data-practice-game=ninja] #board-frame::before{filter:blur(2.5px) brightness(.70)}
.player-presentation{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0}
.player-presentation>label{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0;font-size:14px}
.player-presentation input[type=checkbox]{width:18px;height:18px;accent-color:#e9bd50}
.player-presentation .dark-assist-controls{width:100%;margin:0;padding:0;border:0}.player-presentation .dark-assist-controls legend{display:none}

html[data-practice-game=kishin] #board-frame::before{filter:blur(2px)}