@import url('room-scene.css');
@import url('controls.css');
@import url('result-window.css');
@import url('room-decor.css');
@import url('album-ui.css');
@import url('header-refresh.css');
@import url('menu-layout.css');
/* Compact status above the board; large, quiet aid controls below it. */
.game{grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.hud{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;padding:0;min-width:0}
.hud .status{display:grid;grid-template-columns:66px 91px minmax(32px,1fr) 85px;align-items:center;gap:6px;height:auto;min-height:42px;min-width:0}
.hud .level-stack{display:grid;grid-template-columns:minmax(0,1fr) 15px;grid-template-rows:auto auto;gap:1px;align-items:center;min-width:0}
.hud .stage{grid-column:1 / -1;grid-row:1;margin:0;padding:0;background:none;color:#8b7158;font-size:9px;line-height:13px;font-weight:700;letter-spacing:.55px;white-space:nowrap}
.hud .level-stack #collection{grid-column:1;grid-row:2;min-width:0;min-height:22px;margin:0;padding:1px 4px;border:1px solid #d9c29e;border-radius:10px;background:#f3e3c6;box-shadow:none;color:#97713d;font-size:10px;line-height:17px}
.hud #wallet{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#97713d;font-weight:700;font-variant-numeric:tabular-nums}
.hud #ornament{grid-column:2;grid-row:2;align-self:center;width:15px;max-width:15px;height:18px;pointer-events:none}
.hud #ornament svg{width:15px;height:18px;display:block}
.hud .clock-face{min-width:0;padding:5px 2px;border:1px solid #dcc7a8;border-radius:11px;background:#fff8e9;box-shadow:0 2px 0 #c7ac7d26;text-align:center}
.hud #timer{display:block;color:#7d482b;font-size:28px;line-height:1;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.5px;text-shadow:none}
.hud #timer.urgent{color:#bd3730}
.hud .status>.meter{width:100%;height:18px;min-width:0;margin:0;border-radius:7px;background:#dfcba9;box-shadow:inset 0 1px 2px #92704c26;overflow:hidden}
.hud .hud-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.hud .hud-actions .icon-button{width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px;padding:0;border:1px solid #d8c3a4;border-radius:11px;background:#fff7e8;box-shadow:none;color:#927554;font-size:23px;line-height:1;text-shadow:none}
.hud .hud-actions .pause-button{border-color:#4b8cb5;border-bottom:2px solid #34729d;background:linear-gradient(#76b9e4,#4a97ca);color:#fffdf4;font-size:25px;font-weight:800;box-shadow:inset 0 1px 0 #ccecff80}
.hud .hud-actions .icon-button:active:not(:disabled){transform:translateY(1px)}
.hud .campaign{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:6px;min-width:0;height:14px;min-height:14px;margin:0;padding:0 2px;color:#927b63;font-size:10px;line-height:14px}
.hud #moves{grid-column:1;grid-row:1;color:#9a8268;font-size:10px;line-height:14px;white-space:nowrap}
.hud #combo{grid-column:2;grid-row:1;min-width:0;min-height:0;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#957b58;font-size:10px;line-height:14px;font-weight:500;white-space:nowrap}
.hud .campaign #progress{grid-column:3;grid-row:1;margin:0;color:#80674f;font-size:11px;line-height:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud #hint-note:not([hidden]){grid-column:2;grid-row:1;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#92713b;font-size:10px;line-height:14px;white-space:nowrap}
.hud .campaign:has(#hint-note:not([hidden])) #combo{visibility:hidden}
.game>.aid-toolbar.aid-footer{display:grid;grid-template-columns:repeat(3,minmax(54px,76px));align-items:center;justify-content:center;gap:16px;min-width:0;margin:0;padding:3px 0 0}
.game>.aid-toolbar.aid-footer button{display:grid;place-items:center;gap:0;width:100%;height:54px;min-width:54px;min-height:54px;padding:0;border:1px solid #d6c2a1;border-bottom:2px solid #bea67f;border-radius:15px;background:#fff8e9;box-shadow:inset 0 1px 0 #fffdf8,0 1px 2px #92704c14;color:#7e6244;font-size:10px;font-weight:650;line-height:1;touch-action:manipulation}
.game>.aid-toolbar.aid-footer .aid-icon{display:block;flex:none;width:100%;min-width:0;max-width:100%;font-size:42px;line-height:1;text-align:center;pointer-events:none}
.game>.aid-toolbar.aid-footer button>span:not(.aid-icon),.game>.aid-toolbar.aid-footer small{display:none}
.game>.aid-toolbar.aid-footer button:disabled{opacity:.48}
.game>.aid-toolbar.aid-footer button:active:not(:disabled){background:#f0e4cb;transform:translateY(1px);box-shadow:inset 0 1px 3px #b69a6a25}
@media(max-width:340px){
 .game{gap:4px}
 .hud{gap:2px}
 .hud .status{grid-template-columns:58px 81px minmax(28px,1fr) 85px;gap:4px}
 .hud .stage{font-size:8.5px;letter-spacing:.25px}
 .hud #timer{font-size:25px}
 .hud .level-stack{grid-template-columns:minmax(0,1fr) 12px}
 .hud .level-stack #collection{font-size:9px;padding:1px 3px}
 .hud #ornament,.hud #ornament svg{width:12px;height:16px}
 .hud #combo{font-size:9px}
 .game>.aid-toolbar.aid-footer{gap:14px;padding-top:1px;grid-template-columns:repeat(3,64px)}
 .game>.aid-toolbar.aid-footer button{height:48px;min-height:48px;min-width:48px;border-radius:13px}
 .game>.aid-toolbar.aid-footer .aid-icon{font-size:38px}
}
@media(orientation:landscape) and (max-height:480px){
 .game{grid-template-columns:minmax(0,1fr) 54px;grid-template-rows:auto minmax(0,1fr);gap:4px 8px}
 .hud{grid-column:1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:0}
 .hud .status{grid-template-columns:72px 91px minmax(32px,1fr) 85px;gap:6px;min-height:40px}
 .hud #timer{font-size:28px}
 .hud .campaign{height:12px;min-height:12px;line-height:12px}
 .hud #moves,.hud #combo,.hud .campaign #progress{font-size:9px;line-height:12px}
 .hud #hint-note{display:none}
 .game>.scene{grid-column:1;grid-row:2}
 .game>.aid-toolbar.aid-footer{grid-column:2;grid-row:1 / -1;align-self:center;grid-template-columns:54px;grid-template-rows:repeat(3,54px);gap:12px;padding:0}
 .game>.aid-toolbar.aid-footer button{height:54px;min-height:54px;min-width:54px;border-radius:14px}
 .game>.aid-toolbar.aid-footer .aid-icon{font-size:40px}
}

/* User-supplied cropped artwork. Side ornaments keep their aspect ratio.
   Only the blank middle 60% expands, so wide layouts never repeat ornaments. */
.game>.hud{
 --ui-art-edge:44px;
 position:relative;isolation:isolate;overflow:hidden;border-radius:12px;
 padding:6px var(--ui-art-edge);gap:3px;
 background:#f8e8cb url('assets/ui/japanese-header.webp') center/166.6667% 100% no-repeat;
}
.game>.hud::before,.game>.hud::after,
.game>.aid-toolbar.aid-footer::before,.game>.aid-toolbar.aid-footer::after{
 content:"";position:absolute;z-index:-1;top:0;bottom:0;width:var(--ui-art-edge);
 background-repeat:no-repeat;background-size:auto 100%;pointer-events:none;
}
.game>.hud::before{left:0;background-image:url('assets/ui/japanese-header.webp');background-position:left center}
.game>.hud::after{right:0;background-image:url('assets/ui/japanese-header.webp');background-position:right center}
.game>.hud .status{grid-template-columns:48px 77px minmax(24px,1fr) 85px;gap:4px}
.game>.hud .level-stack{grid-template-columns:minmax(0,1fr)}
.game>.hud #ornament{display:none}
.game>.hud .stage{font-size:8.5px;letter-spacing:.15px;color:#664b32}
.game>.hud .level-stack #collection{grid-column:1;padding:1px 3px;background:#fff6e7e8;color:#735232}
.game>.hud #wallet{font-size:9px;color:#735232}
.game>.hud .clock-face{padding:5px 1px;background:#fff9eeef}
.game>.hud #timer{font-size:25px}
.game>.hud .campaign{gap:4px;padding:0}
.game>.hud .campaign #progress{font-size:10px}
/* The light paper remains light at every difficulty; use cocoa on that paper,
   including the higher-specificity dark-room rules in difficulty.css. */
.game.game[data-difficulty]>.hud .stage,
.game.game[data-difficulty]>.hud .campaign #progress{color:#664b32}
.game.game[data-difficulty]>.hud #moves,
.game.game[data-difficulty]>.hud #combo,
.game.game[data-difficulty]>.hud #hint-note:not([hidden]),
.game.game[data-difficulty]>.hud #monochrome-note{color:#70583f;text-shadow:0 1px 0 #fff8e5a6}
.game.oni-game>.hud .status{grid-template-columns:88px minmax(0,1fr) 85px}
.game.oni-game>.hud .stage,
.game.oni-game>.hud #oni-best,
.game.oni-game>.hud .oni-no-limit,
.game.oni-game>.hud #oni-wave,
.game.oni-game>.hud #moves,
.game.oni-game>.hud .campaign #progress{color:#664b32}
.game.oni-game>.hud .clock-face{background:#fff9eeef;border-color:#dcc7a8}
.game.oni-game>.hud #timer,
.game.oni-game>.hud #oni-score,
.game.oni-game>.hud .oni-score{color:#7d482b}
.game.oni-game>.hud .oni-score-card{flex-direction:column;gap:6px}
.game.oni-game>.hud #oni-best{font-size:8px;line-height:11px}
@media(min-width:381px){
 .game>.hud .level-stack{grid-template-columns:minmax(0,1fr) 10px}
 .game>.hud #ornament{display:block;width:10px;height:14px}
 .game>.hud #ornament svg{width:10px;height:14px}
}
.game>.aid-toolbar.aid-footer{
 --ui-art-edge:40px;
 position:relative;isolation:isolate;overflow:hidden;border-radius:12px;
 padding:6px var(--ui-art-edge);gap:10px;
 background:#f8e8cb url('assets/ui/japanese-footer.webp') center/166.6667% 100% no-repeat;
}
.game>.aid-toolbar.aid-footer::before{left:0;background-image:url('assets/ui/japanese-footer.webp');background-position:left center}
.game>.aid-toolbar.aid-footer::after{right:0;background-image:url('assets/ui/japanese-footer.webp');background-position:right center}
.game>.aid-toolbar.aid-footer button{background:#fff9eedb;box-shadow:inset 0 1px 0 #fffdf8,0 1px 2px #92704c14}
@media(max-width:340px){
 .game>.hud{--ui-art-edge:31px;padding-top:5px;padding-bottom:5px;gap:2px}
 .game>.hud .status{grid-template-columns:44px 70px minmax(24px,1fr) 85px;gap:3px}
 .game>.hud .stage{font-size:8px}
 .game>.hud #timer{font-size:22px}
 .game>.hud .campaign{gap:3px}
 .game>.hud #combo{font-size:8px}
 .game>.hud .campaign #progress{font-size:9px}
 .game.oni-game>.hud .status{grid-template-columns:64px minmax(0,1fr) 85px}
 .game.oni-game>.hud #oni-score{font-size:25px}
 .game.oni-game>.hud #timer small{font-size:8px}
 .game>.aid-toolbar.aid-footer{--ui-art-edge:30px;padding-top:5px;padding-bottom:5px;gap:8px;grid-template-columns:repeat(3,minmax(48px,64px))}
}
@media(min-width:341px) and (max-width:400px){
 .game>.hud{--ui-art-edge:34px}
 .game.oni-game>.hud .status{grid-template-columns:64px minmax(0,1fr) 85px}
 .game.oni-game>.hud .stage{font-size:9px;letter-spacing:0}
 .game.oni-game>.hud #oni-score{font-size:25px}
 .game.oni-game>.hud #timer small{font-size:8px}
 .game>.aid-toolbar.aid-footer{--ui-art-edge:30px;gap:8px}
}
@media(orientation:landscape) and (max-height:480px){
 .game>.hud{--ui-art-edge:32px;padding:3px var(--ui-art-edge);gap:2px;border-radius:9px}
 .game>.hud .status{grid-template-columns:58px 81px minmax(24px,1fr) 85px;gap:5px}
 .game>.hud #timer{font-size:25px}
 .game>.aid-toolbar.aid-footer{--ui-art-edge:0px;padding:4px 0;gap:12px;border-radius:10px;background-size:166.6667% 100%}
 .game>.aid-toolbar.aid-footer::before,.game>.aid-toolbar.aid-footer::after{display:none}
}