/* Carrot Guard. Graphite surfaces with solid fills; colour lives on the board (the carrot, the monsters, the shots, gold) and in the stars. Motion uses the
   shared tempos: 70ms press, 180ms state, 240ms entrance. */
.carrot-page{--carrot-ink:#ededed;--carrot-text:#d4d4d4;--carrot-mute:#a3a3a3;--carrot-key:#2a2a2a;--carrot-key-hover:#313131;--carrot-key-press:#1f1f1f;--carrot-plate:#242424;--carrot-light:#d9d9d9;--carrot-focus:#d6d6d6;--carrot-ease:cubic-bezier(.2,.8,.2,1)}
.carrot-page .board-container{position:relative;isolation:isolate;padding:8px;background:#1b1b1b;border:0;border-radius:16px;box-shadow:inset 0 2px 5px #00000050,inset 0 -1px 2px #ffffff04;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.carrot-page .board-container:focus{outline:none}
.carrot-canvas{display:block;width:100%;height:100%;border-radius:10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.carrot-page .stat-label{font-size:14px;line-height:1.3;color:var(--carrot-mute);letter-spacing:.01em}
.carrot-page .stat-value{font-variant-numeric:tabular-nums}
.carrot-page .rules-list li,.carrot-page .rules-list b{font-size:14px;line-height:1.6}
.carrot-page .game-help summary{font-size:14px}
.carrot-page .game-status{font-size:14px;line-height:1.45;color:var(--carrot-mute)}

/* Actions: next wave leads; speed and pause are quiet keys. */
.carrot-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.carrot-page .carrot-next{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--carrot-key);box-shadow:var(--graphite-lift);color:var(--carrot-text);font:500 14px/1 var(--sans);white-space:nowrap;transition:transform 70ms ease-out,background-color 180ms var(--carrot-ease),color 180ms var(--carrot-ease);touch-action:manipulation}
.carrot-page .carrot-next[data-ready=true]{background:var(--carrot-light);color:#1d1d1d;box-shadow:0 1px 2px #00000066}
.carrot-page .carrot-next:hover:enabled{background:var(--carrot-key-hover)}
.carrot-page .carrot-next[data-ready=true]:hover:enabled{background:#e6e6e6}
.carrot-page .carrot-tool{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;height:44px;padding:0 4px;white-space:nowrap;border:0;border-radius:10px;background:var(--carrot-key);box-shadow:var(--graphite-lift);color:var(--carrot-text);font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums;transition:transform 70ms ease-out,background-color 180ms var(--carrot-ease);touch-action:manipulation}
.carrot-page .carrot-tool:hover:enabled{background:var(--carrot-key-hover)}
.carrot-page .carrot-tool[aria-pressed=true]{background:#3a3a3a;color:var(--carrot-ink)}
.carrot-page :is(.carrot-next,.carrot-tool):active:enabled{transform:translateY(1px) scale(.98);background:var(--carrot-key-press);box-shadow:var(--graphite-press)}
/* Disabled keys are solid, a step under the keys (as the locked levels are): nothing shows through them. */
.carrot-page :is(.carrot-next,.carrot-tool):disabled{background:#242424;box-shadow:none;color:#7d7d7d;cursor:default}
.carrot-page :is(.carrot-next,.carrot-tool,.menu-option,.level-option,.card-button):focus-visible{outline:2px solid var(--carrot-focus);outline-offset:2px}

/* The build menu floats beside the chosen tile. */
.carrot-menu{position:absolute;left:0;top:0;z-index:6;display:block;transform-origin:50% 100%;padding:6px;border-radius:14px;background:#262626;box-shadow:0 1px 2px #000000a6,0 8px 14px -8px #000000cc;animation:carrot-pop 180ms var(--carrot-ease) both}
.carrot-menu[hidden]{display:none}
.menu-row{display:flex;gap:6px}
.menu-row[hidden]{display:none}
.menu-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:84px;min-height:96px;padding:8px 4px 8px;border:0;border-radius:10px;background:#2f2f2f;color:var(--carrot-text);font:500 14px/1.2 var(--sans);text-align:center;cursor:pointer;transition:transform 70ms ease-out,background-color 180ms var(--carrot-ease);touch-action:manipulation}
.menu-option:hover{background:#363636}
.menu-option:active{transform:scale(.97);background:#242424}
.menu-option[aria-disabled=true]{color:#8a8a8a}
.menu-option[aria-disabled=true] .menu-icon{opacity:.4}
.menu-icon{display:block;width:37px;height:37px}
.menu-text{display:flex;flex-direction:column;align-items:center;gap:2px}
.menu-name{font-size:14px;white-space:nowrap}
.menu-cost{font-size:14px;color:var(--carrot-mute);font-variant-numeric:tabular-nums}
.menu-cost:not(:empty)::before{content:'';display:inline-block;width:8px;height:8px;margin:0 5px 1px 0;border-radius:2px;background:#9d9d9d;vertical-align:middle}
.menu-sell .menu-cost::before{display:none}
.menu-sell{width:72px}
.menu-option kbd{display:none}
@media (hover:hover) and (pointer:fine){
  .menu-option kbd{position:absolute;top:5px;right:6px;display:block;min-width:0;height:auto;padding:0;border:0;font:500 14px/1 var(--sans);color:#7c7c7c}
}

/* A short line across the top of the board when a wave begins. */
.carrot-toast{position:absolute;left:50%;top:14px;z-index:5;max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;background:#262626f2;box-shadow:0 1px 2px #00000080;color:var(--carrot-ink);font:500 14px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transform:translateX(-50%);transition:opacity 240ms var(--carrot-ease),transform 240ms var(--carrot-ease)}
.carrot-toast[data-state=in]{animation:carrot-toast-in 240ms var(--carrot-ease) both}
.carrot-toast[data-state=out]{opacity:0;transform:translate(-50%,-6px)}

/* Cards over the board: the level list, a pause, a result. The board stays visible behind them. */
.carrot-page .carrot-overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:16px;border-radius:inherit;background:#161616b8;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left}
.carrot-page .carrot-overlay[hidden]{display:none}
.carrot-card{width:min(460px,100%);max-height:100%;overflow:auto;padding:24px;border-radius:16px;background:var(--carrot-plate);box-shadow:0 1px 2px #0000008c,0 10px 16px -10px #000000b3;animation:carrot-card-in 240ms var(--carrot-ease) both}
.carrot-card h2{margin:0;font:400 28px/1.15 var(--sans);letter-spacing:-.025em;color:var(--carrot-ink)}
.card-detail{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--carrot-mute)}
.card-detail:empty{display:none}
/* Twelve levels in three worlds: a row of four keys per world, each with its number and its stars. */
.level-list{display:grid;gap:12px;margin-top:18px}
.level-list[hidden]{display:none}
.level-world{display:grid;gap:6px;min-width:0}
.level-world-name{font:500 14px/20px var(--sans);color:var(--carrot-mute)}
.level-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.level-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:64px;padding:8px 4px;border:0;border-radius:12px;background:#2d2d2d;box-shadow:inset 0 -3px 0 #00000038;color:var(--carrot-text);text-align:center;cursor:pointer;transition:transform 70ms ease-out,background-color 180ms var(--carrot-ease);touch-action:manipulation}
.level-option:hover:enabled{background:#353535}
.level-option:active:enabled{transform:translateY(1px) scale(.98);background:#262626;box-shadow:inset 0 -1px 0 #00000038}
.level-option:disabled{cursor:default;background:#262626;box-shadow:none;color:#7d7d7d}
.level-option[data-current=true]:enabled{background:#383838;box-shadow:inset 0 0 0 1px #ffffff29,inset 0 -3px 0 #00000038}
.level-number{font:600 18px/1 var(--sans);color:var(--carrot-ink);font-variant-numeric:tabular-nums}
.level-option:disabled .level-number{color:#7d7d7d}
.level-stars{display:flex;align-items:center;justify-content:center;gap:2px;min-height:16px;color:#7d7d7d}
.level-lock{display:block;width:16px;height:16px}
.level-stars svg{display:block;width:16px;height:16px}
.card-stars{display:flex;gap:10px;margin-top:18px}
.card-stars[hidden]{display:none}
.card-stars i{display:block;line-height:0}
.card-stars i[data-lit=true]{animation:carrot-star 240ms var(--carrot-ease) both}
.card-stars i:nth-child(2){animation-delay:120ms}.card-stars i:nth-child(3){animation-delay:240ms}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.card-actions:not(:has(> :not([hidden]))){display:none}
.card-button{flex:1 1 auto;min-height:46px;padding:0 18px;border:0;border-radius:10px;background:#303030;color:var(--carrot-text);font:500 14px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:transform 70ms ease-out,background-color 180ms var(--carrot-ease);touch-action:manipulation}
.card-button:hover{background:#383838}
.card-button:active{transform:translateY(1px) scale(.985);background:#272727}
.card-button[hidden]{display:none}
.card-primary{background:var(--carrot-light);color:#1d1d1d}
.card-primary:hover{background:#e6e6e6}
.card-primary:active{background:#c9c9c9}

/* The menu is placed with transform (game.js): its entrance animates only opacity and the separate scale property. */
@keyframes carrot-pop{from{opacity:0;scale:.96}}
@keyframes carrot-card-in{from{opacity:0;transform:translateY(8px)}}
@keyframes carrot-toast-in{from{opacity:0;transform:translate(-50%,-6px)}}
@keyframes carrot-star{from{opacity:0;transform:translateY(4px) scale(.8)}}

/* Desktop: the board is landscape (12 × 8); the rail on its right holds the title, the numbers and the actions. */
@media (min-width:761px) and (min-height:501px), (min-width:1001px){
  .carrot-page.desktop-play-page > .shell > main{display:flex;flex-direction:column}
  .carrot-page.desktop-play-page .play-layout{
    --carrot-pad:10px;
    --play-width:max(480px,min(calc(100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 232px),calc((var(--desktop-game-height) - 2 * var(--carrot-pad)) * 1.5 + 2 * var(--carrot-pad))));
    --play-height:calc((var(--play-width) - 2 * var(--carrot-pad)) / 1.5 + 2 * var(--carrot-pad));
    margin-block:auto;
  }
  .carrot-page.desktop-play-page .game-panel{grid-template-rows:108px auto minmax(0,1fr) auto}
  :is(:lang(zh),:lang(ja)) .carrot-page.desktop-play-page .game-panel{grid-template-rows:76px auto minmax(0,1fr) auto}
  :lang(ja) .carrot-page.desktop-play-page .game-intro h1{font-size:24px;line-height:1.3;word-break:keep-all}
  .carrot-page.desktop-play-page .board-container{padding:var(--carrot-pad);border-radius:17px}
  .carrot-page.desktop-play-page .game-intro h1{font-size:28px;line-height:1.15}
  .carrot-page.desktop-play-page .game-help>summary{font-size:14px;color:var(--carrot-mute)}
  .carrot-page.desktop-play-page .game-help .rules-list{font-size:14px}
  .carrot-page.desktop-play-page .stats-row{gap:16px}
  .carrot-page.desktop-play-page .stat-label{font-size:14px;line-height:1.3;color:var(--carrot-mute)}
  .carrot-page.desktop-play-page .stat-value{font-size:30px}
  .carrot-page.desktop-play-page .game-panel-bottom{gap:12px}
  .carrot-page.desktop-play-page .game-panel-bottom>.game-status{min-height:42px;font-size:14px;line-height:1.5;color:var(--carrot-mute)}
  .carrot-page.desktop-play-page .game-panel-bottom .carrot-next{width:100%;height:44px;font-size:14px}
}
@media (min-width:761px) and (min-height:501px) and (orientation:portrait){
  .carrot-page.desktop-play-page .play-layout{
    --play-width:max(320px,min(calc(100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 232px),calc((var(--desktop-game-height) - 2 * var(--carrot-pad)) / 1.5 + 2 * var(--carrot-pad))));
    --play-height:calc((var(--play-width) - 2 * var(--carrot-pad)) * 1.5 + 2 * var(--carrot-pad));
  }
}
@media (min-width:761px) and (min-height:501px) and (max-height:650px), (min-width:1001px) and (max-height:650px){
  .carrot-page.desktop-play-page .stat-label{font-size:14px}
  .carrot-page.desktop-play-page .stat-value{font-size:24px}
}

/* Phones held upright: the map turns to fill the column (8 × 12), the actions sit under it. */
@media (max-width:760px){
  body.carrot-page{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .carrot-page .stats-row{display:flex;justify-content:space-between;align-items:baseline}
  .carrot-page .stats-row>div{gap:6px}
  .carrot-page .stat-label{font-size:14px}
  .carrot-page .stat-value{font-size:22px}
  .carrot-page .board-container{width:min(100%,calc((100dvh - 262px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3 + 8px));aspect-ratio:2 / 3;margin:6px auto 0;padding:4px;border-radius:14px}
  .carrot-canvas{border-radius:10px}
  .carrot-page .game-panel-bottom{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:min(100%,calc((100dvh - 262px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 2 / 3 + 8px));margin:8px auto 0;min-height:0}
  .carrot-page .game-panel-bottom>.game-status{min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .carrot-actions{grid-template-columns:minmax(0,1fr) 64px 76px}
  .carrot-page .carrot-next{grid-column:auto;min-height:46px}
  .carrot-page .carrot-tool{min-height:46px;height:46px}
  .carrot-card{padding:20px}
  .carrot-card h2{font-size:24px}
  .level-list{gap:10px;margin-top:14px}
  .level-row{gap:6px}
  .level-option{gap:4px;min-height:56px;padding:6px 2px}
  .menu-option{width:76px;min-height:88px}
  .menu-sell{width:66px}
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  body.carrot-page{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .carrot-page .play-layout{display:grid;grid-template-columns:auto 132px;grid-template-rows:auto auto minmax(0,1fr);gap:8px 16px;justify-content:center;align-items:start;max-width:none;width:100%}
  .carrot-page .play-column,.carrot-page .play-column>.game-panel{display:contents}
  .carrot-page .board-container{grid-column:1;grid-row:1 / 4;width:calc((100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.5 + 8px);max-width:calc(100vw - 180px);aspect-ratio:3 / 2;margin:0}
  .carrot-page .game-intro{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:0}
  .carrot-page .game-intro h1{font-size:20px;line-height:1.2}
  .carrot-page .game-help summary{min-height:36px;padding:0}
  .carrot-page .stats-row{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:0}
  .carrot-page .stats-row>div{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
  .carrot-page .stat-value{font-size:20px}
  .carrot-page .game-panel-bottom{grid-column:2;grid-row:3;align-self:end;display:flex;flex-direction:column;gap:6px;width:auto;margin:0}
  .carrot-page .game-panel-bottom>.game-status{display:none}
  .carrot-actions{grid-template-columns:1fr 1fr}
  .carrot-page .carrot-next{grid-column:1 / -1}
  .carrot-page :is(.carrot-next,.carrot-tool){min-height:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .carrot-menu,.carrot-card,.carrot-toast,.card-stars i{animation:none!important;transition:none!important}
  .carrot-page :is(.carrot-next,.carrot-tool,.menu-option,.level-option,.card-button){transition:none}
}
@media (forced-colors:active){
  .carrot-canvas{forced-color-adjust:none}
  .carrot-menu,.carrot-card,.carrot-toast{border:1px solid CanvasText}
}

/* Beside the frame's aside (game-frame.css, body.game-aside-beside): the frame's bar names the game and says how to
   play, so the page's own title and 玩法 step out of sight (the site's "…" still presses 玩法, which opens as a card in
   the board's corner). The game is one window, 24px from the panel and from the aside and as tall as the screen allows:
   along its top, inside it, the numbers, the words and the keys; under them the 3:2 board. */
body.game-aside-beside.carrot-page>[data-game-stage]{margin:0;padding:0 0 0 24px}
body.game-aside-beside.carrot-page.desktop-play-page>.shell>main{display:block;padding:0 0 24px}
body.game-aside-beside.carrot-page .play-layout{
  --stage-w:calc(100vw - var(--site-nav-offset,0px) - var(--game-aside-space,0px) - 24px);
  --stage-h:calc(100dvh - var(--site-header-h,60px) - 24px);
  --hud-h:56px;--hud-gap:0px;--hud-line:0px;
  --play-width:max(480px,min(calc(var(--stage-w) - 12px),calc((var(--stage-h) - var(--hud-h) - 6px - 2 * var(--carrot-pad)) * 1.5 + 2 * var(--carrot-pad))));
  --play-height:calc((var(--play-width) - 2 * var(--carrot-pad)) / 1.5 + 2 * var(--carrot-pad));
  width:calc(var(--play-width) + 12px);height:auto;margin:0 auto}
body.game-aside-beside.carrot-page .play-layout .play-column{height:auto;container-type:inline-size}
body.game-aside-beside.carrot-page .play-layout .game-panel{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:var(--hud-h) var(--play-height);gap:0 20px;height:auto;padding:0 6px 6px;border-radius:22px;background:#1b1b1b;box-shadow:inset 0 2px 5px #00000050,inset 0 -1px 2px #ffffff04}
body.game-aside-beside.carrot-page .play-layout .board-container{grid-column:1 / -1;grid-row:2;box-shadow:none}
body.game-aside-beside.carrot-page .play-layout .stats-row{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:24px;padding:0 0 0 14px}
body.game-aside-beside.carrot-page .play-layout .stats-row>div{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px}
body.game-aside-beside.carrot-page .play-layout .stat-label{font-size:14px;line-height:20px}
body.game-aside-beside.carrot-page .play-layout .stat-value{font-size:22px;line-height:28px}
body.game-aside-beside.carrot-page .play-layout .game-panel-bottom{display:contents}
body.game-aside-beside.carrot-page .play-layout .game-panel-bottom>.game-status{grid-column:2;grid-row:1;align-self:center;justify-self:end;min-width:0;min-height:0;max-height:20px;overflow:hidden;font-size:14px;line-height:20px;text-align:right;white-space:nowrap;text-overflow:ellipsis}
body.game-aside-beside.carrot-page .play-layout .carrot-actions{grid-column:3;grid-row:1;align-self:center;grid-template-columns:auto 56px 68px;gap:6px;padding:0 4px 0 0}
body.game-aside-beside.carrot-page .play-layout .carrot-actions :is(.carrot-next,.carrot-tool){min-height:40px;height:40px}
body.game-aside-beside.carrot-page .play-layout .game-panel-bottom .carrot-next{grid-column:auto;width:auto;min-width:112px}
/* The page's own title and 玩法: out of sight, still in the page; opened by the site's "…", 玩法 is a card in the corner. */
body.game-aside-beside.carrot-page .play-layout .game-intro{top:calc(var(--hud-h) + 14px);right:20px;z-index:30;width:auto;max-width:calc(var(--play-width) - 28px)}
body.game-aside-beside.carrot-page .play-layout .game-intro>h1,
body.game-aside-beside.carrot-page .play-layout .game-help:not([open])>summary:not(:focus-visible){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.game-aside-beside.carrot-page .play-layout .game-help{margin:0}
.carrot-page .game-help>summary:focus-visible{outline:2px solid var(--carrot-focus);outline-offset:2px}
body.game-aside-beside.carrot-page .play-layout .game-help:not([open])>summary:focus-visible{min-height:36px;padding:0 12px;border-radius:10px;background:var(--carrot-plate);color:var(--carrot-ink);line-height:36px}
body.game-aside-beside.carrot-page .play-layout .game-help[open]{position:static;width:min(360px,calc(var(--play-width) - 28px));max-height:calc(var(--play-height) - 28px);padding:12px 18px 14px;border-radius:14px;background:var(--carrot-plate);box-shadow:0 1px 2px #0000008c,0 10px 16px -10px #000000b3}
@media (forced-colors:active){
  body.game-aside-beside.carrot-page .play-layout :is(.game-help[open],.game-help:not([open])>summary:focus-visible){border:1px solid CanvasText}
}
/* Phones: the game keeps the whole screen; the frame's cards begin below it. */
@media (max-width:760px),(max-width:1000px) and (max-height:500px){
  body.game-framed.carrot-page>[data-game-stage]{min-height:100dvh}
}