*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050505;color:#fff;font-family:Georgia,'Courier New',monospace}
#stage{position:relative;width:1184px;height:1280px;transform-origin:top left;background:#030303;margin:0 auto;image-rendering:pixelated}
.panel{border:4px solid #f3a900;box-shadow:inset 0 0 0 3px #2c1707;background:#07070b}
#p1{position:absolute;left:18px;top:18px;width:190px;height:170px}
#p2{position:absolute;left:270px;top:72px;width:560px;height:58px;text-align:center}
.hp{position:absolute;left:0;right:0;bottom:0;height:50px;border:4px solid #ddd;background:#230000;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)}
#hpfill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(#ff4a32,#b60000 56%,#640000);transition:width .25s ease}
#hptext{position:relative;z-index:2;font-size:32px;font-weight:bold;line-height:43px;text-shadow:3px 3px #000}
#p5{position:absolute;left:904px;top:auto;bottom:26px;width:276px;height:104px;padding:16px 14px;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center;z-index:50;pointer-events:auto}.miniBtn{height:58px;flex:1;min-width:0;border:3px solid #f3a900;background:#111;color:#ffc02b;font-size:18px;font-weight:bold;font-family:inherit;cursor:pointer;pointer-events:auto;touch-action:manipulation}
#p3{position:absolute;left:128px;top:165px;width:740px;height:210px;text-align:center;overflow:hidden;background:transparent;border:none;box-shadow:none}
#p4{position:absolute;left:108px;top:378px;width:758px;height:654px;border:4px solid #f3a900;box-shadow:inset 0 0 0 3px #2c1707;background:#030303;padding:34px 34px 34px 54px;overflow:visible}
#turnbar{position:absolute;left:0;top:0;width:100%;height:34px;text-align:center;font-size:26px;line-height:34px;font-weight:bold;letter-spacing:4px;background:#080808;color:#f8e6bf;text-shadow:2px 2px #000}
#board{position:absolute;left:54px;top:34px;width:640px;height:640px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);background:#000;overflow:visible;box-shadow:0 0 0 2px #111}
.sq{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;min-width:0;min-height:0}.light{background:#f0d9b5}.dark{background:#b58863}
#stage[data-theme="checkerboard"] .light{background:#f0d9b5}#stage[data-theme="checkerboard"] .dark{background:#b58863}
#stage[data-theme="analysisblue"] .light{background:#d8e8ff}#stage[data-theme="analysisblue"] .dark{background:#6b91c9}
#stage[data-theme="green"] .light{background:#b8d97a}#stage[data-theme="green"] .dark{background:#6f9f47}
#stage[data-theme="cherrywood"] .light{background:#B71C1C}#stage[data-theme="cherrywood"] .dark{background:#121212}
#stage[data-theme="darkgold"] .light{background:#d8af70}#stage[data-theme="darkgold"] .dark{background:#9a5a25}
#stage[data-theme="ocher"] .light{background:#e5b66d}#stage[data-theme="ocher"] .dark{background:#9a5725}
.coord{position:absolute;color:#f1c24d;font-size:20px;font-weight:900;z-index:6;pointer-events:none;text-shadow:0 2px 0 #160d08,0 0 2px #000;opacity:.95}.file{right:4px;bottom:1px}.rank{left:4px;top:1px}
.pieceImg{position:relative;z-index:5;pointer-events:none;user-select:none;width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.72));image-rendering:auto}.piece-P{height:76%;max-width:82%}.piece-K,.piece-Q{height:94%;max-width:98%;align-self:center}.piece-secondary{width:90%;height:90%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.82))}.piece-secondary.piece-P{height:74%;max-width:82%}.piece-secondary.piece-K,.piece-secondary.piece-Q{height:100%;max-width:104%;align-self:flex-end}
.last{box-shadow:inset 0 0 0 999px rgba(255,236,105,.25)}.mark-red::after,.mark-blue::after,.mark-green::after,.mark-yellow::after{content:'';position:absolute;z-index:4;width:34%;height:34%;border-radius:50%;pointer-events:none}.mark-red::after{background:rgba(255,77,77,.30)}.mark-blue::after{background:rgba(66,165,255,.30)}.mark-green::after{background:rgba(53,208,111,.34)}.mark-yellow::after{background:rgba(242,194,48,.34)}
button.answer{position:absolute;top:1038px;width:226px;height:58px;border:4px solid;border-radius:4px;background:#111;color:#fff;font-size:22px;font-weight:bold;font-family:Georgia,'Courier New',monospace;text-shadow:2px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;cursor:pointer;z-index:4}#p6{left:54px;border-color:#f21d1d;background:linear-gradient(135deg,#6b0505,#1b0303)}#p7{left:322px;border-color:#176dff;background:linear-gradient(135deg,#07366b,#020b1b)}#p8{left:590px;border-color:#12c536;background:linear-gradient(135deg,#064a10,#031b06)}#playerHpBar{position:absolute;left:255px;top:1108px;width:390px;height:34px;border:4px solid #ddd;background:#001d07;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);box-shadow:inset 0 0 0 2px #001000;z-index:4;overflow:hidden;text-align:center}#playerHpFill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(#56ff63,#14a72a 56%,#055f15);transition:width .25s ease}#playerHpText{position:relative;z-index:2;font-size:22px;font-weight:bold;line-height:27px;text-shadow:2px 2px #000;color:#fff}
#p9{position:absolute;left:24px;top:1112px;width:160px;height:135px}#heroFace{font-size:106px;line-height:112px}#heroHp{width:142px;height:18px;border:3px solid #eee;background:#300;margin-left:4px}#heroHp span{display:block;height:100%;width:100%;background:linear-gradient(#24d83c,#0a7f18);transition:width .25s ease}
#p10{position:absolute;left:892px;top:356px;width:276px;height:780px;text-align:center;padding-top:34px}.towerBox{width:170px;height:96px;margin:22px auto;border:4px solid #8d725d;box-shadow:inset 0 0 0 3px #19110d;background:#050505}.towerBox.current{height:96px;border-color:#e4a700}.towerBox.hero{height:96px;border-color:#15d020}
@keyframes bad{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}.wrong{animation:bad .25s;filter:brightness(1.5)}.right{filter:brightness(1.9)}#toast{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:58px;font-weight:bold;color:#ffd32b;text-shadow:4px 4px #000;background:rgba(0,0,0,.55);border:4px solid #f3a900;padding:20px 34px;z-index:10}.hidden{display:none!important}
@media(max-aspect-ratio:1184/1280){#stage{transform:scale(calc(100vw / 1184))}}@media(min-aspect-ratio:1184/1280){#stage{transform:scale(calc(100vh / 1280))}}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){html,body{width:100vw;height:100dvh;overflow:hidden;background:#030303}#stage{width:100vw;height:100dvh;min-height:100dvh;transform:none!important;margin:0!important;overflow:hidden;background:#030303}#p1{left:1.5vw;top:7.2dvh;width:16vw;height:11dvh;border-width:3px}#p2{left:23vw;top:9.8dvh;width:54vw;height:4dvh}.hp{height:3.7dvh;border-width:3px;bottom:.2dvh}#hptext{font-size:clamp(16px,3.6vw,29px);line-height:3.2dvh}#p5{left:76vw;top:auto;bottom:2dvh;width:22vw;height:12dvh;border-width:3px;padding:1dvh 1vw;gap:.8dvh;flex-direction:column;z-index:50}.miniBtn{height:4.6dvh;width:100%;font-size:clamp(8px,2.1vw,14px);border-width:2px;flex:0 0 auto}#p3{left:17vw;top:17.8dvh;width:56vw;height:13.5dvh;border:none;box-shadow:none;background:transparent}#p4{left:1vw;top:calc(33.5dvh - 6vw);width:72vw;height:calc(72vw + 4.2dvh);padding:4.2dvh 0 0 0;border-width:3px;box-shadow:inset 0 0 0 2px #2c1707}#turnbar{height:4.2dvh;font-size:clamp(16px,4vw,30px);line-height:4.2dvh;letter-spacing:2px}#board{left:0;top:4.2dvh;width:72vw;height:72vw}.coord{font-size:2.7vw}.file{right:.45vw;bottom:.12vw}.rank{left:.45vw;top:.25vw}.pieceImg{width:90%;height:90%}button.answer{top:calc(33.5dvh + 66vw + 6.2dvh);height:5.4dvh;width:24.5vw;font-size:clamp(12px,3.2vw,22px);border-width:3px;border-radius:3px}#p6{left:5vw}#p7{left:37.75vw}#p8{left:70.5vw}#playerHpBar{left:29.75vw;top:calc(33.5dvh + 66vw + 12.0dvh);width:40.5vw;height:2.8dvh;border-width:3px}#playerHpText{font-size:clamp(10px,2.4vw,18px);line-height:2.3dvh}#p9{left:5vw;top:calc(33.5dvh + 66vw + 13.2dvh);width:18vw;height:17vw}#heroFace{font-size:13vw;line-height:13vw}#heroHp{width:16vw;height:1.7dvh;border-width:2px;margin-left:0}#p10{left:76vw;top:32.5dvh;width:22vw;height:43dvh;border-width:3px;box-shadow:inset 0 0 0 2px #2c1707;padding-top:1.5dvh}.towerBox{width:15vw;height:6.1dvh;margin:1.1dvh auto;border-width:3px;box-shadow:inset 0 0 0 2px #19110d}.towerBox.current{height:6.1dvh}.towerBox.hero{height:6.1dvh}#toast{font-size:9vw;padding:1.5dvh 4vw;border-width:3px}}
/* Clean APP2 build: remove Panel 1 and hero image; suppress all action text overlays without touching board/puzzle logic. */
#p1,#p9,#heroFace,#heroHp{display:none!important;visibility:hidden!important;}
#toast{display:none!important;visibility:hidden!important;}
/* Player HP bar: match boss HP bar size/style exactly, green fill only. */
#playerHpBar{
left:270px!important;
top:1128px!important;
width:560px!important;
height:50px!important;
border:4px solid #ddd!important;
background:#001d07!important;
clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)!important;
box-shadow:none!important;
z-index:4;
overflow:hidden;
text-align:center;
}
#playerHpFill{
position:absolute;
left:0;top:0;bottom:0;
width:100%;
background:linear-gradient(#56ff63,#14a72a 56%,#055f15)!important;
transition:width .25s ease;
}
#playerHpText{
position:relative;
z-index:2;
font-size:32px!important;
font-weight:bold;
line-height:43px!important;
text-shadow:3px 3px #000!important;
color:#fff;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#playerHpBar{
left:23vw!important;
top:calc(33.5dvh + 66vw + 12.0dvh)!important;
width:54vw!important;
height:3.7dvh!important;
border-width:3px!important;
bottom:auto!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
}
/* Crabbeard boss animation frames in Panel 3 */
#p3{
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.bossFrame{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
image-rendering:auto;
display:block;
pointer-events:none;
user-select:none;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
.bossFrame{width:100%;height:100%;object-fit:cover;object-position:center center;}
}
/* Continue button shown only after boss defeat. */
#continueBtn{
position:absolute;
left:432px;
top:1196px;
width:320px;
height:58px;
border:4px solid #f3a900;
background:linear-gradient(135deg,#3a2405,#0b0701);
color:#ffd45a;
font-size:24px;
font-weight:bold;
font-family:Georgia,'Courier New',monospace;
text-shadow:2px 2px #000;
cursor:pointer;
z-index:80;
box-shadow:inset 0 0 0 3px #2c1707;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#continueBtn{
left:23vw;
top:calc(33.5dvh + 66vw + 16.4dvh);
width:54vw;
height:4.8dvh;
font-size:clamp(13px,3.2vw,22px);
border-width:3px;
}
}
/* M13: Remove Panel 4 decorative yellow frame/background only. Keep board, pieces, turn bar, position, size, answers unchanged. */
#p4{
border:none!important;
box-shadow:none!important;
background:transparent!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p4{
border:none!important;
box-shadow:none!important;
background:transparent!important;
}
}
/* M14: remove White/Black to move text while preserving board placement. */
#turnbar{display:none!important;}
/* M16: expand board bigger toward up/right while keeping bottom-left anchor and tower fixed. */
#board{
width:720px!important;
height:720px!important;
top:-46px!important;
left:54px!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#board{
left:0!important;
top:calc(4.2dvh - 2.5vw)!important;
width:74.5vw!important;
height:74.5vw!important;
}
}
/* M19: Make Captain Crabbeard boss art cover the whole top space of the app. */
#p3{
left:0!important;
top:132px!important;
width:1184px!important;
height:244px!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
overflow:hidden!important;
z-index:1;
}
#p2{z-index:10;}
#p10,#p5,#p4,#board,button.answer,#playerHpBar,#continueBtn{z-index:5;}
#bossFrame{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p3{
left:0!important;
top:14.2dvh!important;
width:100vw!important;
height:19.5dvh!important;
}
#bossFrame{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
}
/* M20: Boss name types out while HP fills. */
#bossName{
position:absolute;
left:0;
right:0;
top:-42px;
height:36px;
line-height:36px;
text-align:center;
color:#ffd45a;
font-size:28px;
font-weight:900;
letter-spacing:2px;
font-family:Georgia,'Courier New',monospace;
text-shadow:3px 3px #000,0 0 6px #000;
z-index:12;
white-space:nowrap;
pointer-events:none;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#bossName{
top:-3.4dvh;
height:3dvh;
line-height:3dvh;
font-size:clamp(12px,3vw,22px);
letter-spacing:1px;
}
}
/* M21: Move gameplay section down so board/tower do not cover full-width pirate scene. Boss HP and pirate art stay fixed. */
:root{--m21-down:70px;}
#p4{top:448px!important;}
#p10{top:426px!important;}
button.answer{top:1128px!important;}
#playerHpBar{top:1198px!important;}
#continueBtn{top:1266px!important;}
/* Keep compact utility panel at bottom-right; it is already bottom anchored. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
:root{--m21-down:3.6dvh;}
#p4{top:calc(33.5dvh - 6vw + var(--m21-down))!important;}
#p10{top:calc(32.5dvh + var(--m21-down))!important;}
button.answer{top:calc(33.5dvh + 66vw + 6.2dvh + var(--m21-down))!important;}
#playerHpBar{top:calc(33.5dvh + 66vw + 12.0dvh + var(--m21-down))!important;}
#continueBtn{top:calc(33.5dvh + 66vw + 16.4dvh + var(--m21-down))!important;}
}
/* M23: remove the yellow outer tower panel frame, keep tower squares unchanged. */
#p10{
border:none!important;
box-shadow:none!important;
background:transparent!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p10{border:none!important;box-shadow:none!important;background:transparent!important;}
}
/* M24: level-clear continue button: large, centered, arcade-style. */
#continueBtn{
left:192px!important;
top:1094px!important;
width:800px!important;
height:92px!important;
display:none;
align-items:center;
justify-content:center;
text-align:center;
border:6px solid #f3a900!important;
background:linear-gradient(135deg,#5a3407,#160b02)!important;
color:#ffd45a!important;
font-size:36px!important;
font-weight:900!important;
letter-spacing:2px;
text-shadow:3px 3px #000,0 0 8px #000!important;
box-shadow:inset 0 0 0 4px #2c1707,0 0 18px rgba(243,169,0,.45)!important;
z-index:120!important;
}
#continueBtn[style*="block"]{display:flex!important;}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#continueBtn{
left:10vw!important;
top:calc(33.5dvh + 66vw + 12.8dvh + var(--m21-down))!important;
width:80vw!important;
height:7.2dvh!important;
font-size:clamp(16px,4.3vw,28px)!important;
letter-spacing:1px;
border-width:4px!important;
}
}
/* M28: Animated hero panel and Style D hero frames. */
#p9{
display:block!important;
visibility:visible!important;
position:absolute;
left:44px;
top:1188px;
width:190px;
height:190px;
border:5px solid #eee;
border-radius:6px;
background:linear-gradient(#0b1b2a,#02050a);
box-shadow:inset 0 0 0 3px #183858,0 0 10px rgba(255,255,255,.25);
z-index:30;
overflow:hidden;
}
#heroFrame{
width:100%;
height:100%;
object-fit:contain;
object-position:center bottom;
image-rendering:auto;
display:block;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p9{
display:block!important;
visibility:visible!important;
left:5vw;
top:calc(33.5dvh + 66vw + 16.0dvh + var(--m21-down));
width:22vw;
height:22vw;
border-width:3px;
}
}
/* M33: permanent colored move-preview arrows for all three answer choices. */
#board{position:absolute;}
#moveArrowLayer{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:4;
pointer-events:none;
overflow:visible;
}
.pieceImg{position:relative;z-index:5;}
.coord{z-index:8;}
/* M34: Book-app arrow style: thin, clean, semi-transparent, underneath pieces. */
#moveArrowLayer{z-index:3!important;mix-blend-mode:normal;}
.pieceImg{z-index:6!important;}
.coord{z-index:8!important;}
/* M38: restore ADVANCE TO NEXT LEVEL to the exact center of the chessboard. */
#continueBtn{
left:202px!important;
top:756px!important;
width:560px!important;
height:92px!important;
z-index:220!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#continueBtn{
left:5vw!important;
top:calc(37.7dvh + 30vw)!important;
width:64vw!important;
height:7.2dvh!important;
z-index:220!important;
}
}
/* M39: dim the chessboard when ADVANCE TO NEXT LEVEL appears. */
#boardDim{
display:none;
position:absolute;
left:54px;
top:-46px;
width:720px;
height:720px;
background:rgba(0,0,0,.38);
z-index:90;
pointer-events:none;
border-radius:2px;
}
#boardDim.active{display:block;}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#boardDim{
left:0!important;
top:calc(4.2dvh - 2.5vw)!important;
width:74.5vw!important;
height:74.5vw!important;
}
}
/* M40 REAL: Board/Pieces utility controls smaller and locked to bottom-right. */
#p5{
left:auto!important;
right:18px!important;
top:auto!important;
bottom:18px!important;
width:158px!important;
height:94px!important;
padding:8px!important;
display:flex!important;
flex-direction:column!important;
gap:6px!important;
align-items:stretch!important;
justify-content:center!important;
z-index:220!important;
}
#p5 .miniBtn,.miniBtn{
height:36px!important;
width:100%!important;
font-size:13px!important;
border-width:2px!important;
flex:0 0 auto!important;
padding:0!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p5{
left:auto!important;
right:2vw!important;
top:auto!important;
bottom:1dvh!important;
width:18vw!important;
height:9.6dvh!important;
padding:.7dvh .8vw!important;
gap:.55dvh!important;
flex-direction:column!important;
z-index:220!important;
}
#p5 .miniBtn,.miniBtn{
height:3.8dvh!important;
width:100%!important;
font-size:clamp(7px,1.85vw,12px)!important;
border-width:2px!important;
flex:0 0 auto!important;
}
}
/* M41: move hero portrait up closer to the answer buttons. */
#p9{
top:1118px!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p9{
top:calc(33.5dvh + 66vw + 12.1dvh + var(--m21-down))!important;
}
}
/* M46: move hero/player HP bar to the right of the hero portrait and match boss HP sizing style. */
#playerHpBar{
left:270px!important;
top:1174px!important;
width:560px!important;
height:50px!important;
border-width:4px!important;
}
#playerHpText{
font-size:32px!important;
line-height:43px!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#playerHpBar{
left:30vw!important;
top:calc(33.5dvh + 66vw + 14.8dvh + var(--m21-down))!important;
width:47vw!important;
height:3.7dvh!important;
border-width:3px!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
}
/* M55: Desktop zoom lock.
Desktop browsers must never switch into phone portrait layout when zooming.
The whole 1184x1280 stage scales as one locked canvas; all panels/buttons/art keep fixed relative positions. */
@media (hover:hover) and (pointer:fine){
html,body{
width:100vw!important;
height:100vh!important;
overflow:hidden!important;
background:#030303!important;
}
#stage{
width:1184px!important;
height:1280px!important;
min-width:1184px!important;
min-height:1280px!important;
transform-origin:top center!important;
margin:0 auto!important;
}
}
@media (hover:hover) and (pointer:fine) and (max-aspect-ratio:1184/1280){
#stage{transform:scale(calc(100vw / 1184))!important;}
}
@media (hover:hover) and (pointer:fine) and (min-aspect-ratio:1184/1280){
#stage{transform:scale(calc(100vh / 1280))!important;}
}
/* M56: desktop portrait should use the same fit-to-screen layout as mobile portrait.
This prevents browser zoom from turning the fixed canvas into a cropped/offscreen mess. */
@media (hover:hover) and (pointer:fine) and (orientation:portrait){
html,body{width:100vw!important;height:100vh!important;overflow:hidden!important;background:#030303!important;}
#stage{width:100vw!important;height:100vh!important;min-width:0!important;min-height:0!important;transform:none!important;margin:0!important;overflow:hidden!important;background:#030303!important;}
#p1{left:1.5vw!important;top:7.2vh!important;width:16vw!important;height:11vh!important;border-width:3px!important;}
#p2{left:23vw!important;top:9.8vh!important;width:54vw!important;height:4vh!important;}
.hp{height:3.7vh!important;border-width:3px!important;bottom:.2vh!important;}
#hptext{font-size:clamp(16px,3.6vw,29px)!important;line-height:3.2vh!important;}
#p3{left:17vw!important;top:17.8vh!important;width:56vw!important;height:13.5vh!important;border:none!important;box-shadow:none!important;background:transparent!important;}
#p4{left:1vw!important;top:calc(33.5vh - 6vw)!important;width:72vw!important;height:calc(72vw + 4.2vh)!important;padding:4.2vh 0 0 0!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #2c1707!important;}
#turnbar{height:4.2vh!important;font-size:clamp(16px,4vw,30px)!important;line-height:4.2vh!important;letter-spacing:2px!important;}
#board{left:0!important;top:4.2vh!important;width:72vw!important;height:72vw!important;}
.coord{font-size:2.7vw!important;}
.file{right:.45vw!important;bottom:.12vw!important;}
.rank{left:.45vw!important;top:.25vw!important;}
.pieceImg{width:90%!important;height:90%!important;}
button.answer{top:calc(33.5vh + 66vw + 6.2vh + var(--m21-down))!important;height:5.4vh!important;width:24.5vw!important;font-size:clamp(12px,3.2vw,22px)!important;border-width:3px!important;border-radius:3px!important;}
#p6{left:5vw!important;}
#p7{left:37.75vw!important;}
#p8{left:70.5vw!important;}
#p9{display:block!important;visibility:visible!important;left:5vw!important;top:calc(33.5vh + 66vw + 12.1vh + var(--m21-down))!important;width:18vw!important;height:17vw!important;}
#heroFrame{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
#heroFace,#heroHp{display:none!important;visibility:hidden!important;}
#playerHpBar{left:30vw!important;top:calc(33.5vh + 66vw + 14.8vh + var(--m21-down))!important;width:47vw!important;height:3.7vh!important;border-width:3px!important;}
#playerHpText{font-size:clamp(16px,3.6vw,29px)!important;line-height:3.2vh!important;}
#p10{left:76vw!important;top:32.5vh!important;width:22vw!important;height:43vh!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #2c1707!important;padding-top:1.5vh!important;}
.towerBox{width:15vw!important;height:6.1vh!important;margin:1.1vh auto!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #19110d!important;}
.towerBox.current,.towerBox.hero{height:6.1vh!important;}
#p5{left:auto!important;right:2vw!important;top:auto!important;bottom:1vh!important;width:18vw!important;height:9.6vh!important;padding:.7vh .8vw!important;gap:.55vh!important;flex-direction:column!important;z-index:220!important;}
#p5 .miniBtn,.miniBtn{height:3.8vh!important;width:100%!important;font-size:clamp(7px,1.85vw,12px)!important;border-width:2px!important;flex:0 0 auto!important;}
#continueBtn{left:5vw!important;top:calc(37.7vh + 30vw)!important;width:64vw!important;height:7.2vh!important;z-index:220!important;}
#boardDim{left:0!important;top:calc(4.2vh - 2.5vw)!important;width:74.5vw!important;height:74.5vw!important;}
#toast{font-size:9vw!important;padding:1.5vh 4vw!important;border-width:3px!important;}
}
/* M57 REAL: dedicated desktop-browser portrait layout.
Separate from phone portrait and landscape. This makes 100% browser portrait fit like mobile. */
@media (hover:hover) and (pointer:fine) and (orientation:portrait){
html,body{width:100vw!important;height:100vh!important;overflow:hidden!important;background:#030303!important;}
#stage{width:100vw!important;height:100vh!important;min-width:0!important;min-height:0!important;transform:none!important;margin:0!important;overflow:hidden!important;background:#030303!important;}
/* Boss header / art */
#p1{display:none!important;}
#p2{left:22vw!important;top:6.2vh!important;width:56vw!important;height:6.7vh!important;}
#bossName{font-size:clamp(18px,2.7vw,34px)!important;line-height:2.6vh!important;top:-3.1vh!important;}
.hp{height:4.2vh!important;border-width:3px!important;bottom:.2vh!important;}
#hptext{font-size:clamp(18px,3.3vw,34px)!important;line-height:3.7vh!important;}
#p3{left:14vw!important;top:15.8vh!important;width:72vw!important;height:15.5vh!important;border:none!important;box-shadow:none!important;background:transparent!important;}
#bossFrame{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;}
/* Main board column: slightly smaller and higher than M56 so lower UI fits. */
#p4{left:1vw!important;top:30.6vh!important;width:70vw!important;height:calc(70vw + 4vh)!important;padding:4vh 0 0 0!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #2c1707!important;}
#turnbar{height:4vh!important;font-size:clamp(14px,3.5vw,28px)!important;line-height:4vh!important;letter-spacing:2px!important;}
#board{left:0!important;top:4vh!important;width:70vw!important;height:70vw!important;}
.coord{font-size:2.45vw!important;}
.file{right:.42vw!important;bottom:.12vw!important;}
.rank{left:.42vw!important;top:.22vw!important;}
.pieceImg{width:90%!important;height:90%!important;}
/* Tower aligned to the board, never floating offscreen. */
#p10{left:74vw!important;top:30.6vh!important;width:23vw!important;height:calc(70vw + 4vh)!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #2c1707!important;padding-top:1.3vh!important;}
.towerBox{width:15vw!important;height:5.5vh!important;margin:1.05vh auto!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #19110d!important;}
.towerBox.current,.towerBox.hero{height:5.5vh!important;}
/* Answers hug the board; no giant dead area. */
button.answer{top:calc(30.6vh + 70vw + 5.4vh)!important;height:5.25vh!important;width:24vw!important;font-size:clamp(12px,2.55vw,22px)!important;border-width:3px!important;border-radius:3px!important;}
#p6{left:4.5vw!important;}
#p7{left:37.8vw!important;}
#p8{left:71.1vw!important;}
/* Player area is fully visible and attached to answers. */
#p9{display:block!important;visibility:visible!important;left:4.5vw!important;top:calc(30.6vh + 70vw + 11.2vh)!important;width:18vw!important;height:17vw!important;}
#heroFrame{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
#heroFace,#heroHp{display:none!important;visibility:hidden!important;}
#playerHpBar{left:29vw!important;top:calc(30.6vh + 70vw + 13.7vh)!important;width:45vw!important;height:3.9vh!important;border-width:3px!important;}
#playerHpText{font-size:clamp(16px,3.2vw,29px)!important;line-height:3.4vh!important;}
/* Board/Pieces controls tucked under tower column. */
#p5{left:77vw!important;right:auto!important;top:calc(30.6vh + 70vw + 11.1vh)!important;bottom:auto!important;width:18vw!important;height:9.2vh!important;padding:.7vh .8vw!important;gap:.55vh!important;flex-direction:column!important;z-index:220!important;}
#p5 .miniBtn,.miniBtn{height:3.6vh!important;width:100%!important;font-size:clamp(7px,1.6vw,12px)!important;border-width:2px!important;flex:0 0 auto!important;}
#continueBtn{left:5vw!important;top:calc(34.6vh + 30vw)!important;width:62vw!important;height:7vh!important;z-index:220!important;}
#boardDim{left:0!important;top:calc(4vh - 2.5vw)!important;width:72.5vw!important;height:72.5vw!important;}
#toast{font-size:7vw!important;padding:1.3vh 3.6vw!important;border-width:3px!important;}
}
/* M60: final player-column nudge — align lower controls with chessboard left edge. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
button.answer{top:calc(33.5vh + 66vw + 5.4vh + var(--m21-down))!important;}
#p6{left:1vw!important;}
#p7{left:33.75vw!important;}
#p8{left:66.5vw!important;}
#p9{left:1vw!important;top:calc(33.5vh + 66vw + 11.3vh + var(--m21-down))!important;}
#playerHpBar{left:25.5vw!important;top:calc(33.5vh + 66vw + 13.8vh + var(--m21-down))!important;}
}
@media (hover:hover) and (pointer:fine) and (orientation:portrait){
button.answer{top:calc(30.6vh + 70vw + 4.8vh)!important;}
#p6{left:1vw!important;}
#p7{left:34.3vw!important;}
#p8{left:67.6vw!important;}
#p9{left:1vw!important;top:calc(30.6vh + 70vw + 10.5vh)!important;}
#playerHpBar{left:25.5vw!important;top:calc(30.6vh + 70vw + 13.0vh)!important;}
}
/* M69: Layer move previews correctly: circles lowest, arrows over circles, pieces highest. */
.mark-red::after,.mark-blue::after,.mark-green::after,.mark-yellow::after{z-index:2!important;}
#moveArrowLayer{z-index:4!important;}
.pieceImg{position:relative!important;z-index:9!important;}
.coord{z-index:12!important;}
/* M72Y: mobile portrait lower gameplay block moved up to the boss-frame edge.
Boss name, boss HP, and boss art stay untouched. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
:root{--gameplay-up:3.0dvh;}
#p4{top:calc(33.5dvh - 6vw + var(--m21-down) - var(--gameplay-up))!important;}
#p10{top:calc(32.5dvh - var(--gameplay-up))!important;}
button.answer{top:calc(33.5dvh + 66vw + 5.4dvh + var(--m21-down) - var(--gameplay-up))!important;}
#p9{top:calc(33.5dvh + 66vw + 11.3dvh + var(--m21-down) - var(--gameplay-up))!important;}
#playerHpBar{top:calc(33.5dvh + 66vw + 13.8dvh + var(--m21-down) - var(--gameplay-up))!important;}
#p5{top:auto!important;bottom:calc(1dvh + var(--gameplay-up))!important;}
#continueBtn{top:calc(37.7dvh + 30vw - var(--gameplay-up))!important;}
#boardDim{top:calc(4.2dvh - 2.5vw)!important;}
}
/* M74: mobile portrait tower alignment — move tower stack down so top square lines up with chessboard top edge. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p10{top:calc(32.5dvh - var(--gameplay-up) + 1.8dvh)!important;}
}
/* M76: ONLY move hero HP bar directly under the hero panel.
Do not move hero, board, tower, answer buttons, board/pieces, or boss area. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#playerHpBar{
left:1vw!important;
top:calc(33.5dvh + 66vw + 11.3dvh + var(--m21-down) - var(--gameplay-up) + 17vw + .55dvh)!important;
width:18vw!important;
height:2.7dvh!important;
border-width:3px!important;
z-index:230!important;
}
#playerHpText{
font-size:clamp(10px,3.1vw,18px)!important;
line-height:2.25dvh!important;
}
}
@media (hover:hover) and (pointer:fine) and (orientation:portrait){
#playerHpBar{
left:1vw!important;
top:calc(30.6vh + 70vw + 10.5vh + 17vw + .55vh)!important;
width:18vw!important;
height:2.7vh!important;
border-width:3px!important;
z-index:230!important;
}
#playerHpText{
font-size:clamp(10px,3.1vw,18px)!important;
line-height:2.25vh!important;
}
}
/* M77: move ONLY the hero HP panel up so it sits level with the hero sprite panel. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#playerHpBar{
left:25.5vw!important;
top:calc(33.5dvh + 66vw + 11.3dvh + var(--m21-down) - var(--gameplay-up))!important;
width:47vw!important;
height:3.7dvh!important;
border-width:3px!important;
z-index:230!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
}
@media (hover:hover) and (pointer:fine) and (orientation:portrait){
#playerHpBar{
left:25.5vw!important;
top:calc(30.6vh + 70vw + 10.5vh)!important;
width:47vw!important;
height:3.7vh!important;
border-width:3px!important;
z-index:230!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2vh!important;
}
}
/* APP2 M90: live arcade-stick input panel */
#stickPanel{
position:absolute;
left:24px;
top:1112px;
width:160px;
height:135px;
border:4px solid #f3a900;
box-shadow:inset 0 0 0 3px #2c1707, 0 0 18px rgba(243,169,0,.22);
background:#06101d;
z-index:55;
overflow:hidden;
display:flex!important;
align-items:center;
justify-content:center;
visibility:visible!important;
}
#stickPanel.flash{filter:brightness(1.28);}
.stickFrame{
width:100%;
height:100%;
object-fit:cover;
image-rendering:pixelated;
display:block;
pointer-events:none;
user-select:none;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#stickPanel{
left:5vw!important;
top:calc(33.5dvh + 66vw + 13.2dvh)!important;
width:18vw!important;
height:17vw!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #2c1707, 0 0 12px rgba(243,169,0,.22)!important;
}
}
/* APP2 M91: move live arcade-stick panel to bottom-right utility area */
#stickPanel{
left:904px!important;
top:1000px!important;
width:276px!important;
height:126px!important;
z-index:56!important;
}
#stickPanel .stickFrame,
#stickFrame{
width:100%!important;
height:100%!important;
object-fit:cover!important;
image-rendering:pixelated!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#stickPanel{
left:76vw!important;
top:calc(33.5dvh + 66vw + 13.8dvh)!important;
width:22vw!important;
height:11.5dvh!important;
border-width:3px!important;
}
}
/* APP2 M93: remove bottom tower square and place BOARD/PIECES in that tower slot */
#p10 .towerBox.hero{
display:none!important;
visibility:hidden!important;
}
#p5{
left:925px!important;
top:966px!important;
bottom:auto!important;
width:210px!important;
height:132px!important;
padding:12px!important;
display:flex!important;
flex-direction:column!important;
gap:10px!important;
align-items:center!important;
justify-content:center!important;
z-index:60!important;
}
#p5 .miniBtn{
width:100%!important;
height:50px!important;
flex:0 0 auto!important;
font-size:18px!important;
border-width:3px!important;
}
/* Keep the stick panel above the utility buttons and clear of the tower boxes. */
#stickPanel{
left:904px!important;
top:820px!important;
width:276px!important;
height:126px!important;
}
/* Shorten tower panel visually now that the bottom square is gone. */
#p10{
height:610px!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p5{
left:78.5vw!important;
top:calc(32.5dvh + 31.9dvh)!important;
bottom:auto!important;
width:17vw!important;
height:10.8dvh!important;
padding:.75dvh .8vw!important;
gap:.7dvh!important;
flex-direction:column!important;
z-index:70!important;
}
#p5 .miniBtn{
width:100%!important;
height:4.4dvh!important;
font-size:clamp(8px,2vw,13px)!important;
border-width:2px!important;
}
#stickPanel{
left:76vw!important;
top:calc(33.5dvh + 66vw + 7.5dvh)!important;
width:22vw!important;
height:10.8dvh!important;
}
#p10{
height:34.5dvh!important;
}
}
/* APP2 M94: arcade stick all the way bottom-right under BOARD/PIECES */
#p5{
left:925px!important;
top:900px!important;
}
#stickPanel{
left:925px!important;
top:1065px!important;
width:210px!important;
height:126px!important;
z-index:60!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p5{
left:78.5vw!important;
top:69.5dvh!important;
}
#stickPanel{
left:78.5vw!important;
top:82.5dvh!important;
width:17vw!important;
height:10.5dvh!important;
}
}
/* APP2 M95 */
#p5,
#stickPanel{
display:none !important;
visibility:hidden !important;
}
/* APP2 M96: board -> hero unit -> horizontal move buttons */
#p9{
display:flex!important;
visibility:visible!important;
position:absolute!important;
left:108px!important;
top:1044px!important;
width:160px!important;
height:135px!important;
z-index:65!important;
}
#playerHpBar{
left:285px!important;
top:1088px!important;
width:390px!important;
height:34px!important;
z-index:66!important;
}
#playerHpText{
font-size:22px!important;
line-height:27px!important;
}
button.answer{
top:1192px!important;
width:226px!important;
height:58px!important;
z-index:70!important;
}
#p6{left:108px!important;}
#p7{left:374px!important;}
#p8{left:640px!important;}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p9{
display:flex!important;
visibility:visible!important;
left:5vw!important;
top:calc(33.5dvh + 72vw + 5.2dvh)!important;
width:18vw!important;
height:17vw!important;
z-index:230!important;
}
#playerHpBar{
left:25.5vw!important;
top:calc(33.5dvh + 72vw + 9.8dvh)!important;
width:47vw!important;
height:3.7dvh!important;
z-index:230!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
button.answer{
top:calc(33.5dvh + 72vw + 15.0dvh)!important;
height:5.4dvh!important;
width:22vw!important;
z-index:240!important;
}
#p6{left:3vw!important;}
#p7{left:26vw!important;}
#p8{left:49vw!important;}
}
/* APP2 M97: lock HP bar directly to hero panel; buttons stay horizontal underneath */
#p9{
display:flex!important;
visibility:visible!important;
left:108px!important;
top:1044px!important;
width:160px!important;
height:135px!important;
z-index:70!important;
}
#playerHpBar{
left:108px!important;
top:1182px!important;
width:160px!important;
height:30px!important;
z-index:71!important;
border-width:4px!important;
}
#playerHpText{
font-size:20px!important;
line-height:23px!important;
}
button.answer{
top:1222px!important;
height:50px!important;
width:226px!important;
z-index:72!important;
}
#p6{left:108px!important;}
#p7{left:374px!important;}
#p8{left:640px!important;}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p9{
display:flex!important;
visibility:visible!important;
left:5vw!important;
top:calc(33.5dvh + 72vw + 5.2dvh)!important;
width:18vw!important;
height:17vw!important;
z-index:230!important;
}
#playerHpBar{
left:5vw!important;
top:calc(33.5dvh + 72vw + 5.2dvh + 17vw + .6dvh)!important;
width:18vw!important;
height:2.7dvh!important;
border-width:3px!important;
z-index:231!important;
}
#playerHpText{
font-size:clamp(10px,2.4vw,16px)!important;
line-height:2.25dvh!important;
}
button.answer{
top:calc(33.5dvh + 72vw + 5.2dvh + 17vw + 4.4dvh)!important;
height:5.4dvh!important;
width:22vw!important;
z-index:240!important;
}
#p6{left:3vw!important;}
#p7{left:26vw!important;}
#p8{left:49vw!important;}
}
/* APP2 M98 wrong answers lock out */
button.answer.disabledAnswer,
button.answer:disabled{
filter:grayscale(1) brightness(.48)!important;
opacity:.52!important;
border-color:#777!important;
color:#bbb!important;
background:linear-gradient(135deg,#333,#111)!important;
cursor:not-allowed!important;
}
/* APP2 M99: hero + HP locked as one side-attached unit under board; buttons below */
#p9{
display:flex!important;
visibility:visible!important;
left:108px!important;
top:1044px!important;
width:160px!important;
height:135px!important;
z-index:80!important;
}
/* HP bar attached to the RIGHT SIDE of the hero panel, matching the locked reference state */
#playerHpBar{
left:268px!important;
top:1088px!important;
width:390px!important;
height:50px!important;
border:4px solid #ddd!important;
z-index:81!important;
}
#playerHpText{
font-size:32px!important;
line-height:43px!important;
}
/* Answer buttons remain horizontal, now UNDER the locked hero + HP unit */
button.answer{
top:1196px!important;
height:58px!important;
width:226px!important;
z-index:82!important;
}
#p6{left:108px!important;}
#p7{left:374px!important;}
#p8{left:640px!important;}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p9{
display:flex!important;
visibility:visible!important;
left:1vw!important;
top:calc(33.5dvh + 72vw + 1.9dvh)!important;
width:18vw!important;
height:17vw!important;
z-index:230!important;
}
/* Locked to hero: starts exactly at hero right edge */
#playerHpBar{
left:19vw!important;
top:calc(33.5dvh + 72vw + 5.8dvh)!important;
width:47vw!important;
height:3.7dvh!important;
border-width:3px!important;
z-index:231!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
button.answer{
top:calc(33.5dvh + 72vw + 20.5dvh)!important;
height:5.4dvh!important;
width:22vw!important;
z-index:240!important;
}
#p6{left:3vw!important;}
#p7{left:26vw!important;}
#p8{left:49vw!important;}
}
/* APP2 M100: answer buttons show arrow-direction only; HP top aligns with hero top */
button.answer{
font-size:34px!important;
}
#playerHpBar{
top:1044px!important; /* align with hero panel top */
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#playerHpBar{
top:calc(33.5dvh + 72vw + 1.9dvh)!important; /* align with hero top */
}
button.answer{
font-size:clamp(18px,5.6vw,34px)!important;
}
}
/* APP2 M106: boss panel is an exact replica of the locked hero panel + HP bar, placed above the chessboard.
Same size, colors, border/outline, and attachment relationship as the hero unit. */
#bossClonePanel{
display:flex!important;
visibility:visible!important;
position:absolute!important;
left:108px!important;
top:260px!important;
width:160px!important;
height:135px!important;
z-index:83!important;
}
#bossCloneFrame{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
display:block!important;
}
/* Exact same dimensions/placement relationship as hero HP: attached to right side of panel */
#bossCloneHpBar{
position:absolute!important;
left:268px!important;
top:260px!important;
width:390px!important;
height:50px!important;
border:4px solid #ddd!important;
background:#001d07!important;
clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)!important;
box-shadow:none!important;
z-index:84!important;
overflow:hidden!important;
text-align:center!important;
}
#bossCloneHpFill{
position:absolute;
left:0;
top:0;
bottom:0;
width:100%;
background:linear-gradient(#56ff63,#14a72a 56%,#055f15)!important;
transition:width .25s ease;
}
#bossCloneHpText{
position:relative;
z-index:2;
font-size:32px!important;
font-weight:bold;
line-height:43px!important;
text-shadow:3px 3px #000!important;
color:#fff;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#bossClonePanel{
display:flex!important;
visibility:visible!important;
left:1vw!important;
top:calc(33.5dvh - 6vw - 7.6dvh)!important;
width:18vw!important;
height:17vw!important;
z-index:230!important;
}
#bossCloneHpBar{
left:19vw!important;
top:calc(33.5dvh - 6vw - 7.6dvh)!important;
width:47vw!important;
height:3.7dvh!important;
border-width:3px!important;
z-index:231!important;
}
#bossCloneHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
}
/* APP2 M107: remove original top boss HP bar, keep only boss name + cloned boss panel HP */
#p2 .hp{
display:none!important;
visibility:hidden!important;
}
#p2{
height:32px!important;
}
#bossName{
display:block!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p2 .hp{
display:none!important;
visibility:hidden!important;
}
#p2{
height:3dvh!important;
}
}
/* APP2 M108: lock boss/hero status units to the chessboard coordinate system.
Fixes browser zoom/address-bar changes where status panels drift while board stays put. */
:root{
--app-board-left:108px;
--app-board-top:378px;
--app-board-size:758px;
--status-panel-w:160px;
--status-panel-h:135px;
--status-hp-w:390px;
--status-hp-h:50px;
}
/* Desktop/tablet absolute layout: all status units are positioned from board top/left. */
#bossClonePanel{
left:var(--app-board-left)!important;
top:calc(var(--app-board-top) - 118px)!important;
width:var(--status-panel-w)!important;
height:var(--status-panel-h)!important;
}
#bossCloneHpBar{
left:calc(var(--app-board-left) + var(--status-panel-w))!important;
top:calc(var(--app-board-top) - 118px)!important;
width:var(--status-hp-w)!important;
height:var(--status-hp-h)!important;
}
#p9{
left:var(--app-board-left)!important;
top:calc(var(--app-board-top) + var(--app-board-size) + 8px)!important;
width:var(--status-panel-w)!important;
height:var(--status-panel-h)!important;
}
#playerHpBar{
left:calc(var(--app-board-left) + var(--status-panel-w))!important;
top:calc(var(--app-board-top) + var(--app-board-size) + 8px)!important;
width:var(--status-hp-w)!important;
height:var(--status-hp-h)!important;
}
button.answer{
top:calc(var(--app-board-top) + var(--app-board-size) + 160px)!important;
}
/* Mobile portrait: define ONE board coordinate set, then derive every status position from it. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
:root{
--m-board-left:1vw;
--m-board-top:calc(33.5dvh - 6vw);
--m-board-size:72vw;
--m-panel-w:18vw;
--m-panel-h:17vw;
--m-hp-w:47vw;
--m-hp-h:3.7dvh;
--m-gap:1.2dvh;
}
#p4{
left:var(--m-board-left)!important;
top:var(--m-board-top)!important;
width:var(--m-board-size)!important;
height:calc(var(--m-board-size) + 4.2dvh)!important;
}
#board{
left:0!important;
top:4.2dvh!important;
width:var(--m-board-size)!important;
height:var(--m-board-size)!important;
}
#bossClonePanel{
left:var(--m-board-left)!important;
top:calc(var(--m-board-top) - var(--m-panel-h) - var(--m-gap))!important;
width:var(--m-panel-w)!important;
height:var(--m-panel-h)!important;
}
#bossCloneHpBar{
left:calc(var(--m-board-left) + var(--m-panel-w))!important;
top:calc(var(--m-board-top) - var(--m-panel-h) - var(--m-gap))!important;
width:var(--m-hp-w)!important;
height:var(--m-hp-h)!important;
}
#p9{
left:var(--m-board-left)!important;
top:calc(var(--m-board-top) + 4.2dvh + var(--m-board-size) + var(--m-gap))!important;
width:var(--m-panel-w)!important;
height:var(--m-panel-h)!important;
}
#playerHpBar{
left:calc(var(--m-board-left) + var(--m-panel-w))!important;
top:calc(var(--m-board-top) + 4.2dvh + var(--m-board-size) + var(--m-gap))!important;
width:var(--m-hp-w)!important;
height:var(--m-hp-h)!important;
}
button.answer{
top:calc(var(--m-board-top) + 4.2dvh + var(--m-board-size) + var(--m-gap) + var(--m-panel-h) + 2.2dvh)!important;
}
}
/* APP2 M112: mobile recovery.
Start from M109 mobile layout, restore original red boss HP, keep boss portrait panel,
and do NOT use the M110 fixed-desktop mobile override. */
/* Restore original top boss HP bar */
#p2 .hp{
display:block!important;
visibility:visible!important;
}
#bossName{
display:block!important;
visibility:visible!important;
}
#hpfill{
background:linear-gradient(#ff4a32,#b60000 56%,#640000)!important;
}
#hptext{
color:#fff!important;
}
/* Boss clone stays portrait-only; no duplicate green boss HP */
#bossCloneHpBar{
display:none!important;
visibility:hidden!important;
}
/* Keep boss portrait visible, but do not force desktop-stage mobile scaling */
#bossClonePanel{
display:flex!important;
visibility:visible!important;
}
/* Mobile portrait: restore responsive mobile placement from the working branch */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
html,body{
width:100vw!important;
height:100dvh!important;
overflow:hidden!important;
background:#030303!important;
}
#stage{
width:100vw!important;
height:100dvh!important;
min-height:100dvh!important;
transform:none!important;
margin:0!important;
overflow:hidden!important;
background:#030303!important;
}
#p2{
left:23vw!important;
top:9.8dvh!important;
width:54vw!important;
height:4dvh!important;
}
#p2 .hp{
display:block!important;
visibility:visible!important;
height:3.7dvh!important;
border-width:3px!important;
bottom:.2dvh!important;
}
#hptext{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
#p3{
left:17vw!important;
top:17.8dvh!important;
width:56vw!important;
height:13.5dvh!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
}
#bossClonePanel{
left:1vw!important;
top:calc(33.5dvh - 6vw - 7.6dvh)!important;
width:18vw!important;
height:17vw!important;
z-index:230!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #2c1707!important;
}
#bossCloneHpBar{
display:none!important;
visibility:hidden!important;
}
#p4{
left:1vw!important;
top:calc(33.5dvh - 6vw)!important;
width:72vw!important;
height:calc(72vw + 4.2dvh)!important;
padding:4.2dvh 0 0 0!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #2c1707!important;
}
#turnbar{
height:4.2dvh!important;
font-size:clamp(16px,4vw,30px)!important;
line-height:4.2dvh!important;
letter-spacing:2px!important;
}
#board{
left:0!important;
top:4.2dvh!important;
width:72vw!important;
height:72vw!important;
}
.coord{font-size:2.7vw!important;}
.file{right:.45vw!important;bottom:.12vw!important;}
.rank{left:.45vw!important;top:.25vw!important;}
.pieceImg{width:90%!important;height:90%!important;}
#p10{
left:76vw!important;
top:32.5dvh!important;
width:22vw!important;
height:34.5dvh!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #2c1707!important;
padding-top:1.5dvh!important;
}
.towerBox{
width:15vw!important;
height:6.1dvh!important;
margin:1.1dvh auto!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #19110d!important;
}
.towerBox.current{height:6.1dvh!important;}
.towerBox.hero{display:none!important;}
#p9{
display:flex!important;
visibility:visible!important;
left:1vw!important;
top:calc(33.5dvh + 72vw + 1.9dvh)!important;
width:18vw!important;
height:17vw!important;
z-index:230!important;
}
#playerHpBar{
left:19vw!important;
top:calc(33.5dvh + 72vw + 1.9dvh)!important;
width:47vw!important;
height:3.7dvh!important;
border-width:3px!important;
z-index:231!important;
}
#playerHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
button.answer{
top:calc(33.5dvh + 72vw + 20.5dvh)!important;
height:5.4dvh!important;
width:22vw!important;
font-size:clamp(18px,5.6vw,34px)!important;
border-width:3px!important;
z-index:240!important;
}
#p6{left:3vw!important;}
#p7{left:26vw!important;}
#p8{left:49vw!important;}
}
/* M114: Boss panel exactly matches hero panel frame and size */
#bossClonePanel{
width:160px !important;
height:135px !important;
border:4px solid #ddd !important;
box-shadow:inset 0 0 0 3px #2c1707 !important;
background:#07070b !important;
overflow:hidden !important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#bossClonePanel{
width:18vw !important;
height:17vw !important;
border-width:3px !important;
box-shadow:inset 0 0 0 2px #2c1707 !important;
}
}
/* APP2 M116: boss HP bar matches hero HP bar dimensions exactly */
#bossCloneHpBar{
display:block!important;
visibility:visible!important;
position:absolute!important;
left:268px!important;
top:260px!important;
width:390px!important;
height:50px!important;
border:4px solid #ddd!important;
background:#230000!important;
clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)!important;
box-shadow:none!important;
z-index:84!important;
overflow:hidden!important;
text-align:center!important;
}
#bossCloneHpFill{
position:absolute!important;
left:0!important;
top:0!important;
bottom:0!important;
width:100%;
background:linear-gradient(#ff4a32,#b60000 56%,#640000)!important;
transition:width .25s ease!important;
}
#bossCloneHpText{
position:relative!important;
z-index:2!important;
font-size:32px!important;
font-weight:bold!important;
line-height:43px!important;
text-shadow:3px 3px #000!important;
color:#fff!important;
}
/* Keep original top boss HP hidden so there is only one boss HP bar */
#p2 .hp{
display:none!important;
visibility:hidden!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#bossCloneHpBar{
display:block!important;
visibility:visible!important;
left:19vw!important;
top:calc(33.5dvh - 6vw - 7.6dvh)!important;
width:47vw!important;
height:3.7dvh!important;
border-width:3px!important;
z-index:231!important;
}
#bossCloneHpText{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
#p2 .hp{
display:none!important;
visibility:hidden!important;
}
}
/* APP2 M118: new Crabbeard animation frames only, no old background scene inside boss art */
#p3{
background:transparent!important;
border:none!important;
box-shadow:none!important;
overflow:visible!important;
}
.bossFrame{
object-fit:contain!important;
object-position:center bottom!important;
image-rendering:auto!important;
}
#bossCloneFrame{
object-fit:contain!important;
object-position:center bottom!important;
image-rendering:auto!important;
}
/* APP2 M119: clean aligned Crabbeard frame crops.
All animation frames are fixed-cell crops from the original sheet, with identical canvas/scale.
This prevents side-to-side wobble caused by per-frame tight trimming. */
.bossFrame,
#bossCloneFrame{
object-fit:contain!important;
object-position:center bottom!important;
image-rendering:auto!important;
}
/* APP2 M120: remove little boss panel; boss HP lives under boss name */
#bossClonePanel,
#bossCloneHpBar{
display:none!important;
visibility:hidden!important;
}
/* Restore and position the original boss HP directly under the boss name */
#p2{
display:block!important;
visibility:visible!important;
left:270px!important;
top:72px!important;
width:560px!important;
height:92px!important;
text-align:center!important;
z-index:90!important;
}
#bossName{
display:block!important;
visibility:visible!important;
position:relative!important;
height:34px!important;
line-height:34px!important;
color:#ffd45a!important;
font-size:28px!important;
font-weight:bold!important;
letter-spacing:3px!important;
text-shadow:2px 2px #000!important;
}
#p2 .hp{
display:block!important;
visibility:visible!important;
position:absolute!important;
left:0!important;
right:0!important;
top:38px!important;
bottom:auto!important;
height:50px!important;
border:4px solid #ddd!important;
background:#230000!important;
clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)!important;
}
#hpfill{
background:linear-gradient(#ff4a32,#b60000 56%,#640000)!important;
}
#hptext{
font-size:32px!important;
line-height:43px!important;
color:#fff!important;
text-shadow:3px 3px #000!important;
}
/* Move boss art down only as much as needed to clear the restored top HP bar */
#p3{
top:165px!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#bossClonePanel,
#bossCloneHpBar{
display:none!important;
visibility:hidden!important;
}
#p2{
left:23vw!important;
top:9.8dvh!important;
width:54vw!important;
height:7.9dvh!important;
}
#bossName{
height:3.2dvh!important;
line-height:3.2dvh!important;
font-size:clamp(16px,3.8vw,30px)!important;
letter-spacing:1px!important;
}
#p2 .hp{
display:block!important;
visibility:visible!important;
top:3.5dvh!important;
height:3.7dvh!important;
border-width:3px!important;
bottom:auto!important;
}
#hptext{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
#p3{
top:17.8dvh!important;
}
}
/* M121: remove old rectangle around chessboard */
#p4{
border:none !important;
box-shadow:none !important;
background:transparent !important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p4{
border:none !important;
box-shadow:none !important;
background:transparent !important;
}
}
/* APP2 M122: registered Crabbeard frames. No diagnostic/old rectangle. */
#p3{
background:transparent!important;
border:none!important;
box-shadow:none!important;
overflow:visible!important;
}
.bossFrame{
object-fit:contain!important;
object-position:center bottom!important;
image-rendering:auto!important;
}
#bossCloneFrame{
object-fit:contain!important;
object-position:center bottom!important;
image-rendering:auto!important;
}
/* APP2 M125: Ghost boss sprite sheet support */
.bossFrame{
object-fit:contain!important;
object-position:center bottom!important;
}
/* APP2 M128: keyboard-key answer cluster.
Layout reserves a 2x3-ish control space:
[ BLUE / UP ]
[ RED / LEFT ] [empty DOWN space] [ GREEN / RIGHT ]
Down space is intentionally left empty for future down button. */
button.answer{
width:96px!important;
height:96px!important;
border-radius:10px!important;
border-width:5px!important;
box-shadow:
inset 0 6px 0 rgba(255,255,255,.20),
inset 0 -8px 0 rgba(0,0,0,.38),
0 8px 0 rgba(0,0,0,.65)!important;
font-size:44px!important;
line-height:86px!important;
text-align:center!important;
padding:0!important;
font-family:Georgia,'Courier New',monospace!important;
}
/* Desktop key cluster to the right of hero HP */
#p7{
left:742px!important;
top:1110px!important;
}
#p6{
left:612px!important;
top:1220px!important;
}
#p8{
left:872px!important;
top:1220px!important;
}
/* Reserved invisible down-button space, not built yet. */
#stage::after{
content:"";
position:absolute;
left:742px;
top:1220px;
width:96px;
height:96px;
border:4px dashed rgba(255,255,255,.12);
border-radius:10px;
opacity:.18;
pointer-events:none;
z-index:20;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
button.answer{
width:13.5vw!important;
height:6.0dvh!important;
border-radius:7px!important;
border-width:3px!important;
font-size:clamp(24px,7vw,42px)!important;
line-height:5.2dvh!important;
box-shadow:
inset 0 .55dvh 0 rgba(255,255,255,.20),
inset 0 -.65dvh 0 rgba(0,0,0,.38),
0 .55dvh 0 rgba(0,0,0,.65)!important;
}
/* Mobile cluster in the empty area right of hero HP, matching the user's sketch */
#p7{
left:66vw!important;
top:calc(33.5dvh + 72vw + 8.0dvh)!important;
}
#p6{
left:50vw!important;
top:calc(33.5dvh + 72vw + 15.0dvh)!important;
}
#p8{
left:82vw!important;
top:calc(33.5dvh + 72vw + 15.0dvh)!important;
}
#stage::after{
left:66vw!important;
top:calc(33.5dvh + 72vw + 15.0dvh)!important;
width:13.5vw!important;
height:6.0dvh!important;
border-width:3px!important;
border-radius:7px!important;
}
}
/* APP2 M130: force plain text arrows, not emoji arrows */
button.answer{
font-family: Arial, Helvetica, sans-serif !important;
font-weight:900!important;
font-variant-emoji:text!important;
-webkit-font-smoothing:antialiased!important;
text-rendering:geometricPrecision!important;
}
/* APP2 M132: rebuilt ghost sheet integrated */
.bossFrame{object-fit:contain!important;object-position:center bottom!important;image-rendering:auto!important;}
/* APP2 M138: FINAL portrait board-lock fix.
In any portrait browser, the chessboard is the master anchor.
Hero, HP, tower, and keyboard cluster are derived from the board position/size only. */
@media (orientation:portrait) and (max-width:1200px){
html,body{
width:100vw!important;
height:100dvh!important;
overflow:hidden!important;
background:#030303!important;
}
#stage{
width:100vw!important;
height:100dvh!important;
min-width:0!important;
min-height:100dvh!important;
transform:scale(var(--desktop-zoom-lock,1))!important;
transform-origin:top left!important;
margin:0!important;
overflow:hidden!important;
background:#030303!important;
--m138-board-left:1vw;
--m138-board-top:calc(34dvh - 6vw);
--m138-board-size:min(72vw,48dvh);
--m138-panel-w:min(18vw,12.8dvh);
--m138-panel-h:min(17vw,12.1dvh);
--m138-hp-w:min(47vw,34dvh);
--m138-hp-h:3.7dvh;
--m138-gap:1.1dvh;
--m138-btn:min(11vw,7.2dvh);
--m138-btn-gap:min(2vw,1.4dvh);
--m138-ui-top:calc(var(--m138-board-top) + var(--m138-board-size) + var(--m138-gap));
}
/* Boss stays compact above the board. */
#p2{
left:23vw!important;
top:6.8dvh!important;
width:54vw!important;
height:7.8dvh!important;
z-index:90!important;
}
#bossName{
height:3.1dvh!important;
line-height:3.1dvh!important;
font-size:clamp(15px,3.5vw,28px)!important;
letter-spacing:1px!important;
white-space:nowrap!important;
}
#p2 .hp{
display:block!important;
visibility:visible!important;
top:3.4dvh!important;
height:3.7dvh!important;
border-width:3px!important;
}
#hptext{
font-size:clamp(16px,3.6vw,29px)!important;
line-height:3.2dvh!important;
}
#p3{
left:12vw!important;
top:15.4dvh!important;
width:76vw!important;
height:15dvh!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
overflow:hidden!important;
z-index:1!important;
}
.bossFrame,#bossFrame{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center bottom!important;
}
/* BOARD = master anchor. No decorative wrapper math, no hidden turnbar offset. */
#p4{
left:var(--m138-board-left)!important;
top:var(--m138-board-top)!important;
width:var(--m138-board-size)!important;
height:var(--m138-board-size)!important;
padding:0!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
overflow:visible!important;
z-index:5!important;
}
#board{
left:0!important;
top:0!important;
width:var(--m138-board-size)!important;
height:var(--m138-board-size)!important;
z-index:5!important;
}
#boardDim{
left:0!important;
top:0!important;
width:var(--m138-board-size)!important;
height:var(--m138-board-size)!important;
}
.coord{font-size:clamp(11px,2.5vw,22px)!important;}
/* Tower is attached to the board's right edge and matches board height. */
#p10{
left:calc(var(--m138-board-left) + var(--m138-board-size) + 3vw)!important;
top:var(--m138-board-top)!important;
width:calc(98vw - (var(--m138-board-left) + var(--m138-board-size) + 3vw))!important;
height:var(--m138-board-size)!important;
padding-top:.8dvh!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
z-index:6!important;
}
.towerBox{
width:70%!important;
height:calc((var(--m138-board-size) - 5.6dvh) / 4)!important;
margin:.9dvh auto!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #19110d!important;
}
.towerBox.current{height:calc((var(--m138-board-size) - 5.6dvh) / 4)!important;}
.towerBox.hero{display:none!important;visibility:hidden!important;}
/* Hero + HP are one unit attached under the board. */
#p9{
display:flex!important;
visibility:visible!important;
left:var(--m138-board-left)!important;
top:var(--m138-ui-top)!important;
width:var(--m138-panel-w)!important;
height:var(--m138-panel-h)!important;
border-width:3px!important;
z-index:230!important;
}
#playerHpBar{
left:calc(var(--m138-board-left) + var(--m138-panel-w))!important;
top:var(--m138-ui-top)!important;
width:var(--m138-hp-w)!important;
height:var(--m138-hp-h)!important;
border-width:3px!important;
z-index:231!important;
}
#playerHpText{
font-size:clamp(14px,3.4vw,27px)!important;
line-height:3.2dvh!important;
}
/* Keyboard cluster is also board-derived, never viewport-bottom-derived. */
button.answer{
width:var(--m138-btn)!important;
height:var(--m138-btn)!important;
top:auto!important;
font-size:clamp(20px,6vw,42px)!important;
line-height:calc(var(--m138-btn) - .8dvh)!important;
border-width:3px!important;
border-radius:7px!important;
z-index:240!important;
}
#p7{
left:calc(var(--m138-board-left) + var(--m138-board-size) - (var(--m138-btn) * 2) - var(--m138-btn-gap))!important;
top:calc(var(--m138-ui-top) + .4dvh)!important;
}
#p6{
left:calc(var(--m138-board-left) + var(--m138-board-size) - (var(--m138-btn) * 3) - (var(--m138-btn-gap) * 2))!important;
top:calc(var(--m138-ui-top) + var(--m138-btn) + var(--m138-btn-gap))!important;
}
#p8{
left:calc(var(--m138-board-left) + var(--m138-board-size) - var(--m138-btn))!important;
top:calc(var(--m138-ui-top) + var(--m138-btn) + var(--m138-btn-gap))!important;
}
#stage::after{
left:calc(var(--m138-board-left) + var(--m138-board-size) - (var(--m138-btn) * 2) - var(--m138-btn-gap))!important;
top:calc(var(--m138-ui-top) + var(--m138-btn) + var(--m138-btn-gap))!important;
width:var(--m138-btn)!important;
height:var(--m138-btn)!important;
border-width:3px!important;
border-radius:7px!important;
opacity:.16!important;
z-index:20!important;
}
#continueBtn{
left:calc(var(--m138-board-left) + (var(--m138-board-size) * .12))!important;
top:calc(var(--m138-board-top) + (var(--m138-board-size) * .45))!important;
width:calc(var(--m138-board-size) * .76)!important;
height:7dvh!important;
z-index:250!important;
}
}
@media (orientation:portrait) and (max-width:1200px) and (max-height:820px){
#stage{
--m138-board-top:30dvh;
--m138-board-size:min(68vw,44dvh);
--m138-panel-w:min(16vw,10.8dvh);
--m138-panel-h:min(15vw,10.2dvh);
--m138-hp-w:min(42vw,29dvh);
--m138-btn:min(10vw,6.2dvh);
}
#p2{top:5.7dvh!important;}
#p3{top:14dvh!important;height:14dvh!important;}
}
/* APP2 M139: portrait browser fit fix.
M138 still let the board/control cluster fall too low at 100% desktop portrait zoom.
This override applies to EVERY portrait viewport, not just max-width:1200, and budgets the
full screen height so the board is visible at 100% zoom. Board remains the master anchor. */
@media (orientation:portrait){
html,body{
width:100vw!important;
height:100dvh!important;
overflow:hidden!important;
background:#030303!important;
}
#stage{
width:100vw!important;
height:100dvh!important;
min-width:0!important;
min-height:100dvh!important;
transform:none!important;
margin:0!important;
overflow:hidden!important;
background:#030303!important;
/* Board-first layout: top + size + lower UI always fits in portrait. */
--m139-board-left:1vw;
--m139-board-top:31dvh;
--m139-board-size:min(72vw,40dvh);
--m139-gap:1dvh;
--m139-panel-w:min(18vw,11dvh);
--m139-panel-h:min(17vw,10.5dvh);
--m139-hp-w:min(43vw,29dvh);
--m139-hp-h:3.5dvh;
--m139-btn:min(11vw,6.5dvh);
--m139-btn-gap:min(2vw,1.1dvh);
--m139-ui-top:calc(var(--m139-board-top) + var(--m139-board-size) + var(--m139-gap));
}
#p2{left:23vw!important;top:5.6dvh!important;width:54vw!important;height:7.4dvh!important;z-index:90!important;}
#bossName{height:3dvh!important;line-height:3dvh!important;font-size:clamp(15px,3.2vw,28px)!important;letter-spacing:1px!important;white-space:nowrap!important;}
#p2 .hp{display:block!important;visibility:visible!important;top:3.2dvh!important;height:3.6dvh!important;border-width:3px!important;}
#hptext{font-size:clamp(16px,3.3vw,29px)!important;line-height:3.1dvh!important;}
#p3{left:12vw!important;top:13.6dvh!important;width:76vw!important;height:15.2dvh!important;border:none!important;box-shadow:none!important;background:transparent!important;overflow:hidden!important;z-index:1!important;}
.bossFrame,#bossFrame{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
#p4{left:var(--m139-board-left)!important;top:var(--m139-board-top)!important;width:var(--m139-board-size)!important;height:var(--m139-board-size)!important;padding:0!important;border:none!important;box-shadow:none!important;background:transparent!important;overflow:visible!important;z-index:5!important;}
#board{left:0!important;top:0!important;width:var(--m139-board-size)!important;height:var(--m139-board-size)!important;z-index:5!important;}
#boardDim{left:0!important;top:0!important;width:var(--m139-board-size)!important;height:var(--m139-board-size)!important;}
.coord{font-size:clamp(11px,2.5vw,22px)!important;}
#p10{left:calc(var(--m139-board-left) + var(--m139-board-size) + 3vw)!important;top:var(--m139-board-top)!important;width:calc(98vw - (var(--m139-board-left) + var(--m139-board-size) + 3vw))!important;height:var(--m139-board-size)!important;padding-top:.6dvh!important;border:none!important;box-shadow:none!important;background:transparent!important;z-index:6!important;}
.towerBox{width:70%!important;height:calc((var(--m139-board-size) - 5dvh) / 4)!important;margin:.75dvh auto!important;border-width:3px!important;box-shadow:inset 0 0 0 2px #19110d!important;}
.towerBox.current{height:calc((var(--m139-board-size) - 5dvh) / 4)!important;}
.towerBox.hero{display:none!important;visibility:hidden!important;}
#p9{display:flex!important;visibility:visible!important;left:var(--m139-board-left)!important;top:var(--m139-ui-top)!important;width:var(--m139-panel-w)!important;height:var(--m139-panel-h)!important;border-width:3px!important;z-index:230!important;}
#playerHpBar{left:calc(var(--m139-board-left) + var(--m139-panel-w))!important;top:var(--m139-ui-top)!important;width:var(--m139-hp-w)!important;height:var(--m139-hp-h)!important;border-width:3px!important;z-index:231!important;}
#playerHpText{font-size:clamp(14px,3vw,27px)!important;line-height:3dvh!important;}
button.answer{width:var(--m139-btn)!important;height:var(--m139-btn)!important;top:auto!important;font-size:clamp(20px,6vw,42px)!important;line-height:calc(var(--m139-btn) - .8dvh)!important;border-width:3px!important;border-radius:7px!important;z-index:240!important;}
#p7{left:calc(var(--m139-board-left) + var(--m139-board-size) - (var(--m139-btn) * 2) - var(--m139-btn-gap))!important;top:calc(var(--m139-ui-top) + .2dvh)!important;}
#p6{left:calc(var(--m139-board-left) + var(--m139-board-size) - (var(--m139-btn) * 3) - (var(--m139-btn-gap) * 2))!important;top:calc(var(--m139-ui-top) + var(--m139-btn) + var(--m139-btn-gap))!important;}
#p8{left:calc(var(--m139-board-left) + var(--m139-board-size) - var(--m139-btn))!important;top:calc(var(--m139-ui-top) + var(--m139-btn) + var(--m139-btn-gap))!important;}
#stage::after{left:calc(var(--m139-board-left) + var(--m139-board-size) - (var(--m139-btn) * 2) - var(--m139-btn-gap))!important;top:calc(var(--m139-ui-top) + var(--m139-btn) + var(--m139-btn-gap))!important;width:var(--m139-btn)!important;height:var(--m139-btn)!important;border-width:3px!important;border-radius:7px!important;opacity:.16!important;z-index:20!important;}
#continueBtn{left:calc(var(--m139-board-left) + (var(--m139-board-size) * .12))!important;top:calc(var(--m139-board-top) + (var(--m139-board-size) * .45))!important;width:calc(var(--m139-board-size) * .76)!important;height:7dvh!important;z-index:250!important;}
}
@media (orientation:portrait) and (max-height:820px){
#stage{--m139-board-top:29dvh;--m139-board-size:min(68vw,39dvh);--m139-panel-w:min(16vw,10dvh);--m139-panel-h:min(15vw,9.6dvh);--m139-hp-w:min(40vw,26dvh);--m139-btn:min(10vw,6dvh);}
#p2{top:4.8dvh!important;}
#p3{top:12.4dvh!important;height:14.2dvh!important;}
}
/* APP2 M142: mobile portrait keyboard cluster cleanup.
Keep hero + HP locked to board, then place the answer keys below that unit.
This removes the overlap with the HP bar and keeps the reserved down slot centered. */
@media (orientation:portrait){
#stage{
--m142-btn:min(10.5vw,5.8dvh);
--m142-btn-gap:min(2.2vw,1.2dvh);
--m142-btn-top:calc(var(--m139-ui-top, calc(31dvh + min(72vw,40dvh) + 1dvh)) + var(--m139-panel-h, min(17vw,10.5dvh)) + 1.5dvh);
--m142-btn-x:calc(var(--m139-board-left,1vw) + (var(--m139-board-size,min(72vw,40dvh)) * .50) - (var(--m142-btn) * .50));
}
button.answer{
width:var(--m142-btn)!important;
height:var(--m142-btn)!important;
font-size:clamp(20px,5.2vw,34px)!important;
line-height:calc(var(--m142-btn) - .7dvh)!important;
border-width:3px!important;
border-radius:7px!important;
padding:0!important;
z-index:260!important;
}
/* Keyboard cluster under the hero/HP unit:
BLUE
RED empty GREEN
*/
#p7{
left:var(--m142-btn-x)!important;
top:var(--m142-btn-top)!important;
}
#p6{
left:calc(var(--m142-btn-x) - var(--m142-btn) - var(--m142-btn-gap))!important;
top:calc(var(--m142-btn-top) + var(--m142-btn) + var(--m142-btn-gap))!important;
}
#p8{
left:calc(var(--m142-btn-x) + var(--m142-btn) + var(--m142-btn-gap))!important;
top:calc(var(--m142-btn-top) + var(--m142-btn) + var(--m142-btn-gap))!important;
}
#stage::after{
left:var(--m142-btn-x)!important;
top:calc(var(--m142-btn-top) + var(--m142-btn) + var(--m142-btn-gap))!important;
width:var(--m142-btn)!important;
height:var(--m142-btn)!important;
border-width:3px!important;
border-radius:7px!important;
opacity:.14!important;
z-index:25!important;
}
}
/* APP2 M143: real DOWN button added to the reserved center slot. */
#stage::after{display:none!important;content:none!important;}
#p11.dpadDown{
position:absolute;
left:742px!important;
top:1220px!important;
width:96px!important;
height:96px!important;
border-radius:10px!important;
border:5px solid #303030!important;
background:linear-gradient(135deg,#111,#030303)!important;
color:#fff!important;
opacity:.38;
box-shadow:inset 0 6px 0 rgba(255,255,255,.10), inset 0 -8px 0 rgba(0,0,0,.45), 0 8px 0 rgba(0,0,0,.65)!important;
font-family:Arial,Helvetica,sans-serif!important;
font-weight:900!important;
font-size:44px!important;
line-height:86px!important;
text-align:center!important;
padding:0!important;
cursor:pointer;
z-index:240!important;
}
#p11.dpadDown.activeDown{
opacity:1;
border-color:#176dff!important;
background:linear-gradient(135deg,#07366b,#020b1b)!important;
}
#p11.dpadDown:disabled{cursor:default;}
@media (orientation:portrait){
#p11.dpadDown{
width:var(--m142-btn, min(10.5vw,5.8dvh))!important;
height:var(--m142-btn, min(10.5vw,5.8dvh))!important;
left:var(--m142-btn-x, 50vw)!important;
top:calc(var(--m142-btn-top, 70dvh) + var(--m142-btn, min(10.5vw,5.8dvh)) + var(--m142-btn-gap, min(2.2vw,1.2dvh)))!important;
font-size:clamp(20px,5.2vw,34px)!important;
line-height:calc(var(--m142-btn, min(10.5vw,5.8dvh)) - .7dvh)!important;
border-width:3px!important;
border-radius:7px!important;
box-shadow:inset 0 .55dvh 0 rgba(255,255,255,.14), inset 0 -.65dvh 0 rgba(0,0,0,.40), 0 .55dvh 0 rgba(0,0,0,.65)!important;
z-index:261!important;
}
}
/* APP2 M144: Down button diamond formation + yellow reserved arrow. */
#p11.dpadDown{
color:#ffc02b!important;
text-shadow:0 2px 0 #000,0 0 8px rgba(255,192,43,.35)!important;
}
#p11.dpadDown.activeDown{
color:#ffc02b!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p11.dpadDown{
color:#ffc02b!important;
opacity:.54!important;
}
}
/* APP2 M149: Compact 8-direction D-pad.
Keeps current board/hero/boss layout; only replaces answer cluster.
*/
#p6{display:none!important;}
#p8{display:none!important;}
button.dpad8,
#p7.answer,
#p11.dpadDown,
#p12,#p13,#p14,#p15,#p16,#p17{
position:absolute!important;
width:78px!important;
height:78px!important;
border-radius:10px!important;
border:5px solid #3b3b3b!important;
background:linear-gradient(135deg,#111,#030303)!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
font-family:Arial,Helvetica,sans-serif!important;
font-weight:900!important;
font-size:40px!important;
line-height:66px!important;
text-align:center!important;
padding:0!important;
cursor:default;
z-index:260!important;
opacity:.34!important;
box-shadow:inset 0 6px 0 rgba(255,255,255,.10), inset 0 -8px 0 rgba(0,0,0,.45), 0 8px 0 rgba(0,0,0,.65)!important;
text-shadow:0 2px 0 #000!important;
}
/* Landscape/base coordinates: same answer footprint, just denser. */
#p12{left:302px!important;top:1004px!important;} /* ↖ */
#p7{left:402px!important;top:1004px!important;} /* ↑ */
#p13{left:502px!important;top:1004px!important;} /* ↗ */
#p14{left:302px!important;top:1100px!important;} /* ← */
#p15{left:502px!important;top:1100px!important;} /* → */
#p16{left:302px!important;top:1196px!important;} /* ↙ */
#p11{left:402px!important;top:1196px!important;} /* ↓ */
#p17{left:502px!important;top:1196px!important;} /* ↘ */
button.dpad8.activeDir,
#p7.activeDir,#p11.activeDir,#p12.activeDir,#p13.activeDir,#p14.activeDir,#p15.activeDir,#p16.activeDir,#p17.activeDir{
opacity:1!important;
cursor:pointer!important;
border-color:#f2c230!important;
background:linear-gradient(135deg,#1b1604,#050401)!important;
box-shadow:0 0 0 3px rgba(242,194,48,.55), inset 0 6px 0 rgba(255,255,255,.12), inset 0 -8px 0 rgba(0,0,0,.48), 0 8px 0 rgba(0,0,0,.65)!important;
}
button.dpad8:disabled,
#p7:disabled,#p11:disabled,#p12:disabled,#p13:disabled,#p14:disabled,#p15:disabled,#p16:disabled,#p17:disabled{
cursor:default!important;
}
button.dpad8.disabledAnswer,
#p7.disabledAnswer,#p11.disabledAnswer,#p12.disabledAnswer,#p13.disabledAnswer,#p14.disabledAnswer,#p15.disabledAnswer,#p16.disabledAnswer,#p17.disabledAnswer{
opacity:.28!important;
border-color:#555!important;
filter:grayscale(1) brightness(.65);
}
@media (orientation:portrait){
button.dpad8,
#p7.answer,
#p11.dpadDown,
#p12,#p13,#p14,#p15,#p16,#p17{
width:var(--m149-btn, min(9.2vw,5.05dvh))!important;
height:var(--m149-btn, min(9.2vw,5.05dvh))!important;
font-size:clamp(18px,4.8vw,34px)!important;
line-height:calc(var(--m149-btn, min(9.2vw,5.05dvh)) - 12px)!important;
border-width:4px!important;
}
:root{
--m149-gap:min(2.2vw,1.2dvh);
--m149-btn:min(9.2vw,5.05dvh);
--m149-x:50vw;
--m149-y:calc(var(--m142-btn-top, 70dvh) - var(--m149-btn) - var(--m149-gap));
}
#p12{left:calc(var(--m149-x) - var(--m149-btn) - var(--m149-gap))!important;top:var(--m149-y)!important;}
#p7{left:var(--m149-x)!important;top:var(--m149-y)!important;}
#p13{left:calc(var(--m149-x) + var(--m149-btn) + var(--m149-gap))!important;top:var(--m149-y)!important;}
#p14{left:calc(var(--m149-x) - var(--m149-btn) - var(--m149-gap))!important;top:calc(var(--m149-y) + var(--m149-btn) + var(--m149-gap))!important;}
#p15{left:calc(var(--m149-x) + var(--m149-btn) + var(--m149-gap))!important;top:calc(var(--m149-y) + var(--m149-btn) + var(--m149-gap))!important;}
#p16{left:calc(var(--m149-x) - var(--m149-btn) - var(--m149-gap))!important;top:calc(var(--m149-y) + (var(--m149-btn) + var(--m149-gap))*2)!important;}
#p11{left:var(--m149-x)!important;top:calc(var(--m149-y) + (var(--m149-btn) + var(--m149-gap))*2)!important;}
#p17{left:calc(var(--m149-x) + var(--m149-btn) + var(--m149-gap))!important;top:calc(var(--m149-y) + (var(--m149-btn) + var(--m149-gap))*2)!important;}
}
/* APP2 M150: 8-way D-pad refinement.
Same 8 fixed directions, moved up into the old answer area.
Inactive buttons are quieter; active buttons stay bright.
*/
button.dpad8,
#p7.answer,
#p11.dpadDown,
#p12,#p13,#p14,#p15,#p16,#p17{
opacity:.16!important;
transform:translateY(-132px)!important;
}
button.dpad8.activeDir,
#p7.activeDir,#p11.activeDir,#p12.activeDir,#p13.activeDir,#p14.activeDir,#p15.activeDir,#p16.activeDir,#p17.activeDir{
opacity:1!important;
transform:translateY(-132px) scale(1.04)!important;
}
button.dpad8.disabledAnswer,
#p7.disabledAnswer,#p11.disabledAnswer,#p12.disabledAnswer,#p13.disabledAnswer,#p14.disabledAnswer,#p15.disabledAnswer,#p16.disabledAnswer,#p17.disabledAnswer{
opacity:.14!important;
transform:translateY(-132px)!important;
}
@media (orientation:portrait){
button.dpad8,
#p7.answer,
#p11.dpadDown,
#p12,#p13,#p14,#p15,#p16,#p17{
transform:translateY(-7.2dvh)!important;
}
button.dpad8.activeDir,
#p7.activeDir,#p11.activeDir,#p12.activeDir,#p13.activeDir,#p14.activeDir,#p15.activeDir,#p16.activeDir,#p17.activeDir{
transform:translateY(-7.2dvh) scale(1.04)!important;
}
button.dpad8.disabledAnswer,
#p7.disabledAnswer,#p11.disabledAnswer,#p12.disabledAnswer,#p13.disabledAnswer,#p14.disabledAnswer,#p15.disabledAnswer,#p16.disabledAnswer,#p17.disabledAnswer{
transform:translateY(-7.2dvh)!important;
}
}
/* APP2 M154: REAL CONTROLLER PANEL DPAD
Rejected M153 scattered buttons. This creates one fixed bottom-right panel with CSS Grid.
Buttons live inside #dpadPanel and cannot escape over the board/hero/HP.
*/
/* Hide legacy 3-answer buttons completely. */
#p6.legacyAnswer,
#p8.legacyAnswer,
#p6,
#p8{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
outline:none!important;
border:0!important;
box-shadow:none!important;
background:transparent!important;
}
/* The controller panel itself: bottom-right empty zone. */
#dpadPanel{
position:absolute!important;
left:515px!important;
top:1120px!important;
width:330px!important;
height:285px!important;
display:grid!important;
grid-template-columns:repeat(3, 82px)!important;
grid-template-rows:repeat(3, 82px)!important;
gap:18px!important;
align-items:center!important;
justify-content:center!important;
z-index:300!important;
pointer-events:auto!important;
border:0!important;
outline:0!important;
background:transparent!important;
box-shadow:none!important;
}
/* Reset all old absolute coordinate rules for dpad buttons. */
#dpadPanel .dpad8,
#dpadPanel #p7,
#dpadPanel #p11,
#dpadPanel #p12,
#dpadPanel #p13,
#dpadPanel #p14,
#dpadPanel #p15,
#dpadPanel #p16,
#dpadPanel #p17{
position:relative!important;
left:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
width:82px!important;
height:82px!important;
min-width:82px!important;
min-height:82px!important;
max-width:82px!important;
max-height:82px!important;
margin:0!important;
padding:0!important;
transform:none!important;
border-radius:12px!important;
border:5px solid #242424!important;
background:linear-gradient(135deg,#070707,#020202)!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
font-family:Arial,Helvetica,sans-serif!important;
font-weight:900!important;
font-size:41px!important;
line-height:70px!important;
text-align:center!important;
opacity:.07!important;
cursor:default!important;
box-shadow:inset 0 4px 0 rgba(255,255,255,.04), inset 0 -5px 0 rgba(0,0,0,.38), 0 5px 0 rgba(0,0,0,.38)!important;
text-shadow:0 2px 0 #000!important;
outline:none!important;
-webkit-tap-highlight-color:transparent!important;
z-index:auto!important;
}
#dpadPanel .dpadCenter{
width:82px!important;
height:82px!important;
opacity:0!important;
pointer-events:none!important;
}
/* Active move choices glow. */
#dpadPanel .dpad8.activeDir,
#dpadPanel #p7.activeDir,
#dpadPanel #p11.activeDir,
#dpadPanel #p12.activeDir,
#dpadPanel #p13.activeDir,
#dpadPanel #p14.activeDir,
#dpadPanel #p15.activeDir,
#dpadPanel #p16.activeDir,
#dpadPanel #p17.activeDir{
opacity:1!important;
transform:scale(1.04)!important;
cursor:pointer!important;
border-color:#f2c230!important;
background:linear-gradient(135deg,#1b1604,#050401)!important;
box-shadow:0 0 0 4px rgba(242,194,48,.65), inset 0 6px 0 rgba(255,255,255,.12), inset 0 -8px 0 rgba(0,0,0,.48), 0 8px 0 rgba(0,0,0,.65)!important;
}
/* Inactive choices are a faint guide and cannot be tapped. */
#dpadPanel .dpad8:not(.activeDir),
#dpadPanel #p7:not(.activeDir),
#dpadPanel #p11:not(.activeDir),
#dpadPanel #p12:not(.activeDir),
#dpadPanel #p13:not(.activeDir),
#dpadPanel #p14:not(.activeDir),
#dpadPanel #p15:not(.activeDir),
#dpadPanel #p16:not(.activeDir),
#dpadPanel #p17:not(.activeDir){
pointer-events:none!important;
}
#dpadPanel .dpad8:disabled,
#dpadPanel .dpad8.disabledAnswer{
opacity:.06!important;
transform:none!important;
border-color:#222!important;
background:linear-gradient(135deg,#050505,#010101)!important;
cursor:default!important;
}
/* No browser focus rectangles. */
button,
button:focus,
button:focus-visible,
button:active{
outline:none!important;
-webkit-tap-highlight-color:transparent!important;
}
/* Portrait: place the whole controller panel in the empty bottom-right box. */
@media (orientation:portrait){
#dpadPanel{
left:52vw!important;
top:72dvh!important;
width:43vw!important;
height:21dvh!important;
grid-template-columns:repeat(3, min(10.5vw,5.7dvh))!important;
grid-template-rows:repeat(3, min(10.5vw,5.7dvh))!important;
gap:min(2.1vw,1.1dvh)!important;
align-items:center!important;
justify-content:center!important;
}
#dpadPanel .dpad8,
#dpadPanel #p7,
#dpadPanel #p11,
#dpadPanel #p12,
#dpadPanel #p13,
#dpadPanel #p14,
#dpadPanel #p15,
#dpadPanel #p16,
#dpadPanel #p17,
#dpadPanel .dpadCenter{
width:min(10.5vw,5.7dvh)!important;
height:min(10.5vw,5.7dvh)!important;
min-width:min(10.5vw,5.7dvh)!important;
min-height:min(10.5vw,5.7dvh)!important;
max-width:min(10.5vw,5.7dvh)!important;
max-height:min(10.5vw,5.7dvh)!important;
font-size:clamp(19px,5vw,36px)!important;
line-height:calc(min(10.5vw,5.7dvh) - 11px)!important;
border-width:4px!important;
transform:none!important;
}
#dpadPanel .dpad8.activeDir{
transform:scale(1.04)!important;
}
}
/* APP2 M155: color-matched controller + no duplicate D-pad input puzzle pool.
Active D-pad buttons inherit their board-arrow answer color.
*/
#dpadPanel .dpad8.activeDir.dpad-red{
border-color:#f21d1d!important;
background:linear-gradient(135deg,#6b0505,#1b0303)!important;
box-shadow:0 0 0 4px rgba(242,29,29,.62), inset 0 6px 0 rgba(255,255,255,.12), inset 0 -8px 0 rgba(0,0,0,.48), 0 8px 0 rgba(0,0,0,.65)!important;
}
#dpadPanel .dpad8.activeDir.dpad-blue{
border-color:#176dff!important;
background:linear-gradient(135deg,#07366b,#020b1b)!important;
box-shadow:0 0 0 4px rgba(23,109,255,.62), inset 0 6px 0 rgba(255,255,255,.12), inset 0 -8px 0 rgba(0,0,0,.48), 0 8px 0 rgba(0,0,0,.65)!important;
}
#dpadPanel .dpad8.activeDir.dpad-green{
border-color:#12c536!important;
background:linear-gradient(135deg,#064a10,#031b06)!important;
box-shadow:0 0 0 4px rgba(18,197,54,.62), inset 0 6px 0 rgba(255,255,255,.12), inset 0 -8px 0 rgba(0,0,0,.48), 0 8px 0 rgba(0,0,0,.65)!important;
}
/* APP2 M157: White-box controller placement.
Built from M155 baseline.
Places the full 3x3 D-pad inside the bottom-right dead-zone rectangle
shown by the user: below hero HP, right of hero/board, above browser toolbar.
NOT under the tower and NOT overlapping the HP/hero/board.
*/
/* Hard override any previous dpadPanel placement. */
#dpadPanel{
position:absolute!important;
left:520px!important;
top:1188px!important;
width:390px!important;
height:285px!important;
display:grid!important;
grid-template-columns:repeat(3, 84px)!important;
grid-template-rows:repeat(3, 84px)!important;
gap:20px!important;
justify-content:center!important;
align-items:center!important;
z-index:310!important;
background:transparent!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
pointer-events:auto!important;
}
/* Buttons are contained by the panel grid. No escaping. */
#dpadPanel .dpad8,
#dpadPanel #p7,
#dpadPanel #p11,
#dpadPanel #p12,
#dpadPanel #p13,
#dpadPanel #p14,
#dpadPanel #p15,
#dpadPanel #p16,
#dpadPanel #p17{
position:relative!important;
left:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
width:84px!important;
height:84px!important;
min-width:84px!important;
min-height:84px!important;
max-width:84px!important;
max-height:84px!important;
margin:0!important;
padding:0!important;
transform:none!important;
border-radius:12px!important;
border-width:5px!important;
font-size:42px!important;
line-height:72px!important;
}
#dpadPanel .dpadCenter{
width:84px!important;
height:84px!important;
min-width:84px!important;
min-height:84px!important;
max-width:84px!important;
max-height:84px!important;
opacity:0!important;
pointer-events:none!important;
}
/* Portrait phone: exact bottom-right white-box area from screenshot. */
@media (orientation:portrait){
#dpadPanel{
left:53vw!important;
top:72.2dvh!important;
width:43.5vw!important;
height:19.5dvh!important;
grid-template-columns:repeat(3, min(9.7vw,5.15dvh))!important;
grid-template-rows:repeat(3, min(9.7vw,5.15dvh))!important;
gap:min(2.05vw,1.05dvh)!important;
justify-content:center!important;
align-items:center!important;
z-index:310!important;
}
#dpadPanel .dpad8,
#dpadPanel #p7,
#dpadPanel #p11,
#dpadPanel #p12,
#dpadPanel #p13,
#dpadPanel #p14,
#dpadPanel #p15,
#dpadPanel #p16,
#dpadPanel #p17,
#dpadPanel .dpadCenter{
width:min(9.7vw,5.15dvh)!important;
height:min(9.7vw,5.15dvh)!important;
min-width:min(9.7vw,5.15dvh)!important;
min-height:min(9.7vw,5.15dvh)!important;
max-width:min(9.7vw,5.15dvh)!important;
max-height:min(9.7vw,5.15dvh)!important;
font-size:clamp(18px,4.8vw,34px)!important;
line-height:calc(min(9.7vw,5.15dvh) - 11px)!important;
border-width:4px!important;
border-radius:10px!important;
transform:none!important;
}
#dpadPanel .dpad8.activeDir{
transform:scale(1.04)!important;
}
}
/* APP2 M172: ONLY active fill color + plain white text arrows.
Do not change placement, size, borders, inactive style, puzzle logic, or keyboard.
*/
/* Force text arrows instead of image/sprite/pseudo arrows. */
#dpadPanel .dpad8,
#dpadPanel button{
background-image:none!important;
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif!important;
}
#dpadPanel .dpad8::before,
#dpadPanel .dpad8::after,
#dpadPanel button::before,
#dpadPanel button::after{
display:none!important;
content:none!important;
}
/* Change only the active square fill color. Preserve existing border/shape/shadow as much as possible. */
#dpadPanel .dpad8.activeDir[style*="background-color: rgb(214, 40, 40)"],
#dpadPanel .dpad8.activeDir.dpad-red{
background-color:#d62828!important;
background-image:none!important;
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
}
#dpadPanel .dpad8.activeDir[style*="background-color: rgb(37, 99, 235)"],
#dpadPanel .dpad8.activeDir.dpad-blue{
background-color:#2563eb!important;
background-image:none!important;
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
}
#dpadPanel .dpad8.activeDir[style*="background-color: rgb(22, 163, 74)"],
#dpadPanel .dpad8.activeDir.dpad-green{
background-color:#16a34a!important;
background-image:none!important;
color:#ffffff!important;
-webkit-text-fill-color:#ffffff!important;
}
/* APP2 M175 playable boss ladder */
.towerBossName{font-size:10px!important;letter-spacing:.5px!important;}
/* APP2 M175 playable boss ladder tower */
#towerList{box-sizing:border-box;}
.bossTowerRow{
box-sizing:border-box;
border:2px solid #6a4b35;
background:#070403;
color:#d7b98a;
font-family:Georgia,'Courier New',monospace;
font-weight:bold;
text-align:center;
letter-spacing:.35px;
padding:0 2px;
}
.bossTowerRow.current{
border-color:#ffd21c;
color:#ffd84a;
background:#1a1300;
box-shadow:0 0 8px rgba(255,210,28,.45);
}
.bossTowerRow.done{
border-color:#18c95a;
color:#70ff9b;
background:#031007;
}
/* APP2 M178: desktop landscape side-layout fix.
Start from M175. This is not a redesign: it relocates the existing pieces into
left hero controls, center board, right boss/color controls. Mobile portrait stays unchanged. */
#desktopColorPanel{display:none;}
@media (orientation:landscape) and (min-width:901px){
html,body{
width:100vw!important;
height:100dvh!important;
overflow:hidden!important;
background:#030303!important;
}
#stage{
width:100vw!important;
height:100dvh!important;
min-width:0!important;
min-height:0!important;
margin:0!important;
transform:scale(var(--desktop-zoom-lock,1))!important;
transform-origin:top left!important;
overflow:hidden!important;
background:#030303!important;
/* M205: tight locked landscape frame. 100% browser zoom fits like the approved compact screenshot. */
--desk-board:min(36vw,72dvh);
--desk-board-top:calc(50dvh - (var(--desk-board) / 2));
--desk-left-block:240px;
--desk-right-block:370px;
--desk-left-gap:20px;
--desk-right-gap:28px;
--desk-panel-w:160px;
--desk-panel-h:135px;
--desk-hp-h:28px;
--desk-total-w:calc(var(--desk-left-block) + var(--desk-left-gap) + var(--desk-board) + var(--desk-right-gap) + var(--desk-right-block));
--desk-group-left:max(8px, calc((100vw - var(--desk-total-w)) / 2));
--desk-board-left:calc(var(--desk-group-left) + var(--desk-left-block) + var(--desk-left-gap));
--desk-side-left:calc(var(--desk-group-left) + ((var(--desk-left-block) - var(--desk-panel-w)) / 2));
--desk-side-right:calc(var(--desk-board-left) + var(--desk-board) + var(--desk-right-gap));
}
/* Center board is the anchor. Nothing overlaps it. */
#p4{
left:var(--desk-board-left)!important;
top:var(--desk-board-top)!important;
width:var(--desk-board)!important;
height:var(--desk-board)!important;
padding:0!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
overflow:visible!important;
z-index:20!important;
}
#turnbar{display:none!important;visibility:hidden!important;}
#board{
left:0!important;
top:0!important;
width:var(--desk-board)!important;
height:var(--desk-board)!important;
z-index:20!important;
}
#boardDim{
left:0!important;
top:0!important;
width:var(--desk-board)!important;
height:var(--desk-board)!important;
}
.coord{font-size:clamp(12px,1.25vw,20px)!important;}
/* Left column: hero HP, hero, keyboard grid. */
#playerHpBar{
left:var(--desk-side-left)!important;
top:var(--desk-board-top)!important;
width:var(--desk-panel-w)!important;
height:var(--desk-hp-h)!important;
border-width:3px!important;
z-index:60!important;
}
#playerHpText{
font-size:clamp(13px,1.2vw,18px)!important;
line-height:calc(var(--desk-hp-h) - 6px)!important;
}
#p9{
display:flex!important;
visibility:visible!important;
left:var(--desk-side-left)!important;
top:calc(var(--desk-board-top) + var(--desk-hp-h) + 14px)!important;
width:var(--desk-panel-w)!important;
height:var(--desk-panel-h)!important;
border-width:3px!important;
z-index:60!important;
}
#heroFrame{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
#dpadPanel{
/* desktop: bottom of numpad locked to bottom of board */
left:calc(var(--desk-side-left) - 10px)!important;
top:calc(var(--desk-board-top) + var(--desk-board) - 165px)!important;
width:calc(var(--desk-panel-w) + 20px)!important;
height:170px!important;
display:grid!important;
grid-template-columns:repeat(3, 50px)!important;
grid-template-rows:repeat(3, 50px)!important;
gap:10px!important;
justify-content:center!important;
align-items:center!important;
z-index:80!important;
}
#dpadPanel .dpad8,
#dpadPanel #p7,#dpadPanel #p11,#dpadPanel #p12,#dpadPanel #p13,#dpadPanel #p14,#dpadPanel #p15,#dpadPanel #p16,#dpadPanel #p17,
#dpadPanel .dpadCenter{
width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;max-width:50px!important;max-height:50px!important;
font-size:26px!important;line-height:40px!important;border-width:3px!important;border-radius:6px!important;
}
#dpadPanel .dpad8.activeDir{transform:none!important;}
/* Right column: boss HP, boss portrait, color answer buttons. */
#p2{
left:var(--desk-side-right)!important;
top:var(--desk-board-top)!important;
width:300px!important;
height:56px!important;
z-index:60!important;
text-align:center!important;
}
#bossName{
height:20px!important;
line-height:20px!important;
font-size:clamp(12px,1.05vw,16px)!important;
letter-spacing:1px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
#p2 .hp{
display:block!important;
visibility:visible!important;
top:24px!important;
height:28px!important;
border-width:3px!important;
}
#hptext{
font-size:clamp(13px,1.25vw,18px)!important;
line-height:22px!important;
}
#p3{
display:flex!important;
visibility:visible!important;
left:calc(var(--desk-side-right) + 70px)!important;
top:calc(var(--desk-board-top) + 70px)!important;
width:160px!important;
height:135px!important;
border:0!important;
box-shadow:none!important;
background:transparent!important;
overflow:visible!important;
z-index:60!important;
}
#bossFrame,.bossFrame{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
#desktopColorPanel{
display:grid!important;
position:absolute!important;
left:calc(var(--desk-side-right) + 25px)!important;
top:calc(var(--desk-board-top) + var(--desk-board) - 150px)!important;
width:250px!important;
height:150px!important;
grid-template-columns:repeat(3, 68px)!important;
grid-template-rows:repeat(2, 68px)!important;
gap:18px!important;
grid-template-areas:'. blue .' 'red yellow green';
z-index:90!important;
pointer-events:auto!important;
}
.desktopColorBtn{
width:68px!important;height:68px!important;border-radius:50%!important;border:0!important;
color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;
font-weight:900!important;font-size:34px!important;line-height:68px!important;text-align:center!important;
padding:0!important;cursor:default!important;opacity:.28!important;text-shadow:0 2px 0 #000!important;
box-shadow:inset 0 5px 0 rgba(255,255,255,.18), inset 0 -8px 0 rgba(0,0,0,.38), 0 7px 0 rgba(0,0,0,.65)!important;
}
.colorBlue{grid-area:blue;background:#1fa8e8!important;}
.colorRed{grid-area:red;background:#ff1f2f!important;}
.colorGreen{grid-area:green;background:#078c10!important;}
.colorYellow{grid-area:yellow;background:#f2c230!important;color:#111!important;-webkit-text-fill-color:#111!important;text-shadow:0 1px 0 rgba(255,255,255,.35)!important;}
.desktopColorBtn.activeColor{opacity:1!important;cursor:pointer!important;}
.desktopColorBtn.disabledAnswer{filter:grayscale(1) brightness(.55)!important;opacity:.45!important;cursor:default!important;}
/* Legacy colored buttons stay hidden; desktop uses the new color panel. */
#p6,#p8{display:none!important;visibility:hidden!important;}
/* Tower is mobile/progression UI; hide it in desktop fight layout. */
#p10{display:none!important;visibility:hidden!important;}
#continueBtn{
left:calc(var(--desk-board-left) + var(--desk-board) * .16)!important;
top:calc(var(--desk-board-top) + var(--desk-board) * .44)!important;
width:calc(var(--desk-board) * .68)!important;
height:58px!important;
z-index:250!important;
}
}
/* APP2 M181: mobile portrait refinement.
Numpad becomes smaller secondary input and lives directly under the hero HP bar.
Color buttons remain the primary thumb buttons. */
@media (orientation:portrait){
#stage{
--m181-dpad-btn:min(7.2vw,3.9dvh);
--m181-dpad-gap:min(1.4vw,.75dvh);
--m181-dpad-w:calc((var(--m181-dpad-btn) * 3) + (var(--m181-dpad-gap) * 2));
--m181-dpad-top:calc(var(--m139-ui-top, 72dvh) + var(--m139-hp-h,3.5dvh) + .75dvh);
--m181-dpad-left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + var(--m139-hp-w,43vw) - var(--m181-dpad-w));
}
#dpadPanel{
left:var(--m181-dpad-left)!important;
top:var(--m181-dpad-top)!important;
width:var(--m181-dpad-w)!important;
height:calc((var(--m181-dpad-btn) * 3) + (var(--m181-dpad-gap) * 2))!important;
grid-template-columns:repeat(3, var(--m181-dpad-btn))!important;
grid-template-rows:repeat(3, var(--m181-dpad-btn))!important;
gap:var(--m181-dpad-gap)!important;
justify-content:center!important;
align-items:center!important;
z-index:245!important;
}
#dpadPanel .dpad8,
#dpadPanel #p7,
#dpadPanel #p11,
#dpadPanel #p12,
#dpadPanel #p13,
#dpadPanel #p14,
#dpadPanel #p15,
#dpadPanel #p16,
#dpadPanel #p17,
#dpadPanel .dpadCenter{
width:var(--m181-dpad-btn)!important;
height:var(--m181-dpad-btn)!important;
min-width:var(--m181-dpad-btn)!important;
min-height:var(--m181-dpad-btn)!important;
max-width:var(--m181-dpad-btn)!important;
max-height:var(--m181-dpad-btn)!important;
font-size:clamp(14px,3.6vw,26px)!important;
line-height:calc(var(--m181-dpad-btn) - 8px)!important;
border-width:3px!important;
border-radius:7px!important;
box-shadow:inset 0 3px 0 rgba(255,255,255,.06), inset 0 -4px 0 rgba(0,0,0,.36), 0 4px 0 rgba(0,0,0,.45)!important;
}
#dpadPanel .dpad8.activeDir{
transform:none!important;
box-shadow:0 0 0 3px rgba(242,194,48,.58), inset 0 4px 0 rgba(255,255,255,.10), inset 0 -5px 0 rgba(0,0,0,.45), 0 5px 0 rgba(0,0,0,.55)!important;
}
}
/* APP2 M182: mobile numpad left-aligned under hero HP.
Keep M181 placement/size; only move the small numpad to the left side under the health bar. */
@media (orientation:portrait){
#stage{
--m181-dpad-left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .4vw);
}
}
/* APP2 M183: mobile/portrait RGB thumb buttons stay fully visible in the bottom-right quadrant. */
@media (orientation:portrait){
#desktopColorPanel{
display:grid!important;
grid-template-areas:'. blue .' 'red yellow green'!important;
pointer-events:auto!important;
z-index:260!important;
}
.desktopColorBtn{
border-radius:50%!important;
border:0!important;
color:#fff!important;
-webkit-text-fill-color:#fff!important;
font-family:Arial,Helvetica,sans-serif!important;
font-weight:900!important;
text-align:center!important;
padding:0!important;
opacity:.28!important;
text-shadow:0 2px 0 #000!important;
box-shadow:inset 0 5px 0 rgba(255,255,255,.18), inset 0 -8px 0 rgba(0,0,0,.38), 0 7px 0 rgba(0,0,0,.65)!important;
}
.desktopColorBtn.activeColor{opacity:1!important;cursor:pointer!important;}
.colorBlue{grid-area:blue;background:#1fa8e8!important;}
.colorRed{grid-area:red;background:#ff1f2f!important;}
.colorGreen{grid-area:green;background:#078c10!important;}
.colorYellow{grid-area:yellow;background:#f2c230!important;color:#111!important;-webkit-text-fill-color:#111!important;text-shadow:0 1px 0 rgba(255,255,255,.35)!important;}
}
/* APP2 M186: Combo Mode button beside the numpad.
Same height as the numpad, half as wide. Space or + toggles the visual state. */
#comboModeBtn, #mobileComboModeBtn{
display:none;
position:absolute;
box-sizing:border-box;
background:linear-gradient(#171717,#050505);
border:3px solid #f2c230;
border-radius:8px;
color:#f6f1d0;
-webkit-text-fill-color:#f6f1d0;
font-family:Georgia,serif;
font-weight:900;
text-align:center;
letter-spacing:.5px;
text-shadow:0 2px 0 #000;
box-shadow:inset 0 3px 0 rgba(255,255,255,.08), inset 0 -5px 0 rgba(0,0,0,.45), 0 5px 0 rgba(0,0,0,.55);
padding:0;
line-height:1.02;
z-index:246;
cursor:pointer;
user-select:none;
}
#comboModeBtn span, #mobileComboModeBtn span{
display:block;
margin-top:.35em;
font-family:Arial,Helvetica,sans-serif;
font-size:.58em;
letter-spacing:0;
color:#f2c230;
-webkit-text-fill-color:#f2c230;
}
#comboModeBtn.comboOn, #comboModeBtn[aria-pressed="true"], #mobileComboModeBtn.comboOn, #mobileComboModeBtn[aria-pressed="true"]{
background:linear-gradient(#514000,#151000);
box-shadow:0 0 0 3px rgba(242,194,48,.50), inset 0 4px 0 rgba(255,255,255,.12), inset 0 -5px 0 rgba(0,0,0,.45), 0 5px 0 rgba(0,0,0,.55);
}
#comboModeBtn.comboDisabled,
#comboModeBtn:disabled,
#comboModeBtn[aria-disabled="true"],
#mobileComboModeBtn.comboDisabled,
#mobileComboModeBtn:disabled,
#mobileComboModeBtn[aria-disabled="true"]{
filter: grayscale(1) brightness(.62);
opacity:.58;
background: linear-gradient(180deg,#777,#3f3f3f);
border-color:#9a9a9a;
color:#d8d8d8;
box-shadow:none;
cursor:not-allowed;
}
#comboModeBtn.comboDisabled span,
#comboModeBtn:disabled span,
#comboModeBtn[aria-disabled="true"] span,
#mobileComboModeBtn.comboDisabled span,
#mobileComboModeBtn:disabled span,
#mobileComboModeBtn[aria-disabled="true"] span{
color:#cfcfcf;
}
@media (orientation:landscape) and (min-width:901px){
#comboModeBtn{
display:block!important;
left:calc(var(--desk-side-left) + var(--desk-panel-w) + 18px)!important;
top:calc(var(--desk-board-top) + var(--desk-board) - 165px)!important;
width:85px!important;
height:170px!important;
font-size:19px!important;
}
}
@media (orientation:portrait){
#comboModeBtn{display:block!important;}
}
/* APP2 M192: Yellow DOWN answer lane. */
#dpadPanel .dpad8.activeDir.dpad-yellow{
background:#f2c230!important;
color:#111!important;
-webkit-text-fill-color:#111!important;
box-shadow:0 0 0 4px rgba(242,194,48,.68), inset 0 6px 0 rgba(255,255,255,.18), inset 0 -8px 0 rgba(0,0,0,.36), 0 8px 0 rgba(0,0,0,.65)!important;
}
.moveTarget-yellow{fill:#f2c230!important;}
.moveTargetRing-yellow{stroke:#f2c230!important;}
/* M193: combo mistake feedback */
@keyframes comboShake {
0%,100% { transform: translate(0,0); }
15% { transform: translate(-8px,0); }
30% { transform: translate(8px,0); }
45% { transform: translate(-6px,0); }
60% { transform: translate(6px,0); }
75% { transform: translate(-3px,0); }
}
.comboShake { animation: comboShake 0.38s steps(2,end); }
/* APP2 M196: Landscape Combo Mode belongs inside the numpad center cell.
Remove the separate tall side Combo button in desktop landscape. */
@media (orientation:landscape) and (min-width:901px){
#dpadPanel .dpadCenter{
visibility:hidden!important;
}
#comboModeBtn{
display:block!important;
left:calc((var(--desk-side-left) - 10px) + 60px)!important;
top:calc((var(--desk-board-top) + var(--desk-board) - 165px) + 60px)!important;
width:50px!important;
height:50px!important;
min-width:50px!important;
min-height:50px!important;
max-width:50px!important;
max-height:50px!important;
padding:2px 1px!important;
border-width:2px!important;
border-radius:4px!important;
font-size:8px!important;
line-height:1.0!important;
letter-spacing:.1px!important;
z-index:95!important;
white-space:normal!important;
overflow:hidden!important;
}
#comboModeBtn span{
margin-top:1px!important;
font-size:6px!important;
line-height:1.0!important;
}
}
/* APP2 M197: desktop landscape cleanup.
- Lower color buttons so yellow button bottom aligns with board bottom.
- Hide stray top-left boss HP text.
- Move boss HP up so the red HP bar aligns with hero HP bar. */
@media (orientation:landscape) and (min-width:901px){
#bossCloneHpText{
display:none!important;
visibility:hidden!important;
}
#p2{
top:calc(var(--desk-board-top) - 24px)!important;
}
#desktopColorPanel{
top:calc(var(--desk-board-top) + var(--desk-board) - 154px)!important;
}
}
/* APP2 M198: Power-up slots under the hero.
Desktop landscape only: three empty square slots beneath hero portrait, above numpad. */
#powerupSlots{
display:none;
position:absolute;
box-sizing:border-box;
pointer-events:none;
}
.powerupSlot{
box-sizing:border-box;
background:#050505;
border:3px solid #f4f4f4;
box-shadow:inset 0 0 0 2px #111, 0 3px 0 rgba(0,0,0,.55);
}
@media (orientation:landscape) and (min-width:901px){
#powerupSlots{
display:flex!important;
left:var(--desk-side-left)!important;
top:calc(var(--desk-board-top) + var(--desk-hp-h) + 14px + var(--desk-panel-h) + 14px)!important;
width:var(--desk-panel-w)!important;
height:40px!important;
gap:8px!important;
justify-content:center!important;
align-items:center!important;
z-index:70!important;
}
.powerupSlot{
width:36px!important;
height:36px!important;
}
}
@media (orientation:portrait){
#powerupSlots{display:none!important;}
}
/* APP2 M199: Potion weapon/power-up behavior. */
.powerupSlot.filled{
position:relative;
background:radial-gradient(circle at 50% 35%, #23314a 0 28%, #06070b 70%);
border-color:#f7d86a;
}
.powerupIcon{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
line-height:1;
filter:drop-shadow(0 2px 0 #000);
}
.powerupIcon.potionIcon{
inset:2px;
background-image:url('assets/ui/potion_icon.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius:5px;
font-size:0;
}
.powerupCount{
position:absolute;
left:50%;
bottom:-12px;
transform:translateX(-50%);
width:18px;
height:18px;
border:2px solid #111;
border-radius:50%;
background:#fff;
color:#111;
font:900 12px/16px system-ui,sans-serif;
text-align:center;
box-shadow:0 2px 0 #000;
}
.powerupSlot.pulse{animation:powerupPop .85s ease both;}
.powerupSlot.absorbed{animation:potionBlock .52s ease both;}
.powerupSlot.spent{opacity:.35;transform:scale(.9);}
@keyframes powerupPop{0%{transform:scale(.15) rotate(-18deg);filter:brightness(2.4)}55%{transform:scale(1.22) rotate(8deg);filter:brightness(1.8)}100%{transform:scale(1) rotate(0);filter:brightness(1)}}
@keyframes potionBlock{0%,100%{filter:brightness(1)}25%{filter:brightness(2.6);transform:translateY(-3px) scale(1.1)}50%{filter:brightness(1.5);transform:translateY(0) scale(1)}}
#continueBtn.newWeaponBtn{
color:#ffe46a!important;
text-shadow:3px 3px 0 #000, 0 0 12px rgba(255,218,64,.8)!important;
animation:newWeaponFlash .72s steps(2,end) infinite;
}
@keyframes newWeaponFlash{50%{filter:brightness(1.55)}}
/* APP2 M201: mobile portrait cleanup.
- RGBY thumb buttons move under the tower/right column.
- Power-up slots are visible under the hero portrait.
- Combo Mode button lives inside the center cell of the numpad. */
@media (orientation:portrait){
#powerupSlots{
display:flex!important;
left:var(--m139-board-left)!important;
top:calc(var(--m139-ui-top) + var(--m139-panel-h) + .8dvh)!important;
width:var(--m139-panel-w)!important;
height:calc(var(--m181-dpad-btn) * .82)!important;
gap:.8vw!important;
justify-content:flex-start!important;
align-items:center!important;
z-index:244!important;
pointer-events:none!important;
}
.powerupSlot{
width:calc((var(--m139-panel-w) - 1.6vw) / 3)!important;
height:calc((var(--m139-panel-w) - 1.6vw) / 3)!important;
min-width:0!important;
min-height:0!important;
border-width:2px!important;
box-shadow:inset 0 0 0 1px #111, 0 2px 0 rgba(0,0,0,.55)!important;
}
.powerupIcon{font-size:clamp(10px,3vw,18px)!important;}
.powerupIcon.potionIcon{inset:1px!important;border-radius:3px!important;}
.powerupCount{left:50%!important;right:auto!important;bottom:-10px!important;transform:translateX(-50%)!important;width:15px!important;height:15px!important;font:900 10px/13px system-ui,sans-serif!important;border-width:2px!important;}
/* Keep the small numpad under the hero/power-up block on the left. */
#stage{
--m181-dpad-top:calc(var(--m139-ui-top, 72dvh) + var(--m139-panel-h,10dvh) + var(--m181-dpad-btn) + 1.4dvh);
--m181-dpad-left:calc(var(--m139-board-left,1vw) + .2vw);
}
#dpadPanel .dpadCenter{visibility:hidden!important;}
#comboModeBtn{
display:block!important;
left:calc(var(--m181-dpad-left) + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
top:calc(var(--m181-dpad-top) + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
width:var(--m181-dpad-btn)!important;
height:var(--m181-dpad-btn)!important;
min-width:var(--m181-dpad-btn)!important;
min-height:var(--m181-dpad-btn)!important;
max-width:var(--m181-dpad-btn)!important;
max-height:var(--m181-dpad-btn)!important;
padding:1px!important;
border-width:2px!important;
border-radius:5px!important;
font-size:clamp(5px,1.45vw,9px)!important;
line-height:.95!important;
letter-spacing:0!important;
z-index:266!important;
white-space:normal!important;
overflow:hidden!important;
}
#comboModeBtn span{
margin-top:0!important;
font-size:clamp(4px,1.15vw,7px)!important;
line-height:.95!important;
}
/* RGBY primary thumb controls: under tower/right column, fully visible. */
#desktopColorPanel{
--m201-color-btn:min(12vw,6.4dvh);
--m201-color-gap:min(2.2vw,1.1dvh);
display:grid!important;
left:calc(var(--m139-board-left) + var(--m139-board-size) + 3vw)!important;
top:calc(var(--m139-board-top) + var(--m139-board-size) + 1dvh)!important;
width:calc((var(--m201-color-btn) * 3) + (var(--m201-color-gap) * 2))!important;
height:calc((var(--m201-color-btn) * 2) + var(--m201-color-gap))!important;
grid-template-columns:repeat(3,var(--m201-color-btn))!important;
grid-template-rows:repeat(2,var(--m201-color-btn))!important;
gap:var(--m201-color-gap)!important;
grid-template-areas:'. blue .' 'red yellow green'!important;
z-index:262!important;
pointer-events:auto!important;
transform:none!important;
}
.desktopColorBtn{
width:var(--m201-color-btn)!important;
height:var(--m201-color-btn)!important;
min-width:var(--m201-color-btn)!important;
min-height:var(--m201-color-btn)!important;
max-width:var(--m201-color-btn)!important;
max-height:var(--m201-color-btn)!important;
font-size:calc(var(--m201-color-btn) * .58)!important;
line-height:var(--m201-color-btn)!important;
}
}
/* APP2 M202: mobile hero HP right + numpad under hero HP.
Keep hero portrait and power-up slots unchanged.
Put hero HP to the right of hero panel, landscape-style.
Put the numpad directly under that HP bar with Combo Mode in the center cell. */
@media (orientation:portrait){
/* Hero portrait stays anchored on the left under the board. */
#p9{
left:var(--m139-board-left)!important;
top:var(--m139-ui-top)!important;
width:var(--m139-panel-w)!important;
height:var(--m139-panel-h)!important;
}
/* Hero HP sits immediately to the right of the hero portrait, same top edge. */
#playerHpBar{
left:calc(var(--m139-board-left) + var(--m139-panel-w) + .6vw)!important;
top:var(--m139-ui-top)!important;
width:var(--m139-hp-w)!important;
height:var(--m139-hp-h)!important;
z-index:252!important;
}
/* Power-ups remain under hero portrait, not under HP. */
#powerupSlots{
left:var(--m139-board-left)!important;
top:calc(var(--m139-ui-top) + var(--m139-panel-h) + .8dvh)!important;
width:var(--m139-panel-w)!important;
}
/* Numpad is directly under the hero HP bar. */
#stage{
--m202-hp-left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .6vw);
--m181-dpad-left:var(--m202-hp-left);
--m181-dpad-top:calc(var(--m139-ui-top,72dvh) + var(--m139-hp-h,3.5dvh) + .85dvh);
}
#dpadPanel{
left:var(--m181-dpad-left)!important;
top:var(--m181-dpad-top)!important;
z-index:265!important;
}
/* Combo Mode sits inside the center numpad cell. */
#dpadPanel .dpadCenter{visibility:hidden!important;}
#comboModeBtn{
display:block!important;
left:calc(var(--m181-dpad-left) + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
top:calc(var(--m181-dpad-top) + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
width:var(--m181-dpad-btn)!important;
height:var(--m181-dpad-btn)!important;
min-width:var(--m181-dpad-btn)!important;
min-height:var(--m181-dpad-btn)!important;
max-width:var(--m181-dpad-btn)!important;
max-height:var(--m181-dpad-btn)!important;
padding:1px!important;
border-width:2px!important;
border-radius:5px!important;
font-size:clamp(5px,1.45vw,9px)!important;
line-height:.95!important;
letter-spacing:0!important;
z-index:268!important;
white-space:normal!important;
overflow:hidden!important;
}
#comboModeBtn span{
margin-top:0!important;
font-size:clamp(4px,1.15vw,7px)!important;
line-height:.95!important;
}
}
/* APP2 M203: mobile portrait correction.
- Numpad cluster is forcibly placed under the HERO HP bar (to the right of hero portrait).
- Combo Mode remains in the center cell of that numpad.
- RGBY thumb buttons are pulled left so every circle is fully visible on mobile. */
@media (orientation:portrait){
/* keep existing hero + powerups; only correct HP/numpad relationship */
#playerHpBar{
left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .6vw)!important;
top:var(--m139-ui-top)!important;
}
#dpadPanel{
left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .6vw)!important;
top:calc(var(--m139-ui-top,72dvh) + var(--m139-hp-h,3.5dvh) + .75dvh)!important;
width:var(--m181-dpad-w)!important;
height:calc((var(--m181-dpad-btn) * 3) + (var(--m181-dpad-gap) * 2))!important;
grid-template-columns:repeat(3,var(--m181-dpad-btn))!important;
grid-template-rows:repeat(3,var(--m181-dpad-btn))!important;
gap:var(--m181-dpad-gap)!important;
z-index:270!important;
}
#comboModeBtn{
left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .6vw + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
top:calc(var(--m139-ui-top,72dvh) + var(--m139-hp-h,3.5dvh) + .75dvh + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
width:var(--m181-dpad-btn)!important;
height:var(--m181-dpad-btn)!important;
min-width:var(--m181-dpad-btn)!important;
min-height:var(--m181-dpad-btn)!important;
max-width:var(--m181-dpad-btn)!important;
max-height:var(--m181-dpad-btn)!important;
z-index:275!important;
}
/* Right-side thumb controls: stay under tower but never hang off the screen. */
#desktopColorPanel{
--m201-color-btn:min(12vw,6.4dvh);
--m201-color-gap:min(2.2vw,1.1dvh);
left:auto!important;
right:2.2vw!important;
top:calc(var(--m139-board-top,31dvh) + var(--m139-board-size,min(72vw,40dvh)) + .8dvh)!important;
width:calc((var(--m201-color-btn) * 3) + (var(--m201-color-gap) * 2))!important;
height:calc((var(--m201-color-btn) * 2) + var(--m201-color-gap))!important;
transform:none!important;
z-index:272!important;
}
}
/* APP2 M205: desktop landscape compact-fit override. */
@media (orientation:landscape) and (min-width:901px){
#p1{display:none!important;visibility:hidden!important;}
}
/* APP2 M212: mobile thumb Combo button. Exact landscape Combo art, bigger, in lower-right thumb zone. */
#mobileComboModeBtn{display:none!important;}
@media (orientation:portrait){
#mobileComboModeBtn{
display:block!important;
right:6vw!important;
top:calc(var(--m139-board-top,31dvh) + var(--m139-board-size,min(72vw,40dvh)) + 22dvh)!important;
left:auto!important;
width:min(31vw,16dvh)!important;
height:min(22vw,11.5dvh)!important;
min-width:min(31vw,16dvh)!important;
min-height:min(22vw,11.5dvh)!important;
max-width:min(31vw,16dvh)!important;
max-height:min(22vw,11.5dvh)!important;
padding:4px 3px!important;
border-width:4px!important;
border-radius:8px!important;
font-size:clamp(11px,3.8vw,21px)!important;
line-height:1.0!important;
letter-spacing:.25px!important;
z-index:276!important;
white-space:normal!important;
overflow:hidden!important;
}
#mobileComboModeBtn span{
margin-top:2px!important;
font-size:clamp(7px,2vw,12px)!important;
line-height:1.0!important;
}
}
@media (orientation:landscape){
#mobileComboModeBtn{display:none!important;}
}
/* APP2 M213: mobile numpad centered under hero HP + thumb Combo moved under RGBY circles. */
@media (orientation:portrait){
#stage{
--m213-hp-left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .6vw);
--m213-dpad-left:calc(var(--m213-hp-left) + ((var(--m139-hp-w,40vw) - var(--m181-dpad-w)) / 2));
}
#dpadPanel{
left:var(--m213-dpad-left)!important;
}
#comboModeBtn{
left:calc(var(--m213-dpad-left) + var(--m181-dpad-btn) + var(--m181-dpad-gap))!important;
}
#mobileComboModeBtn{
--m213-color-btn:min(12vw,6.4dvh);
--m213-color-gap:min(2.2vw,1.1dvh);
--m213-color-w:calc((var(--m213-color-btn) * 3) + (var(--m213-color-gap) * 2));
--m213-combo-w:min(31vw,16dvh);
right:calc(2.2vw + ((var(--m213-color-w) - var(--m213-combo-w)) / 2))!important;
top:calc(var(--m139-board-top,31dvh) + var(--m139-board-size,min(72vw,40dvh)) + .8dvh + (var(--m213-color-btn) * 2) + var(--m213-color-gap) + 1.5dvh)!important;
width:var(--m213-combo-w)!important;
min-width:var(--m213-combo-w)!important;
max-width:var(--m213-combo-w)!important;
}
}
/* APP2 M214: center the mini Combo button inside the numpad center cell across views. */
#comboModeBtn{
position:absolute!important;
}
@media (orientation:landscape) and (min-width:901px){
#comboModeBtn{
left:calc((var(--desk-side-left) - 10px) + ((var(--desk-panel-w) + 20px - 50px) / 2))!important;
top:calc((var(--desk-board-top) + var(--desk-board) - 165px) + ((170px - 50px) / 2))!important;
width:50px!important;
height:50px!important;
min-width:50px!important;
min-height:50px!important;
max-width:50px!important;
max-height:50px!important;
}
}
@media (orientation:portrait){
#comboModeBtn{
left:calc(var(--m213-dpad-left, var(--m181-dpad-left)) + ((var(--m181-dpad-w) - var(--m181-dpad-btn)) / 2))!important;
top:calc(var(--m181-dpad-top) + ((((var(--m181-dpad-btn) * 3) + (var(--m181-dpad-gap) * 2)) - var(--m181-dpad-btn)) / 2))!important;
width:var(--m181-dpad-btn)!important;
height:var(--m181-dpad-btn)!important;
min-width:var(--m181-dpad-btn)!important;
min-height:var(--m181-dpad-btn)!important;
max-width:var(--m181-dpad-btn)!important;
max-height:var(--m181-dpad-btn)!important;
}
}
@media (orientation:landscape) and (max-width:900px){
#comboModeBtn{
left:calc(515px + ((330px - 82px) / 2))!important;
top:calc(1120px + ((285px - 82px) / 2))!important;
width:82px!important;
height:82px!important;
min-width:82px!important;
min-height:82px!important;
max-width:82px!important;
max-height:82px!important;
}
}
/* APP2 M215: center the mobile numpad horizontally under the hero health bar. */
@media (orientation:portrait){
#stage{
--m215-hp-left:calc(var(--m139-board-left,1vw) + var(--m139-panel-w,18vw) + .6vw);
--m215-dpad-left:calc(var(--m215-hp-left) + ((var(--m139-hp-w,40vw) - var(--m181-dpad-w)) / 2));
--m181-dpad-left:var(--m215-dpad-left);
--m213-dpad-left:var(--m215-dpad-left);
}
#dpadPanel{
left:var(--m215-dpad-left)!important;
}
#comboModeBtn{
left:calc(var(--m215-dpad-left) + ((var(--m181-dpad-w) - var(--m181-dpad-btn)) / 2))!important;
}
}
/* APP2 M225: Boss Travel button in bottom tower slot */
.towerTravelSlot{
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
#bossTravelBtn{
width:142px;
height:68px;
border:3px solid #e4a700;
background:linear-gradient(#3b2400,#120900);
color:#ffd84a;
font-family:Georgia,'Courier New',monospace;
font-weight:900;
font-size:18px;
line-height:20px;
letter-spacing:1px;
text-align:center;
box-shadow:inset 0 0 0 3px #19110d,0 4px 0 #000;
cursor:pointer;
}
#bossTravelBtn:active{transform:translateY(2px);box-shadow:inset 0 0 0 3px #19110d,0 2px 0 #000;}
#bossTravelOverlay{
position:absolute;
inset:0;
z-index:999;
background:rgba(0,0,0,.68);
display:flex;
align-items:center;
justify-content:center;
}
#bossTravelPanel{
width:min(420px,86vw);
max-height:82vh;
border:5px solid #e4a700;
background:#070403;
box-shadow:0 0 0 4px #19110d,0 12px 0 rgba(0,0,0,.65);
padding:18px;
color:#ffd84a;
font-family:Georgia,'Courier New',monospace;
text-align:center;
}
#bossTravelTitle{
font-weight:900;
font-size:24px;
margin-bottom:14px;
}
#bossTravelSelect{
width:100%;
height:48px;
font-size:18px;
font-weight:900;
background:#111;
color:#ffd84a;
border:3px solid #8d725d;
margin-bottom:16px;
}
#bossTravelActions{
display:flex;
gap:12px;
justify-content:center;
}
#bossTravelActions button{
min-width:120px;
height:44px;
border:3px solid #8d725d;
background:#1a1300;
color:#ffd84a;
font-weight:900;
font-size:16px;
cursor:pointer;
}
@media (orientation:landscape) and (min-width:901px){
/* Keep tower available for boss travel instead of hiding it completely. */
#p10{
display:block!important;
visibility:visible!important;
left:calc(var(--desk-board-left) + var(--desk-board) + var(--desk-right-gap) + 250px)!important;
top:calc(var(--desk-board-top) + var(--desk-board) - 126px)!important;
width:120px!important;
height:120px!important;
padding:0!important;
z-index:120!important;
}
#p10 .towerBox{display:none!important;}
#p10 .towerTravelSlot{
display:flex!important;
width:112px!important;
height:92px!important;
margin:0!important;
}
#bossTravelBtn{width:96px!important;height:64px!important;font-size:14px!important;line-height:16px!important;}
}
/* APP2 M313: mobile item slots wrap around numpad, all same size. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots{
position:absolute!important;
display:block!important;
left:0!important;
top:0!important;
width:0!important;
height:0!important;
z-index:265!important;
pointer-events:auto!important;
}
#powerupSlots .powerupSlot,
#powerupSlots .slot,
#powerupSlots > *{
position:absolute!important;
width:11.5vw!important;
height:11.5vw!important;
min-width:11.5vw!important;
min-height:11.5vw!important;
max-width:11.5vw!important;
max-height:11.5vw!important;
box-sizing:border-box!important;
border:2px solid #fff!important;
background:rgba(0,0,0,.72)!important;
border-radius:0!important;
margin:0!important;
padding:0!important;
}
#powerupSlots > *:nth-child(1){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 11.2dvh)!important;
}
#powerupSlots > *:nth-child(2){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 24.4dvh)!important;
}
#powerupSlots > *:nth-child(3){
left:22.0vw!important;
top:calc(33.5dvh + 72vw + 24.4dvh)!important;
}
}
/* APP2 M314: mobile item slots L-shape by hero box.
Slot 1 close under hero, slot 2 below it, slot 3/4 horizontally aligned with slot 2. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots{
position:absolute!important;
display:block!important;
left:0!important;
top:0!important;
width:0!important;
height:0!important;
z-index:265!important;
pointer-events:auto!important;
}
#powerupSlots .powerupSlot,
#powerupSlots .slot,
#powerupSlots > *{
position:absolute!important;
--m314-slot:11.5vw;
width:var(--m314-slot)!important;
height:var(--m314-slot)!important;
min-width:var(--m314-slot)!important;
min-height:var(--m314-slot)!important;
max-width:var(--m314-slot)!important;
max-height:var(--m314-slot)!important;
box-sizing:border-box!important;
border:2px solid #fff!important;
background:rgba(0,0,0,.72)!important;
border-radius:0!important;
margin:0!important;
padding:0!important;
}
/* Anchor to the hero panel: first slot just below hero, second below it. */
#powerupSlots > *:nth-child(1){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 10.8dvh)!important;
}
#powerupSlots > *:nth-child(2){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 23.7dvh)!important;
}
/* Third/fourth run horizontally from slot 2. */
#powerupSlots > *:nth-child(3){
left:20.2vw!important;
top:calc(33.5dvh + 72vw + 23.7dvh)!important;
}
#powerupSlots > *:nth-child(4){
left:35.9vw!important;
top:calc(33.5dvh + 72vw + 23.7dvh)!important;
}
}
/* APP2 M315: mobile item slots match hero white panel size and form correct L shape:
[hero]
[1]
[2][3][4]
*/
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots{
position:absolute!important;
display:block!important;
left:0!important;
top:0!important;
width:0!important;
height:0!important;
z-index:265!important;
pointer-events:auto!important;
}
#powerupSlots .powerupSlot,
#powerupSlots .slot,
#powerupSlots > *{
position:absolute!important;
--m315-slot:15.5vw;
width:var(--m315-slot)!important;
height:var(--m315-slot)!important;
min-width:var(--m315-slot)!important;
min-height:var(--m315-slot)!important;
max-width:var(--m315-slot)!important;
max-height:var(--m315-slot)!important;
box-sizing:border-box!important;
border:3px solid #fff!important;
background:rgba(0,0,0,.72)!important;
border-radius:0!important;
margin:0!important;
padding:0!important;
}
#powerupSlots > *:nth-child(1){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 9.0dvh)!important;
}
#powerupSlots > *:nth-child(2){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 26.2dvh)!important;
}
#powerupSlots > *:nth-child(3){
left:22.5vw!important;
top:calc(33.5dvh + 72vw + 26.2dvh)!important;
}
#powerupSlots > *:nth-child(4){
left:40.5vw!important;
top:calc(33.5dvh + 72vw + 26.2dvh)!important;
}
}
/* APP2 M316: fixed 4 item slots. Same size as hero white panel. Visible L shape.
[hero]
[1]
[2][3][4]
*/
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots{
position:absolute!important;
display:block!important;
left:0!important;
top:0!important;
width:100vw!important;
height:100dvh!important;
z-index:265!important;
pointer-events:auto!important;
overflow:visible!important;
}
#powerupSlots > *{
display:block!important;
position:absolute!important;
--m316-slot:15.5vw;
width:var(--m316-slot)!important;
height:var(--m316-slot)!important;
min-width:var(--m316-slot)!important;
min-height:var(--m316-slot)!important;
max-width:var(--m316-slot)!important;
max-height:var(--m316-slot)!important;
box-sizing:border-box!important;
border:3px solid #fff!important;
background:rgba(0,0,0,.72)!important;
border-radius:0!important;
margin:0!important;
padding:0!important;
transform:none!important;
opacity:1!important;
visibility:visible!important;
}
#powerupSlots > *:nth-child(1){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 8.2dvh)!important;
}
#powerupSlots > *:nth-child(2){
left:4.5vw!important;
top:calc(33.5dvh + 72vw + 21.8dvh)!important;
}
#powerupSlots > *:nth-child(3){
left:22.0vw!important;
top:calc(33.5dvh + 72vw + 21.8dvh)!important;
}
#powerupSlots > *:nth-child(4){
left:39.5vw!important;
top:calc(33.5dvh + 72vw + 21.8dvh)!important;
}
}
/* M317: fine tune item slot spacing */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots > *:nth-child(1){
left:0.8vw!important;
top:calc(33.5dvh + 72vw + 8.2dvh)!important;
}
#powerupSlots > *:nth-child(2){
left:0.8vw!important;
top:calc(33.5dvh + 72vw + 25.5dvh)!important;
}
#powerupSlots > *:nth-child(3){
left:18.3vw!important;
top:calc(33.5dvh + 72vw + 25.5dvh)!important;
}
#powerupSlots > *:nth-child(4){
left:35.8vw!important;
top:calc(33.5dvh + 72vw + 25.5dvh)!important;
}
}
/* M318: raise item slots.
1 and 2 sit nicely under hero panel; 3 and 4 sit under numpad. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots > *:nth-child(1){
left:0.8vw!important;
top:calc(33.5dvh + 72vw + 5.8dvh)!important;
}
#powerupSlots > *:nth-child(2){
left:0.8vw!important;
top:calc(33.5dvh + 72vw + 20.0dvh)!important;
}
#powerupSlots > *:nth-child(3){
left:18.3vw!important;
top:calc(33.5dvh + 72vw + 20.0dvh)!important;
}
#powerupSlots > *:nth-child(4){
left:35.8vw!important;
top:calc(33.5dvh + 72vw + 20.0dvh)!important;
}
}
/* M319: precise spacing.
Hero -> Slot1 = 5px
Slot1 -> Slot2 = 10px vertical
Slot2 -> Slot3 = 10px horizontal
Slot3 -> Slot4 = 10px horizontal
*/
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots > *:nth-child(1){
left:0px!important;
top:calc(33.5dvh + 72vw + 5px)!important;
}
#powerupSlots > *:nth-child(2){
left:0px!important;
top:calc(33.5dvh + 72vw + 5px + 15.5vw + 10px)!important;
}
#powerupSlots > *:nth-child(3){
left:calc(15.5vw + 10px)!important;
top:calc(33.5dvh + 72vw + 5px + 15.5vw + 10px)!important;
}
#powerupSlots > *:nth-child(4){
left:calc((15.5vw * 2) + 20px)!important;
top:calc(33.5dvh + 72vw + 5px + 15.5vw + 10px)!important;
}
}
/* M320: move all item slots down as one block.
Slot 1 now clears the hero panel with a real 10px visual gap.
Slot spacing stays: 10px vertical and 10px horizontal.
*/
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots > *:nth-child(1){
left:0px!important;
top:calc(33.5dvh + 72vw + 30px)!important;
}
#powerupSlots > *:nth-child(2){
left:0px!important;
top:calc(33.5dvh + 72vw + 30px + 15.5vw + 10px)!important;
}
#powerupSlots > *:nth-child(3){
left:calc(15.5vw + 10px)!important;
top:calc(33.5dvh + 72vw + 30px + 15.5vw + 10px)!important;
}
#powerupSlots > *:nth-child(4){
left:calc((15.5vw * 2) + 20px)!important;
top:calc(33.5dvh + 72vw + 30px + 15.5vw + 10px)!important;
}
}
/* M321: Align Slot 1 left edge exactly with hero panel left edge.
Preserve locked block spacing and formation.
*/
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots > *:nth-child(1){
left:4px!important;
}
#powerupSlots > *:nth-child(2){
left:4px!important;
}
#powerupSlots > *:nth-child(3){
left:calc(4px + 15.5vw + 10px)!important;
}
#powerupSlots > *:nth-child(4){
left:calc(4px + (15.5vw * 2) + 20px)!important;
}
}
/* M323: item slots are clickable after M321 left-edge layout. */
#powerupSlots{pointer-events:auto!important;}
#powerupSlots > .powerupSlot{pointer-events:auto!important;cursor:pointer;touch-action:manipulation;}
#powerupSlots > .powerupSlot .powerupIcon,
#powerupSlots > .powerupSlot .powerupCount{pointer-events:none!important;}
#highScoreWrap{position:absolute;left:50px;top:50px;text-align:center;z-index:50}.landscape #highScoreWrap{top:unset}#highScore{color:#ff69b4;font-size:32px;font-weight:bold;text-shadow:2px 2px #fff;} .hp.shake{animation:hpshake .3s;} @keyframes hpshake{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}100%{transform:translateX(0)}}
/* M327: High score placement lock.
Landscape: centered 10px above hero HP.
Portrait/mobile/browser: centered on the tower, 10px above the top tower rectangle. */
#highScoreWrap{
position:absolute!important;
text-align:center!important;
pointer-events:none!important;
z-index:260!important;
font-family:Georgia,'Courier New',monospace!important;
color:#fff4d2!important;
font-size:12px!important;
font-weight:900!important;
letter-spacing:1px!important;
line-height:1!important;
text-shadow:2px 2px #000!important;
}
#highScore{
color:#ff69b4!important;
font-size:32px!important;
font-weight:900!important;
letter-spacing:1px!important;
line-height:1.05!important;
text-shadow:2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 3px 3px #000!important;
}
@media (orientation:landscape) and (min-width:901px){
#highScoreWrap{
width:var(--desk-panel-w)!important;
left:var(--desk-side-left)!important;
top:calc(var(--desk-board-top) - 10px - 46px)!important;
}
}
@media (orientation:portrait){
#highScoreWrap{
width:22vw!important;
left:76vw!important;
top:calc(32.5dvh + 1.5dvh - 10px - 40px)!important;
transform:none!important;
font-size:clamp(8px,2.1vw,12px)!important;
letter-spacing:.5px!important;
}
#highScore{
font-size:clamp(17px,5.1vw,28px)!important;
letter-spacing:0!important;
}
}
@media (orientation:portrait) and (min-width:901px){
#highScoreWrap{
width:calc(98vw - (var(--m139-board-left,1vw) + var(--m139-board-size,min(72vw,40dvh)) + 3vw))!important;
left:calc(var(--m139-board-left,1vw) + var(--m139-board-size,min(72vw,40dvh)) + 3vw)!important;
top:calc(var(--m139-board-top,31dvh) + .6dvh - 10px - 40px)!important;
}
}
/* M330: high score above tower + double mobile item icons */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#highScoreWrap{
position:absolute!important;
left:calc(100vw - 25.0vw)!important;
top:calc(33.5dvh + 72vw + 1.2dvh)!important;
width:22vw!important;
text-align:center!important;
z-index:260!important;
transform:none!important;
}
#highScoreWrap div:first-child{
font-size:clamp(11px,2.7vw,18px)!important;
line-height:1!important;
margin-bottom:2px!important;
}
#highScore{
font-size:clamp(20px,6.0vw,38px)!important;
line-height:1!important;
}
#powerupSlots .powerupIcon{
font-size:200%!important;
line-height:1!important;
transform:scale(2)!important;
transform-origin:center center!important;
}
#powerupSlots .potionIcon,
#powerupSlots .powerupIcon img{
width:80%!important;
height:80%!important;
transform:scale(2)!important;
transform-origin:center center!important;
}
}
/* M331: place high score above top tower slot */
@media (max-width:900px) and (orientation:portrait){
#highScoreWrap{
top: calc(50dvh - 22vw - 10px) !important;
left: calc(100vw - 25vw) !important;
width: 22vw !important;
transform: none !important;
z-index: 300 !important;
}
}
/* M332: high score pop when new record is set */
#highScore.scorePop{
transform:scale(1.18)!important;
transition:transform .18s ease!important;
}
/* M333: raise mobile high score above tower panel */
@media (max-width:900px) and (orientation:portrait){
#highScoreWrap{
top:calc(33.5dvh + 72vw - 6.8dvh)!important;
left:calc(100vw - 25vw)!important;
width:22vw!important;
text-align:center!important;
transform:none!important;
z-index:310!important;
}
}
/* M334: TRUE mobile high score lock.
Bottom of pink numbers sits 10px above the top edge of the first tower panel. */
@media (max-width:900px) and (orientation:portrait){
#highScoreWrap{
left:calc(var(--m139-board-left,1vw) + var(--m139-board-size,72vw) + 3vw)!important;
width:calc(98vw - (var(--m139-board-left,1vw) + var(--m139-board-size,72vw) + 3vw))!important;
top:calc(var(--m139-board-top,33.5dvh) + 1.35dvh - 10px - 52px)!important;
text-align:center!important;
transform:none!important;
z-index:320!important;
}
#highScoreWrap div:first-child{
font-size:clamp(10px,2.4vw,15px)!important;
line-height:1!important;
margin-bottom:2px!important;
}
#highScore{
font-size:clamp(20px,5.7vw,34px)!important;
line-height:1!important;
}
}
/* APP2 M337: Boss Travel mobile touch fix + landscape browser raise */
@media (max-width:900px) and (orientation:portrait){
#p10{
z-index:280!important;
pointer-events:auto!important;
}
#p10 .towerTravelSlot{
display:flex!important;
visibility:visible!important;
pointer-events:auto!important;
}
#bossTravelBtn{
pointer-events:auto!important;
touch-action:manipulation!important;
-webkit-tap-highlight-color:rgba(255,216,74,.35)!important;
position:relative!important;
z-index:281!important;
}
}
@media (orientation:landscape) and (min-width:901px){
#p10{
top:calc(var(--desk-board-top) + var(--desk-board) - 166px)!important;
}
}
/* APP2 M349: first-paint source lock from M345 baseline.
Correct source CSS before JS runs: RGBY buttons start at their real mobile coordinates. */
@media (orientation:portrait){
#desktopColorPanel{
position:absolute!important;
display:grid!important;
grid-template-areas:'. blue .' 'red yellow green'!important;
left:auto!important;
right:2.2vw!important;
top:calc(var(--m139-board-top,31dvh) + var(--m139-board-size,min(72vw,40dvh)) + .8dvh)!important;
--m201-color-btn:min(12vw,6.4dvh);
--m201-color-gap:min(2.2vw,1.1dvh);
width:calc((var(--m201-color-btn) * 3) + (var(--m201-color-gap) * 2))!important;
height:calc((var(--m201-color-btn) * 2) + var(--m201-color-gap))!important;
grid-template-columns:repeat(3,var(--m201-color-btn))!important;
grid-template-rows:repeat(2,var(--m201-color-btn))!important;
gap:var(--m201-color-gap)!important;
transform:none!important;
z-index:272!important;
pointer-events:auto!important;
}
#desktopColorPanel .desktopColorBtn{
position:relative!important;
left:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
width:var(--m201-color-btn)!important;
height:var(--m201-color-btn)!important;
min-width:var(--m201-color-btn)!important;
min-height:var(--m201-color-btn)!important;
max-width:var(--m201-color-btn)!important;
max-height:var(--m201-color-btn)!important;
font-size:calc(var(--m201-color-btn) * .58)!important;
line-height:var(--m201-color-btn)!important;
transform:none!important;
}
}
/* APP2 M350: pink circular Boss Travel locked 5px to the right of boss HP in every view. */
#p10 .towerTravelSlot{display:none!important;visibility:hidden!important;pointer-events:none!important;}
#bossTravelBtn{
position:absolute!important;
display:block!important;
left:-9999px;
top:-9999px;
opacity:0!important;
visibility:hidden!important;
width:58px!important;
height:58px!important;
min-width:0!important;
min-height:0!important;
padding:0!important;
border-radius:50%!important;
border:3px solid #fff!important;
background:radial-gradient(circle at 35% 28%, #ff9bd8 0%, #ff5fbd 42%, #d91589 100%)!important;
color:transparent!important;
font-size:0!important;
line-height:52px!important;
text-align:center!important;
box-shadow:0 4px 0 #71003f, 0 0 0 2px #2b001a, inset 0 3px 0 rgba(255,255,255,.45)!important;
z-index:600!important;
cursor:pointer!important;
touch-action:manipulation!important;
pointer-events:auto!important;
-webkit-tap-highlight-color:rgba(255,105,190,.35)!important;
}
#bossTravelBtn.bossTravelReady,
#bossTravelBtn[data-ready="1"]{
opacity:1!important;
visibility:visible!important;
}
#bossTravelBtn::before{
content:"";
position:absolute;
left:50%;top:50%;
width:22px;height:26px;
transform:translate(-50%,-50%);
background:linear-gradient(#fff,#fff) center 4px/16px 4px no-repeat,
linear-gradient(#fff,#fff) center 11px/10px 4px no-repeat,
linear-gradient(#fff,#fff) center 18px/18px 4px no-repeat;
filter:drop-shadow(1px 1px 0 #8d0057);
}
#bossTravelBtn:active{transform:scale(.9)!important;box-shadow:0 2px 0 #71003f, 0 0 0 2px #2b001a, inset 0 3px 0 rgba(255,255,255,.45)!important;}
@media (orientation:portrait){
#bossTravelBtn{width:26px!important;height:26px!important;line-height:20px!important;border-width:2px!important;box-shadow:0 2px 0 #71003f, 0 0 0 1px #2b001a, inset 0 2px 0 rgba(255,255,255,.45)!important;}
#bossTravelBtn::before{width:11px!important;height:13px!important;background:linear-gradient(#fff,#fff) center 2px/8px 2px no-repeat,linear-gradient(#fff,#fff) center 6px/5px 2px no-repeat,linear-gradient(#fff,#fff) center 10px/9px 2px no-repeat;}
}
@media (orientation:landscape) and (min-width:901px){#bossTravelBtn{width:50px!important;height:50px!important;line-height:44px!important;}}
/* APP2 M356: Combo Mode white energy light-paint squares */
@keyframes comboLightPulse{
0%,100%{opacity:.24;filter:drop-shadow(0 0 8px rgba(255,255,255,.85));}
50%{opacity:.44;filter:drop-shadow(0 0 20px rgba(255,255,255,1));}
}
.comboLightSquare{animation:comboLightPulse 1.05s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(255,255,255,.95));}
.comboLightCore{animation:comboLightPulse 1.05s ease-in-out infinite reverse;}
/* M359 final SNES item sprites: transparent PNGs instead of emoji placeholders. */
.powerupIcon img{
display:block!important;
width:96%!important;
height:96%!important;
object-fit:contain!important;
image-rendering:auto!important;
filter:drop-shadow(0 2px 0 #000)!important;
pointer-events:none!important;
}
.powerupIcon{font-size:0!important;}
.powerupSlot.filled.gloves{border-color:#ff7a4d!important;}
.powerupSlot.filled.continue{border-color:#ffd34a!important;}
.powerupSlot.filled.ocarina{border-color:#55a8ff!important;}
.powerupSlot.filled.bomb{border-color:#e79738!important;}
.powerupSlot.filled.glasses{border-color:#9fe7ff!important;}
.powerupSlot.filled.fishfood{border-color:#4ba8ff!important;}
.powerupSlot.filled.coin{border-color:#f7d86a!important;}
/* APP2 M360: item sprites fit inside panel slots. Undo M330 double-size transform and keep art padded. */
#powerupSlots .powerupIcon{
inset:3px!important;
transform:none!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
#powerupSlots .powerupIcon img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
transform:none!important;
transform-origin:center center!important;
display:block!important;
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#powerupSlots .powerupIcon{
inset:4px!important;
transform:none!important;
}
#powerupSlots .powerupIcon img{
width:100%!important;
height:100%!important;
transform:none!important;
}
#powerupSlots .powerupCount{
right:-7px!important;
bottom:-8px!important;
left:auto!important;
transform:none!important;
}
}
/* M362: board and pieces shake when hero takes real damage */
#board.damageShake{
animation: boardDamageShake .34s steps(2,end);
transform-origin: center center;
}
@keyframes boardDamageShake{
0%{transform:translate(0,0) rotate(0deg)}
15%{transform:translate(-7px,3px) rotate(-0.35deg)}
30%{transform:translate(7px,-3px) rotate(0.35deg)}
45%{transform:translate(-5px,-2px) rotate(-0.25deg)}
60%{transform:translate(5px,2px) rotate(0.25deg)}
75%{transform:translate(-3px,1px) rotate(-0.12deg)}
100%{transform:translate(0,0) rotate(0deg)}
}
/* APP2 M363 arcade score/menu split */
#mainMenuOverlay{
position:fixed; inset:0; z-index:2600; display:none; align-items:center; justify-content:center;
background:rgba(0,0,0,.92); color:#ffd84a; font-family:Georgia,'Courier New',monospace;
}
#mainMenuPanel{
min-width:min(86vw,520px); padding:34px 30px; border:5px solid #e4a700; background:#070403;
box-shadow:0 0 0 5px #19110d,0 18px 0 rgba(0,0,0,.65),0 0 28px rgba(228,167,0,.32);
text-align:center;
}
#mainMenuTitle{font-size:clamp(30px,7vw,58px); font-weight:900; letter-spacing:2px; text-shadow:4px 4px #000; margin-bottom:24px;}
.mainMenuScoreLine{font-size:22px; font-weight:900; color:#fff; text-shadow:2px 2px #000; margin-top:10px;}
.mainMenuScoreLine.lastScore{font-size:16px; opacity:.75; margin-top:18px;}
#mainMenuHighScoreValue{font-size:52px; font-weight:900; color:#ff69b4; text-shadow:3px 3px #fff,5px 5px #000; line-height:1.05;}
#mainMenuLastScoreValue{font-size:30px; font-weight:900; color:#ffd84a; text-shadow:3px 3px #000; line-height:1.1;}
#mainMenuStartBtn{
margin-top:30px; min-width:240px; height:64px; border:4px solid #e4a700; background:#111; color:#ffd84a;
font-family:Georgia,'Courier New',monospace; font-size:24px; font-weight:900; cursor:pointer; box-shadow:0 7px 0 #000;
}
#mainMenuStartBtn:active{transform:translateY(4px); box-shadow:0 3px 0 #000;}
/* APP2 M365A: small plain white arrow-display toggle beside hero HP. */
#arrowDisplayBtn{
position:absolute!important;
display:block!important;
left:-9999px;top:-9999px;
opacity:0!important;visibility:hidden!important;
width:26px!important;height:26px!important;min-width:0!important;min-height:0!important;
padding:0!important;border-radius:50%!important;border:3px solid #111!important;
background:#fff!important;
color:transparent!important;font-size:0!important;line-height:0!important;text-align:center!important;
text-shadow:none!important;
box-shadow:0 2px 0 #444,0 0 0 2px #fff,inset 0 2px 0 rgba(255,255,255,.85)!important;
z-index:99999!important;cursor:pointer!important;touch-action:manipulation!important;pointer-events:auto!important;
-webkit-tap-highlight-color:rgba(255,255,255,.35)!important;
}
#arrowDisplayBtn.arrowDisplayReady,#arrowDisplayBtn[data-ready="1"]{opacity:1!important;visibility:visible!important;}
#arrowDisplayBtn[data-arrow-mode="1"]{background:#fff!important;box-shadow:0 2px 0 #444,0 0 0 2px #fff,0 0 8px rgba(255,255,255,.9)!important;}
#arrowDisplayBtn[data-arrow-mode="2"]{background:#fff!important;opacity:.55!important;}
#arrowDisplayBtn[data-arrow-mode="2"]::before{content:""!important;}
#arrowDisplayBtn:active{transform:scale(.9)!important;box-shadow:0 1px 0 #444,0 0 0 2px #fff,inset 0 2px 0 rgba(0,0,0,.15)!important;}
@media (orientation:landscape) and (min-width:901px){#arrowDisplayBtn{width:26px!important;height:26px!important;}}
/* APP2 M386: remove redundant boss X/X number labels. Boss HP bars remain visible. */
#hptext,
#bossCloneHpText{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
/* APP2 M389: Winner black screen must cover gameplay UI, including arrow toggle. */
#winnerEndingOverlay{
z-index:2147483647!important;
background:#000!important;
pointer-events:auto!important;
}
body:has(#winnerEndingOverlay[style*="display: flex"]) #arrowDisplayBtn{
z-index:1!important;
}
/* APP2 M404: arcade speed/combo/perfect score animations */
.arcadeScorePopup{
position:fixed!important;
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%) scale(1)!important;
z-index:2147483000!important;
pointer-events:none!important;
font-family:Georgia,'Courier New',monospace!important;
font-weight:900!important;
letter-spacing:2px!important;
line-height:1!important;
text-align:center!important;
white-space:nowrap!important;
-webkit-text-stroke:2px #000;
text-shadow:3px 3px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000;
}
.arcadeScorePopup.good{font-size:clamp(24px,4.2vw,54px);color:#fff;animation:scoreGoodFloat .72s ease-out forwards;}
.arcadeScorePopup.fast{font-size:clamp(30px,5.4vw,70px);color:#ffd84a;animation:scoreFastPop .78s cubic-bezier(.16,1.25,.28,1) forwards;}
.arcadeScorePopup.wow{font-size:clamp(56px,10vw,130px);color:#ff69b4;-webkit-text-stroke:3px #fff;text-shadow:4px 4px 0 #000,0 0 16px #ff69b4;animation:scoreWowJackpot .9s cubic-bezier(.13,1.42,.24,1) forwards;}
.arcadeScorePopup.combo{font-size:clamp(48px,9vw,120px);color:#ff69b4;-webkit-text-stroke:3px #fff;text-shadow:4px 4px 0 #000,0 0 20px #ff69b4;animation:comboScoreBurst .82s cubic-bezier(.12,1.45,.28,1) forwards;}
.arcadeScorePopup.perfect{font-size:clamp(48px,8.5vw,112px);color:#ffd84a;-webkit-text-stroke:3px #000;text-shadow:4px 4px 0 #8b4a00,0 0 18px #fff;transform:translate(-50%,-50%) rotate(-8deg) scale(.45)!important;animation:perfectStampSlam 1.05s cubic-bezier(.08,1.35,.2,1) forwards;}
@keyframes scoreGoodFloat{0%{opacity:0;transform:translate(-50%,0) scale(.85)}16%{opacity:1;transform:translate(-50%,-8px) scale(1)}100%{opacity:0;transform:translate(-50%,-58px) scale(.96)}}
@keyframes scoreFastPop{0%{opacity:0;transform:translate(-50%,0) scale(.45)}18%{opacity:1;transform:translate(-50%,-10px) scale(1.18)}38%{transform:translate(-50%,-18px) scale(1)}100%{opacity:0;transform:translate(-50%,-70px) scale(.95)}}
@keyframes scoreWowJackpot{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.22)}32%{transform:translate(-50%,-50%) scale(.98)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes comboScoreBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.24)}46%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes perfectStampSlam{0%{opacity:0;transform:translate(-50%,-70%) rotate(-16deg) scale(.25)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.22)}28%{transform:translate(-50%,-50%) rotate(-8deg) scale(.96)}75%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.04)}}
body.scoreFreeze #stage{filter:brightness(1.08);}
#highScoreWrap div:first-child{font-size:12px!important;}
/* M405 Magnus arrowless intro: candidate arrows flash white, then dissolve. */
.magnusArrowFade{
animation: magnusArrowFadeOut .62s ease-out forwards;
}
@keyframes magnusArrowFadeOut{
0%{opacity:1; filter:none;}
28%{opacity:1; filter:drop-shadow(0 0 8px #fff);}
100%{opacity:0; filter:drop-shadow(0 0 18px #fff);}
}
/* APP2 M412: mobile high score true single-number render.
The old score used several offset text-shadow copies to fake the white outline; on iPhone Safari
those shadows show as a second chopped number layer. Use one glyph layer + native stroke instead. */
@media (max-width:900px) and (orientation:portrait){
#highScore{
text-shadow:none!important;
-webkit-text-stroke:clamp(5px,1.2vw,8px) #fff!important;
paint-order:stroke fill!important;
color:#ff69b4!important;
filter:none!important;
}
}
/* APP2 M416: passive items are gold panels and cannot be clicked. King's Mercy (heart/continue) + Fish Food. */
#powerupSlots .powerupSlot.filled.passive,
#powerupSlots .powerupSlot.filled.continue.passive,
#powerupSlots .powerupSlot.filled.fishfood.passive,
#powerupSlots .powerupSlot.filled.coin.passive{
border:3px solid #ffd34a!important;
background:radial-gradient(circle at 50% 35%, rgba(255,222,93,.36) 0 28%, rgba(73,48,7,.68) 54%, #06070b 78%)!important;
box-shadow:0 0 0 2px #fff6b0 inset, 0 0 15px rgba(255,211,74,.72), 0 3px 0 #000!important;
cursor:default!important;
}
#powerupSlots .powerupSlot.filled.passive:active{
transform:none!important;
}
#powerupSlots .powerupSlot.filled.passive .powerupIcon img{
filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 8px rgba(255,211,74,.5))!important;
}
/* M419: tiny locked puzzle number, anchored to chessboard top-left on all platforms. */
#puzzleIdLabel{
position:absolute;
left:54px;
top:30px;
transform:translateY(-100%);
z-index:12;
color:#777;
font-family:monospace;
font-size:8px;
line-height:8px;
letter-spacing:0;
opacity:.75;
pointer-events:none;
user-select:none;
text-shadow:none;
}
/* APP2 M421 REAL: mobile color buttons + combo panel move as ONE right-side unit.
Enlarge only toward the marked lower-left direction by keeping the right edge locked.
Combo panel bottom aligns with the bottom of the hero/item panels. No other layout changes. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#stage{
--m421-item-bottom:calc(33.5dvh + 72vw + 30px + 15.5vw + 10px + 15.5vw);
--m421-unit-right:4vw;
--m421-color-btn:min(13.6vw,7.05dvh);
--m421-color-gap:min(2.45vw,1.25dvh);
--m421-color-w:calc((var(--m421-color-btn) * 3) + (var(--m421-color-gap) * 2));
--m421-color-h:calc((var(--m421-color-btn) * 2) + var(--m421-color-gap));
--m421-combo-w:min(36vw,18.5dvh);
--m421-combo-h:min(25vw,13.0dvh);
--m421-unit-gap:1.5dvh;
}
#desktopColorPanel{
position:absolute!important;
display:grid!important;
grid-template-areas:'. blue .' 'red yellow green'!important;
left:auto!important;
right:var(--m421-unit-right)!important;
top:calc(var(--m421-item-bottom) - var(--m421-combo-h) - var(--m421-unit-gap) - var(--m421-color-h))!important;
width:var(--m421-color-w)!important;
height:var(--m421-color-h)!important;
grid-template-columns:repeat(3,var(--m421-color-btn))!important;
grid-template-rows:repeat(2,var(--m421-color-btn))!important;
gap:var(--m421-color-gap)!important;
transform:none!important;
z-index:272!important;
pointer-events:auto!important;
}
#desktopColorPanel .desktopColorBtn{
width:var(--m421-color-btn)!important;
height:var(--m421-color-btn)!important;
min-width:var(--m421-color-btn)!important;
min-height:var(--m421-color-btn)!important;
max-width:var(--m421-color-btn)!important;
max-height:var(--m421-color-btn)!important;
font-size:calc(var(--m421-color-btn) * .58)!important;
line-height:var(--m421-color-btn)!important;
}
#mobileComboModeBtn{
display:block!important;
left:auto!important;
right:calc(var(--m421-unit-right) + ((var(--m421-color-w) - var(--m421-combo-w)) / 2))!important;
top:calc(var(--m421-item-bottom) - var(--m421-combo-h))!important;
width:var(--m421-combo-w)!important;
height:var(--m421-combo-h)!important;
min-width:var(--m421-combo-w)!important;
min-height:var(--m421-combo-h)!important;
max-width:var(--m421-combo-w)!important;
max-height:var(--m421-combo-h)!important;
padding:4px 3px!important;
border-width:4px!important;
border-radius:8px!important;
font-size:clamp(12px,4.2vw,23px)!important;
line-height:1.0!important;
letter-spacing:.25px!important;
z-index:276!important;
white-space:normal!important;
overflow:hidden!important;
}
#mobileComboModeBtn span{
margin-top:2px!important;
font-size:clamp(7px,2.1vw,13px)!important;
line-height:1.0!important;
}
}
/* APP2 M427: 3-panel Boss Tower using locked tower format.
Landscape: show tower in the left empty column, top aligned with hero HP bar.
Portrait keeps existing tower column behavior, but uses only 3 panels. */
#p10 .towerBox{position:relative;overflow:hidden;box-sizing:border-box;background:#050505!important;}
#p10 .towerBox:nth-child(n+4){display:none!important;visibility:hidden!important;}
#p10 .towerPortrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:92%;max-height:82%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #000);}
#p10 .towerQuestion{max-width:78%;max-height:78%;}
#p10 .towerPrevious .towerPortrait{filter:grayscale(1) contrast(1.05) brightness(.88) drop-shadow(0 2px 0 #000)!important;}
#p10 .towerName{position:absolute;left:2px;right:2px;bottom:1px;height:12px;line-height:12px;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:8px;font-weight:900;letter-spacing:.2px;color:#fff;text-shadow:1px 1px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
#p10 .towerTop{border-color:#d9d9d9!important;}
#p10 .towerCurrent{border-color:#e4a700!important;}
#p10 .towerPrevious{border-color:#9a9a9a!important;}
#p10 .towerEmptyMark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#999;font-size:22px;font-weight:bold;font-family:monospace;}
@media (orientation:landscape) and (min-width:901px){
#p10{
display:flex!important;
visibility:visible!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:center!important;
gap:10px!important;
left:calc(var(--desk-side-left) - 92px)!important;
top:var(--desk-board-top)!important;
width:76px!important;
height:250px!important;
padding:0!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
text-align:center!important;
z-index:65!important;
pointer-events:none!important;
}
#p10 .towerBox{
display:block!important;
visibility:visible!important;
width:70px!important;
height:70px!important;
min-width:70px!important;
min-height:70px!important;
max-width:70px!important;
max-height:70px!important;
margin:0!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #19110d, 0 3px 0 rgba(0,0,0,.70)!important;
}
#p10 .towerBox:nth-child(n+4){display:none!important;visibility:hidden!important;}
#p10 .towerName{font-size:7px;height:10px;line-height:10px;}
}
/* APP2 M428: full Boss Tower portrait assets + heavy landing polish */
#p10.towerLanding{animation:towerHeavyLand .68s cubic-bezier(.2,1.25,.25,1) both;}
#p10.towerLanding::after{content:"";position:absolute;left:50%;bottom:-5px;width:78px;height:14px;transform:translateX(-50%);background:radial-gradient(ellipse at center, rgba(190,170,130,.45) 0%, rgba(190,170,130,.20) 42%, rgba(190,170,130,0) 72%);pointer-events:none;animation:towerDust .68s ease-out both;}
@keyframes towerHeavyLand{0%{transform:translateY(-26px)}55%{transform:translateY(7px) scaleY(.965)}72%{transform:translateY(-3px) scaleY(1.02)}100%{transform:translateY(0) scaleY(1)}}
@keyframes towerDust{0%,35%{opacity:0;transform:translateX(-50%) scaleX(.45)}55%{opacity:1;transform:translateX(-50%) scaleX(1.1)}100%{opacity:0;transform:translateX(-50%) scaleX(1.8)}}
#p10 .towerName{display:none!important;}
#p10 .towerBossPortrait{max-width:96%!important;max-height:96%!important;}
#p10 .towerPrevious .towerBossPortrait{filter:none!important;}
#p10 .towerQuestion{image-rendering:pixelated;}
/* APP2 M429: 4-panel Boss Tower (? / ? / current / previous) in all views.
Build exactly like the current tower panels; keep same square style and anchors. */
#p10 .towerBox:nth-child(-n+4){display:block!important;visibility:visible!important;}
#p10 .towerBox:nth-child(n+5){display:none!important;visibility:hidden!important;}
#p10 .towerBox{position:relative!important;overflow:hidden!important;box-sizing:border-box!important;background:#050505!important;}
#p10 .towerBox:nth-child(1),#p10 .towerBox:nth-child(2){border-color:#d9d9d9!important;}
#p10 .towerBox:nth-child(3){border-color:#e4a700!important;}
#p10 .towerBox:nth-child(4){border-color:#9a9a9a!important;}
#p10 .towerQuestion{max-width:78%!important;max-height:78%!important;image-rendering:pixelated!important;}
@media (orientation:landscape) and (min-width:901px){
#p10{
display:flex!important;
visibility:visible!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:center!important;
gap:10px!important;
left:calc(var(--desk-side-left) - 92px)!important;
top:var(--desk-board-top)!important;
width:76px!important;
height:310px!important;
padding:0!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
text-align:center!important;
z-index:65!important;
pointer-events:none!important;
}
#p10 .towerBox{
display:block!important;
visibility:visible!important;
width:70px!important;
height:70px!important;
min-width:70px!important;
min-height:70px!important;
max-width:70px!important;
max-height:70px!important;
margin:0!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #19110d, 0 3px 0 rgba(0,0,0,.70)!important;
}
}
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p10 .towerBox:nth-child(-n+4){display:block!important;visibility:visible!important;}
#p10 .towerBox:nth-child(n+5){display:none!important;visibility:hidden!important;}
#p10{display:block!important;visibility:visible!important;}
#p10 .towerBox{
display:block!important;
visibility:visible!important;
width:15vw!important;
height:5.5vh!important;
min-height:5.5vh!important;
max-height:5.5vh!important;
margin:1.05vh auto!important;
border-width:3px!important;
box-shadow:inset 0 0 0 2px #19110d!important;
}
}
/* APP2 M430: landscape hero item slot panels moved up 3px only. */
@media (orientation:landscape) and (min-width:901px){
#powerupSlots{
top:calc(var(--desk-board-top) + var(--desk-hp-h) + 14px + var(--desk-panel-h) + 11px)!important;
}
}
/* APP2 M431: landscape high score single render.
Remove old offset/shadow number layer in all views; keep one pink glyph layer with native white stroke. */
#highScore{
text-shadow:none!important;
-webkit-text-stroke:4px #fff!important;
paint-order:stroke fill!important;
filter:none!important;
background:transparent!important;
}
#highScore::before,
#highScore::after{
content:none!important;
display:none!important;
}
@media (orientation:landscape){
#highScore{
text-shadow:none!important;
-webkit-text-stroke:4px #fff!important;
paint-order:stroke fill!important;
filter:none!important;
}
}
/* APP2 M432 EXPERIMENT: boss sprites x3, vertically centered to chessboard top/bottom span. Gameplay untouched. */
#p3{
overflow:visible!important;
}
#bossFrame,
.bossFrame{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
}
/* Desktop / large landscape: keep boss column center X, triple art box, center Y on chessboard. */
@media (orientation:landscape) and (min-width:901px){
#p3{
left:calc(var(--desk-side-right) - 90px)!important;
top:calc(var(--desk-board-top) + (var(--desk-board) / 2) - 202.5px)!important;
width:480px!important;
height:405px!important;
overflow:visible!important;
z-index:59!important;
pointer-events:none!important;
}
}
/* Mobile portrait: triple the locked boss box and center it on the actual 72vw board area. */
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p3{
left:50vw!important;
top:calc(33.5dvh - 6vw + 4.2dvh + 36vw)!important;
width:228vw!important;
height:45.6dvh!important;
transform:translate(-50%,-50%)!important;
overflow:visible!important;
z-index:1!important;
pointer-events:none!important;
}
}
/* Mobile/browser landscape fallback: center the enlarged boss on the detected board band when desktop vars are absent. */
@media (max-width:900px) and (orientation:landscape){
#p3{
left:calc(100vw - 34vw)!important;
top:50dvh!important;
width:48vw!important;
height:42dvh!important;
transform:translate(-50%,-50%)!important;
overflow:visible!important;
z-index:59!important;
pointer-events:none!important;
}
}
/* APP2 M433 CLEAN: from M432 only, put enlarged boss art behind chessboard. Boss name/text unchanged. */
#p3{
z-index:1!important;
pointer-events:none!important;
}
#p4,
#board,
#boardDim{
position:absolute!important;
z-index:60!important;
}
#board .square,
.square,
.pieceImg,
.arrowSvg,
.moveCircle,
.moveArrow,
.arrowLayer,
#arrowLayer,
#moveLayer,
#pieceLayer{
z-index:70!important;
}
@media (orientation:landscape) and (min-width:901px){
#p3{z-index:1!important;}
#p4,#board,#boardDim{z-index:60!important;}
}
@media (max-width:900px) and (orientation:landscape){
#p3{z-index:1!important;}
#p4,#board,#boardDim{z-index:60!important;}
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){
#p3{z-index:1!important;}
#p4,#board,#boardDim{z-index:60!important;}
}
/* APP2 M435: boss GIF is the absolute lowest game layer. Layout unchanged. */
#stage{
isolation:isolate!important;
}
#p3,
#p3 *,
#bossFrame,
.bossFrame{
z-index:0!important;
}
#p3{
pointer-events:none!important;
}
#p4,
#board,
#boardDim{
z-index:60!important;
}
#p2,
#highScoreWrap,
#playerHpBar,
#arrowDisplayBtn,
#p9,
#powerupSlots,
#dpadPanel,
#comboModeBtn,
#mobileComboModeBtn,
#desktopColorPanel,
#p10,
#continueBtn,
#toast{
z-index:200!important;
}
#bossTravelBtn{
z-index:10000!important;
pointer-events:auto!important;
}
#bossTravelOverlay{
z-index:20000!important;
}
/* APP2 M442: hard-lock drifting UI; landscape only for boss/arrow controls, restore portrait boss/puzzle number. */
@media (orientation:landscape) and (min-width:901px){
#p2{
left:var(--desk-side-right)!important;
top:var(--desk-board-top)!important;
width:300px!important;
height:56px!important;
z-index:220!important;
}
#p2 .hp{
position:absolute!important;
left:0!important;
top:0!important;
bottom:auto!important;
width:300px!important;
height:28px!important;
z-index:221!important;
}
#bossTravelBtn{
position:absolute!important;
left:calc(var(--desk-side-right) + 306px)!important;
top:calc(var(--desk-board-top) - 11px)!important;
width:50px!important;
height:50px!important;
z-index:10000!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:none!important;
}
#arrowDisplayBtn{
position:absolute!important;
left:calc(var(--desk-side-left) + var(--desk-panel-w) + 6px)!important;
top:calc(var(--desk-board-top) + 1px)!important;
width:26px!important;
height:26px!important;
z-index:10000!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:none!important;
}
}
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p3{
left:17vw!important;
top:17.8dvh!important;
width:56vw!important;
height:13.5dvh!important;
transform:none!important;
overflow:hidden!important;
z-index:10!important;
}
#bossFrame,.bossFrame{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center bottom!important;
}
#puzzleIdLabel{
left:6px!important;
top:calc(4.2dvh + 3px)!important;
transform:none!important;
z-index:120!important;
}
}
/* APP2 M443: portrait boss gap restore only. Move mobile portrait boss back up so pedestal does not touch board. Landscape untouched. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p3{
left:17vw!important;
top:12.8dvh!important;
width:56vw!important;
height:13.5dvh!important;
transform:none!important;
overflow:hidden!important;
z-index:10!important;
}
#bossFrame,.bossFrame{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center bottom!important;
}
}
/* APP2 M445: mobile puzzle number restore only. Keep it above chessboard, not inside board. Landscape untouched. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#puzzleIdLabel{
left:6px!important;
top:calc(4.2dvh - 2px)!important;
transform:translateY(-100%)!important;
z-index:220!important;
pointer-events:none!important;
}
}
/* APP2 M446: exact mobile puzzle number lock.
Mobile portrait only: puzzle number sits above the chessboard, aligned to the board's top-left corner.
It is not inside the board. Landscape untouched. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#puzzleIdLabel{
position:absolute!important;
left:0!important;
top:calc(4.2dvh - 2.5vw - 2px)!important;
transform:translateY(-100%)!important;
z-index:300!important;
pointer-events:none!important;
}
}
/* APP2 M447: mobile puzzle number true outside-board lock. JS places it from board rect; CSS only protects style. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#puzzleIdLabel{
position:fixed!important;
transform:none!important;
z-index:300!important;
pointer-events:none!important;
}
}
/* APP2 M448: mobile puzzle number finally locked to chessboard top-left OUTSIDE the board. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p4 #puzzleIdLabel{
position:absolute!important;
left:0!important;
top:-8px!important;
transform:translateY(-100%)!important;
z-index:300!important;
pointer-events:none!important;
}
}
/* APP2 M449: mobile puzzle number corrected.
It sits just above the real chessboard edge, aligned with board left, never inside a square. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p4 #puzzleIdLabel{
position:absolute!important;
left:0!important;
top:-10px!important;
transform:none!important;
z-index:300!important;
pointer-events:none!important;
}
}
/* APP2 M460: mobile boss HP starts at the same under-name position before JS measures, preventing first-frame jump. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p2 .hp{position:absolute!important;bottom:auto!important;top:calc(max(24px, 3.4dvh) + 3px)!important;transition:none!important;}
}
/* APP2 M463: mobile boss GIF 150% size, bottom-anchored so it grows upward away from the board. */
@media (max-width:900px) and (orientation:portrait), (orientation:portrait) and (max-width:900px){
#p3{
left:3vw!important;
top:6.05dvh!important;
width:84vw!important;
height:20.25dvh!important;
transform:none!important;
overflow:visible!important;
z-index:10!important;
pointer-events:none!important;
}
#bossFrame,.bossFrame{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center bottom!important;
transform:none!important;
transform-origin:center bottom!important;
}
}
@media (max-width:900px) and (orientation:portrait) and (pointer:coarse){.bossFrame{transform:translateY(2px)!important;}}
/* SEND V2: mobile board expansion.
Expand the portrait board upward and rightward while preserving the old bottom edge.
The board now spans nearly the full phone width and remains horizontally centered. */
@media (orientation:portrait){
#stage{
--send-board-size:min(96vw,54dvh);
--send-board-bottom:calc(31dvh + min(72vw,40dvh));
--m139-board-size:var(--send-board-size)!important;
--m139-board-left:calc((100vw - var(--send-board-size)) / 2)!important;
--m139-board-top:calc(var(--send-board-bottom) - var(--send-board-size))!important;
--m139-ui-top:calc(var(--send-board-bottom) + var(--m139-gap, 1dvh))!important;
}
#p4{
left:var(--m139-board-left)!important;
top:var(--m139-board-top)!important;
width:var(--send-board-size)!important;
height:var(--send-board-size)!important;
padding:0!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
overflow:visible!important;
}
#board,
#boardDim{
left:0!important;
top:0!important;
width:var(--send-board-size)!important;
height:var(--send-board-size)!important;
}
#p4 #puzzleIdLabel{
left:0!important;
top:-10px!important;
transform:none!important;
}
}
/* SEND V4: mobile numpad moved left and enlarged.
Final override: keeps gameplay/input JS untouched; only relocates the visible 3x3 numpad
and the mini Combo button that sits in its center cell. */
@media (orientation:portrait){
#stage{
--send-numpad-btn:min(14.4vw,7.8dvh);
--send-numpad-gap:min(2.8vw,1.5dvh);
--send-numpad-w:calc((var(--send-numpad-btn) * 3) + (var(--send-numpad-gap) * 2));
--send-numpad-h:var(--send-numpad-w);
--send-numpad-left:2.2vw;
--send-numpad-top:calc(var(--m139-ui-top,72dvh) + .35dvh);
--m181-dpad-btn:var(--send-numpad-btn)!important;
--m181-dpad-gap:var(--send-numpad-gap)!important;
--m181-dpad-w:var(--send-numpad-w)!important;
--m181-dpad-left:var(--send-numpad-left)!important;
--m181-dpad-top:var(--send-numpad-top)!important;
--m213-dpad-left:var(--send-numpad-left)!important;
--m215-dpad-left:var(--send-numpad-left)!important;
}
#dpadPanel{
position:absolute!important;
left:var(--send-numpad-left)!important;
top:var(--send-numpad-top)!important;
width:var(--send-numpad-w)!important;
height:var(--send-numpad-h)!important;
display:grid!important;
grid-template-columns:repeat(3,var(--send-numpad-btn))!important;
grid-template-rows:repeat(3,var(--send-numpad-btn))!important;
gap:var(--send-numpad-gap)!important;
justify-content:center!important;
align-items:center!important;
z-index:320!important;
pointer-events:auto!important;
}
#dpadPanel .dpad8,
#dpadPanel #p7,
#dpadPanel #p11,
#dpadPanel #p12,
#dpadPanel #p13,
#dpadPanel #p14,
#dpadPanel #p15,
#dpadPanel #p16,
#dpadPanel #p17,
#dpadPanel .dpadCenter{
width:var(--send-numpad-btn)!important;
height:var(--send-numpad-btn)!important;
min-width:var(--send-numpad-btn)!important;
min-height:var(--send-numpad-btn)!important;
max-width:var(--send-numpad-btn)!important;
max-height:var(--send-numpad-btn)!important;
font-size:clamp(26px,7.2vw,52px)!important;
line-height:calc(var(--send-numpad-btn) - 12px)!important;
border-width:4px!important;
border-radius:10px!important;
transform:none!important;
}
#dpadPanel .dpad8.activeDir{transform:scale(1.02)!important;}
#dpadPanel .dpadCenter{visibility:hidden!important;}
#comboModeBtn{
display:block!important;
position:absolute!important;
left:calc(var(--send-numpad-left) + var(--send-numpad-btn) + var(--send-numpad-gap))!important;
top:calc(var(--send-numpad-top) + var(--send-numpad-btn) + var(--send-numpad-gap))!important;
width:var(--send-numpad-btn)!important;
height:var(--send-numpad-btn)!important;
min-width:var(--send-numpad-btn)!important;
min-height:var(--send-numpad-btn)!important;
max-width:var(--send-numpad-btn)!important;
max-height:var(--send-numpad-btn)!important;
padding:1px!important;
border-width:2px!important;
border-radius:7px!important;
font-size:clamp(7px,2.35vw,14px)!important;
line-height:1!important;
letter-spacing:0!important;
white-space:normal!important;
overflow:hidden!important;
z-index:325!important;
}
#comboModeBtn span{
font-size:clamp(6px,1.8vw,11px)!important;
line-height:1!important;
margin-top:0!important;
}
}
/* SEND V5: move the mobile chessboard up.
Final portrait override only: board/arrow coordinates move together; gameplay JS untouched. */
@media (orientation:portrait){
#stage{
--send-board-lift:7.5dvh;
--m139-board-top:calc(var(--send-board-bottom) - var(--send-board-size) - var(--send-board-lift))!important;
}
#p4{
top:var(--m139-board-top)!important;
}
}
/* SEND V15 puzzle-only: remove boss/tower layer completely from view */
html.sendV15PuzzleOnly #p2,
html.sendV15PuzzleOnly #p3,
html.sendV15PuzzleOnly #bossCloneHpText,
html.sendV15PuzzleOnly #bossTravelBtn,
html.sendV15PuzzleOnly #bossTravelOverlay,
html.sendV15PuzzleOnly #p10,
html.sendV15PuzzleOnly #playerHpBar,
html.sendV15PuzzleOnly #powerupSlots,
html.sendV15PuzzleOnly #continueBtn,
html.sendV15PuzzleOnly #highScoreWrap,
html.sendV15PuzzleOnly #puzzleIdLabel,
html.sendV15PuzzleOnly #turnbar {
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
}
html, body, #stage { background:#fff !important; background-color:#fff !important; }
/* SEND V16: portrait zen composition.
Board breathes in the center; controls become one cohesive handheld instrument.
Combo Mode art/function stays unchanged. Gameplay JS untouched. */
@media (orientation:portrait){
#stage{
/* Slightly smaller/lower board than V15 so the UI no longer feels smashed under it. */
--send-board-size:min(92vw,52dvh);
--send-board-lift:2.25dvh;
--send-board-bottom:calc(31dvh + min(72vw,40dvh));
--m139-board-size:var(--send-board-size)!important;
--m139-board-left:calc((100vw - var(--send-board-size)) / 2)!important;
--m139-board-top:calc(var(--send-board-bottom) - var(--send-board-size) - var(--send-board-lift))!important;
--m139-ui-top:calc(var(--m139-board-top) + var(--send-board-size) + 2.25dvh)!important;
/* One clean control band under the board. */
--send-numpad-btn:min(13vw,7.0dvh);
--send-numpad-gap:min(2.25vw,1.15dvh);
--send-numpad-w:calc((var(--send-numpad-btn) * 3) + (var(--send-numpad-gap) * 2));
--send-numpad-h:var(--send-numpad-w);
--send-numpad-left:4.25vw;
--send-numpad-top:var(--m139-ui-top);
--send-color-btn:min(12.5vw,6.7dvh);
--send-color-gap:min(2.15vw,1.05dvh);
--send-color-w:calc((var(--send-color-btn) * 3) + (var(--send-color-gap) * 2));
--send-color-right:4.25vw;
--send-color-top:var(--m139-ui-top);
--m181-dpad-btn:var(--send-numpad-btn)!important;
--m181-dpad-gap:var(--send-numpad-gap)!important;
--m181-dpad-w:var(--send-numpad-w)!important;
--m181-dpad-left:var(--send-numpad-left)!important;
--m181-dpad-top:var(--send-numpad-top)!important;
--m213-dpad-left:var(--send-numpad-left)!important;
--m215-dpad-left:var(--send-numpad-left)!important;
}
#p4{
left:var(--m139-board-left)!important;
top:var(--m139-board-top)!important;
width:var(--send-board-size)!important;
height:var(--send-board-size)!important;
padding:0!important;
border:none!important;
box-shadow:none!important;
background:transparent!important;
overflow:visible!important;
}
#board,#boardDim{
left:0!important;
top:0!important;
width:var(--send-board-size)!important;
height:var(--send-board-size)!important;
}
#dpadPanel{
position:absolute!important;
left:var(--send-numpad-left)!important;
top:var(--send-numpad-top)!important;
width:var(--send-numpad-w)!important;
height:var(--send-numpad-h)!important;
display:grid!important;
grid-template-columns:repeat(3,var(--send-numpad-btn))!important;
grid-template-rows:repeat(3,var(--send-numpad-btn))!important;
gap:var(--send-numpad-gap)!important;
justify-content:center!important;
align-items:center!important;
z-index:320!important;
}
#dpadPanel .dpad8,
#dpadPanel #p7,#dpadPanel #p11,#dpadPanel #p12,#dpadPanel #p13,#dpadPanel #p14,#dpadPanel #p15,#dpadPanel #p16,#dpadPanel #p17,
#dpadPanel .dpadCenter{
width:var(--send-numpad-btn)!important;
height:var(--send-numpad-btn)!important;
min-width:var(--send-numpad-btn)!important;
min-height:var(--send-numpad-btn)!important;
max-width:var(--send-numpad-btn)!important;
max-height:var(--send-numpad-btn)!important;
font-size:clamp(24px,6.4vw,48px)!important;
line-height:calc(var(--send-numpad-btn) - 11px)!important;
border-width:4px!important;
border-radius:10px!important;
transform:none!important;
}
#dpadPanel .dpad8:not(.activeDir){opacity:.14!important;filter:grayscale(.15) brightness(1.15)!important;}
#dpadPanel .dpad8.activeDir{opacity:1!important;transform:scale(1.01)!important;}
#dpadPanel .dpadCenter{visibility:hidden!important;}
#comboModeBtn{
display:block!important;
position:absolute!important;
left:calc(var(--send-numpad-left) + var(--send-numpad-btn) + var(--send-numpad-gap))!important;
top:calc(var(--send-numpad-top) + var(--send-numpad-btn) + var(--send-numpad-gap))!important;
width:var(--send-numpad-btn)!important;
height:var(--send-numpad-btn)!important;
min-width:var(--send-numpad-btn)!important;
min-height:var(--send-numpad-btn)!important;
max-width:var(--send-numpad-btn)!important;
max-height:var(--send-numpad-btn)!important;
padding:1px!important;
border-width:2px!important;
border-radius:7px!important;
font-size:clamp(7px,2.05vw,13px)!important;
line-height:1!important;
letter-spacing:0!important;
white-space:normal!important;
overflow:hidden!important;
z-index:325!important;
}
#comboModeBtn span{font-size:clamp(5px,1.55vw,10px)!important;line-height:1!important;margin-top:0!important;}
#desktopColorPanel{
display:grid!important;
position:absolute!important;
left:auto!important;
right:var(--send-color-right)!important;
top:var(--send-color-top)!important;
width:var(--send-color-w)!important;
height:calc((var(--send-color-btn) * 2) + var(--send-color-gap))!important;
grid-template-columns:repeat(3,var(--send-color-btn))!important;
grid-template-rows:repeat(2,var(--send-color-btn))!important;
gap:var(--send-color-gap)!important;
grid-template-areas:'. blue .' 'red yellow green'!important;
transform:none!important;
z-index:322!important;
pointer-events:auto!important;
}
.desktopColorBtn{
width:var(--send-color-btn)!important;
height:var(--send-color-btn)!important;
min-width:var(--send-color-btn)!important;
min-height:var(--send-color-btn)!important;
max-width:var(--send-color-btn)!important;
max-height:var(--send-color-btn)!important;
font-size:calc(var(--send-color-btn) * .55)!important;
line-height:var(--send-color-btn)!important;
}
.desktopColorBtn:not(.activeColor){opacity:.16!important;filter:grayscale(.1) brightness(1.08)!important;}
.desktopColorBtn.activeColor{opacity:1!important;}
#mobileComboModeBtn{
display:block!important;
right:calc(var(--send-color-right) + ((var(--send-color-w) - min(32vw,16dvh)) / 2))!important;
top:calc(var(--send-color-top) + (var(--send-color-btn) * 2) + var(--send-color-gap) + 1.65dvh)!important;
width:min(32vw,16dvh)!important;
height:min(21vw,11dvh)!important;
min-width:min(32vw,16dvh)!important;
min-height:min(21vw,11dvh)!important;
max-width:min(32vw,16dvh)!important;
max-height:min(21vw,11dvh)!important;
transform:none!important;
z-index:326!important;
}
}
/* SEND V26: Zen controls + arrowless default polish */
#zenControlsBtn{
position:absolute!important;
display:block!important;
left:-9999px;top:-9999px;
opacity:0!important;visibility:hidden!important;
width:26px!important;height:26px!important;min-width:0!important;min-height:0!important;
padding:0!important;border-radius:50%!important;border:3px solid #111!important;
background:#111!important;color:#fff!important;
font-family:Georgia,'Courier New',monospace!important;font-size:13px!important;font-weight:900!important;line-height:20px!important;text-align:center!important;
box-shadow:0 2px 0 #444,0 0 0 2px #fff,inset 0 2px 0 rgba(255,255,255,.25)!important;
z-index:10001!important;cursor:pointer!important;touch-action:manipulation!important;pointer-events:auto!important;
}
#zenControlsBtn.zenControlsReady,#zenControlsBtn[data-ready="1"]{opacity:1!important;visibility:visible!important;}
#zenControlsBtn[aria-pressed="true"]{background:#fff!important;color:#111!important;opacity:.7!important;}
#zenControlsBtn:active{transform:scale(.9)!important;box-shadow:0 1px 0 #444,0 0 0 2px #fff,inset 0 2px 0 rgba(0,0,0,.15)!important;}
@media (orientation:landscape) and (min-width:901px){
#zenControlsBtn{width:26px!important;height:26px!important;}
html.sendZenControlsOnly #dpadPanel,
html.sendZenControlsOnly #desktopColorPanel,
html.sendZenControlsOnly #comboModeBtn,
html.sendZenControlsOnly #mobileComboModeBtn{
opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
}
@media (orientation:portrait){
html.sendZenControlsOnly #dpadPanel,
html.sendZenControlsOnly #comboModeBtn,
html.sendZenControlsOnly #mobileComboModeBtn{
opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
html.sendZenControlsOnly #desktopColorPanel{
opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
}
/* SEND V36: exact Zen control visibility lock
Zen button matches the arrow toggle size; Zen is visual-only.
Desktop Zen: hide all on-screen input controls (keyboard/mouse inputs still work).
Mobile Zen: RGB buttons only. */
#zenControlsBtn{
width:26px!important;
height:26px!important;
min-width:26px!important;
min-height:26px!important;
max-width:26px!important;
max-height:26px!important;
box-sizing:border-box!important;
padding:0!important;
border-radius:50%!important;
line-height:20px!important;
}
@media (orientation:landscape) and (min-width:901px){
html.sendZenControlsOnly #dpadPanel,
html.sendZenControlsOnly #desktopColorPanel,
html.sendZenControlsOnly #comboModeBtn,
html.sendZenControlsOnly #mobileComboModeBtn{
display:none!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
}
@media (orientation:portrait), (max-width:900px){
html.sendZenControlsOnly #dpadPanel,
html.sendZenControlsOnly #comboModeBtn,
html.sendZenControlsOnly #mobileComboModeBtn{
display:none!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
html.sendZenControlsOnly #desktopColorPanel{
display:grid!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
}