@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #0d131b;
  --panel: #151f2a;
  --panel-light: #1c2935;
  --line: #314151;
  --text: #f3f7f5;
  --muted: #91a1ae;
  --lime: #c7f464;
  --orange: #ff9a62;
  --cyan: #66d6dc;
  --yellow: #f4ce5e;
  --red: #ff6e6e;
  --shadow: 0 22px 60px rgb(0 0 0 / 32%);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 1000px;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px),
    radial-gradient(circle at 75% 0%, #203141 0%, transparent 34%), var(--bg);
  background-size: 32px 32px, 32px 32px, auto, auto;
}
button { color: inherit; font: inherit; }
button:not(:disabled) { cursor: pointer; }
.is-hidden { display: none !important; }
.app-shell { width: min(1440px, calc(100% - 64px)); margin: 0 auto; }
.game-runtime-data { display: none; }

.app-header {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; border: 0; background: none; text-align: left; padding: 0; }
.brand-mark {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: #10150e; background: var(--lime); border-radius: 7px 13px 7px 13px;
  font: 800 24px/1 "Barlow Condensed", sans-serif; transform: rotate(-2deg);
}
.brand strong { display: block; font: 800 27px/1 "Barlow Condensed", sans-serif; letter-spacing: 2px; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font: 600 10px/1 "Barlow Condensed", sans-serif; letter-spacing: 2.4px; }
.header-status { display: flex; align-items: center; gap: 20px; color: var(--muted); font: 700 14px "Barlow Condensed"; letter-spacing: 1.5px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); font-weight: 800; }
.content-warning {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 11px 14px;
  border: 1px solid #756938; border-radius: 7px; background: #211f16; color: #d8d1aa;
  font-size: 12px; line-height: 1.6;
}
.content-warning strong { flex: none; color: var(--yellow); font: 800 12px "Barlow Condensed"; letter-spacing: 1.3px; }
.is-gameplay .content-warning { margin: 10px 0 0; }

.view { padding: 56px 0 72px; }
.view-heading { max-width: 680px; margin-bottom: 36px; }
.view-heading.compact { margin-top: 28px; }
.eyebrow { margin: 0 0 10px; color: var(--lime); font: 700 13px "Barlow Condensed"; letter-spacing: 2.5px; }
h1, h2 { font-family: "Barlow Condensed", "Noto Sans JP", sans-serif; }
.view-heading h1 { margin: 0; font-size: 42px; letter-spacing: .02em; }
.view-heading > p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); }
.creative-launch-button {
  min-width: 310px; display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 11px 14px;
  border: 1px solid #536342; border-radius: 7px; color: var(--text); background: #19251e; text-align: left;
}
.creative-launch-button:hover { border-color: var(--lime); transform: translateY(-1px); }
.creative-launch-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; color: #14200e; background: var(--lime); font: 800 25px/1 "Barlow Condensed"; }
.creative-launch-button strong, .creative-launch-button small { display: block; }
.creative-launch-button small { margin-top: 2px; color: var(--muted); font: 700 9px "Barlow Condensed"; letter-spacing: 1.5px; }
.creative-launch-button i { margin-left: auto; color: var(--lime); font-style: normal; }
.home-tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.home-tool-actions .creative-launch-button { margin-top: 0; }

.world-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.world-card {
  min-height: 420px; padding: 25px; overflow: hidden; position: relative;
  background: linear-gradient(145deg, #1b2934, #131c26); border: 1px solid #3b4d5e; border-radius: 12px;
  box-shadow: var(--shadow);
}
.world-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 60%, rgb(199 244 100 / 5%)); }
.world-card.is-locked { filter: saturate(.25); opacity: .72; }
.world-card-top { display: flex; justify-content: space-between; color: var(--muted); font: 700 13px "Barlow Condensed"; letter-spacing: 2px; }
.world-illustration { height: 150px; display: grid; place-items: center; margin: 22px 0; border: 1px solid var(--line); border-radius: 8px; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 2px, transparent 2px 14px); }
.world-illustration span { width: 88px; height: 88px; display: grid; place-items: center; border: 5px solid var(--lime); border-radius: 20px 8px 20px 8px; color: var(--lime); font: 800 58px/1 "Barlow Condensed"; transform: rotate(-3deg); }
.world-2 .world-illustration span { border-color: var(--orange); color: var(--orange); }
.world-card h2 { margin: 0; font-size: 31px; }
.world-card p { min-height: 47px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.world-progress { height: 4px; margin: 19px 0; overflow: hidden; background: #0b1118; border-radius: 3px; }
.world-progress i { display: block; height: 100%; background: var(--lime); }
.world-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.world-open-button { width: 100%; height: 46px; border: 0; border-radius: 5px; background: var(--lime); color: #11170c; font-weight: 800; }
.world-open-button:disabled { color: var(--muted); background: #25313c; }
.world-map-open-button { width: 100%; height: 46px; border: 1px solid #61784b; border-radius: 5px; color: var(--lime); background: #19251e; font-weight: 800; }
.world-map-open-button:hover:not(:disabled) { border-color: var(--lime); }
.world-map-open-button:disabled { border-color: var(--line); color: #6f7d87; background: #202a33; cursor: default; }

.text-button, .link-button { padding: 0; border: 0; background: none; color: var(--muted); font-weight: 700; }
.text-button:hover, .link-button:hover { color: var(--text); }
.stage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.stage-card {
  min-height: 200px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-align: left; transition: .18s ease;
}
.stage-card:not(:disabled):hover { border-color: var(--lime); transform: translateY(-3px); }
.stage-card.is-cleared { border-color: #526840; background: linear-gradient(145deg, #1b2a26, #141e25); }
.stage-card.is-bonus { border-color: #6b5d2f; background: linear-gradient(145deg, #252316, var(--panel)); }
.stage-card.is-bonus .stage-number, .stage-card.is-bonus .stage-status { color: #f2ca62; }
.stage-card.is-locked { opacity: .48; }
.stage-number { color: var(--muted); font: 800 31px "Barlow Condensed"; }
.stage-status { margin: 16px 0 12px; color: var(--lime); font: 700 11px "Barlow Condensed"; letter-spacing: 1.5px; }
.stage-card strong { font-size: 16px; }
.stage-card small { margin-top: 8px; color: var(--muted); line-height: 1.5; }

.game-view { padding-top: 28px; }
.is-gameplay .app-header { display: none; }
.is-gameplay .app-shell { width: min(1680px, calc(100% - 32px)); }
.is-gameplay .game-view { min-height: 100vh; padding: 12px 0; }
.minimal-game-toolbar {
  min-height: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 10px;
}
.minimal-tool-button {
  min-width: 42px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: rgb(23 34 44 / 88%);
  font: 800 11px "Barlow Condensed"; letter-spacing: 1px;
}
.minimal-tool-button:hover:not(:disabled) { border-color: var(--lime); color: var(--text); }
.minimal-tool-button:disabled { opacity: .34; }
.minimal-tool-button.danger:hover:not(:disabled) { border-color: var(--red); }
.minimal-back-button { justify-self: start; width: 42px; overflow: hidden; padding: 0; color: transparent; font-size: 0; }
.minimal-back-button::before { content: "←"; color: var(--muted); font: 800 20px/1 system-ui, sans-serif; }
.minimal-game-actions { justify-self: end; display: flex; gap: 7px; }
.minimal-zoom-controls { justify-self: center; }
.minimal-board-panel { position: relative; min-height: calc(100vh - 74px); display: flex; }
.minimal-board-panel .game-board-wrap {
  width: 100%; height: calc(100vh - 74px); margin-top: 0; border-color: rgb(49 65 81 / 55%); background: rgb(10 15 20 / 52%);
}
.game-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 22px; }
.stage-identity { text-align: center; }
.stage-identity .eyebrow { margin-bottom: 2px; }
.stage-identity h1 { margin: 0; font-size: 28px; }
.target-chip { justify-self: end; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #536342; border-radius: 7px; background: #19251e; }
.target-chip span { color: var(--muted); font: 700 11px "Barlow Condensed"; letter-spacing: 1.5px; }
.target-chip strong { color: var(--lime); font: 800 28px "Barlow Condensed"; }
.game-layout { display: grid; grid-template-columns: minmax(650px, 1fr) 280px; gap: 22px; align-items: start; }
.board-panel, .game-sidebar { border: 1px solid var(--line); background: rgb(19 29 39 / 93%); border-radius: 9px; }
.board-panel { position: relative; padding: 16px; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-start; }
.tutorial-banner { min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 8px 14px; color: #cbd6dc; font-size: 13px; text-align: center; }
.board {
  --columns: 9; --rows: 7;
  width: min(100%, calc(72vh * var(--columns) / var(--rows)));
  aspect-ratio: var(--columns) / var(--rows); display: grid;
  grid-template-columns: repeat(var(--columns), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  margin: auto; outline: none; border: 5px solid #0a0f14; box-shadow: 0 12px 28px rgb(0 0 0 / 38%);
}
.zoomable-board {
  --cell-size: 64px;
  width: calc(var(--columns) * var(--cell-size) + 10px);
  height: calc(var(--rows) * var(--cell-size) + 10px);
  max-width: none; max-height: none; aspect-ratio: auto; flex: none;
  grid-template-columns: repeat(var(--columns), var(--cell-size));
  grid-template-rows: repeat(var(--rows), var(--cell-size));
}
.zoomable-board .number-block { font-size: calc(var(--cell-size) * .47); white-space: nowrap; }
.zoomable-board .number-block.digits-medium { font-size: calc(var(--cell-size) * .34); }
.zoomable-board .number-block.digits-long { font-size: calc(var(--cell-size) * .23); }
.zoomable-board .number-block.digits-compact { font-size: calc(var(--cell-size) * .17); }
.zoomable-board .rotator, .zoomable-board .goal::before { font-size: calc(var(--cell-size) * .56); }
.map-view-toolbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.map-size-label { color: var(--muted); font: 700 10px "Barlow Condensed"; letter-spacing: 1.2px; white-space: nowrap; }
.pan-hint { color: #6f808c; font-size: 9px; white-space: nowrap; }
.zoom-controls { display: flex; align-items: center; gap: 5px; }
.zoom-controls button {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); background: #17222c; font: 800 13px "Barlow Condensed";
}
.zoom-controls button:hover { border-color: var(--lime); color: var(--lime); }
.zoom-controls .zoom-text-button { min-width: 44px; font-size: 10px; letter-spacing: .3px; }
.zoom-controls input[type="range"] { width: 104px; accent-color: var(--lime); cursor: pointer; }
.zoom-controls output { min-width: 39px; color: var(--lime); font: 700 11px "Barlow Condensed"; text-align: center; }
.game-map-toolbar { padding: 0 2px 7px; border-bottom: 1px solid rgb(49 65 81 / 72%); }
.game-board-wrap {
  height: 500px; min-height: 0; display: flex; align-items: safe center; justify-content: safe center; overflow: auto; margin-top: 10px;
  border: 1px solid #0a0f14; border-radius: 6px; background: #0e151c; overscroll-behavior: contain;
  scrollbar-color: #4b5e6d #111a22; scrollbar-width: thin;
  cursor: grab; user-select: none;
}
.game-board-wrap.is-panning, .game-board-wrap.is-panning * { cursor: grabbing !important; }
.cell { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; }
.cell > .rotator,
.cell > .goal,
.cell > .stage-gate,
.cell > .stage-gate-open-mark,
.cell > .number-block,
.cell > .operator-block,
.cell > .player { grid-area: 1 / 1; }
.floor { background: #253541; border: 1px solid rgb(255 255 255 / 3%); }
.floor:nth-child(odd) { background: #273844; }
.floor.is-rotator,
.floor.is-rotator:nth-child(odd) {
  background:
    linear-gradient(135deg, rgb(255 154 98 / 12%), transparent 55%),
    #3c3333;
  border-color: rgb(255 182 140 / 72%);
  box-shadow: inset 0 0 0 3px var(--orange), inset 0 0 20px rgb(255 154 98 / 26%), 0 0 12px rgb(255 154 98 / 16%);
}
.floor.is-goal,
.floor.is-goal:nth-child(odd) {
  background:
    linear-gradient(135deg, rgb(199 244 100 / 12%), transparent 55%),
    #263a3d;
  border-color: rgb(220 255 145 / 72%);
  box-shadow: inset 0 0 0 3px var(--lime), inset 0 0 20px rgb(199 244 100 / 26%), 0 0 12px rgb(199 244 100 / 16%);
}
.wall { background: linear-gradient(145deg, #566675, #34424e); border: 2px solid #17212a; box-shadow: inset 3px 3px rgb(255 255 255 / 8%), inset -3px -3px rgb(0 0 0 / 15%); }
.wall::after { content: ""; width: 58%; height: 2px; background: rgb(255 255 255 / 10%); transform: rotate(-18deg); }
.number-block {
  z-index: 5; width: 78%; height: 78%; display: grid; place-items: center;
  color: #152026; background: linear-gradient(145deg, #f2d376, #cda943); border: 2px solid #fff0ad; border-radius: 7px;
  box-shadow: inset 0 -5px rgb(111 79 22 / 20%), 0 4px 7px rgb(0 0 0 / 35%); font: 800 clamp(18px, 2.1vw, 34px) "Barlow Condensed";
}
.number-block.is-target { color: #16200f; background: linear-gradient(145deg, #dcff91, #a9d746); border-color: #eeffc9; }
.number-block.is-reacted { animation: result-appear .42s cubic-bezier(.2, .9, .3, 1.25); }
.number-block.is-transform-spin, .operator-block.is-transform-spin,
.number-block.is-fast-spin, .operator-block.is-fast-spin, .player.is-fast-spin {
  animation: transform-spin .8s linear forwards;
  will-change: transform, filter;
}
.number-block.is-transform-spin, .operator-block.is-transform-spin {
  outline: 3px solid rgb(255 154 98 / 72%);
  outline-offset: 3px;
}
.rotation-content { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
.rotation-content.is-before { animation: content-before .8s linear forwards; }
.rotation-content.is-after { opacity: 0; animation: content-after .8s linear forwards; }
.operator-block {
  z-index: 5; width: 78%; height: 78%; position: relative; display: grid; place-items: center;
  border: 2px solid #b9f5f3; border-radius: 9px; color: #e9ffff;
  background: linear-gradient(145deg, #31757b, #204c55);
  box-shadow: inset 0 -5px rgb(0 0 0 / 18%), 0 4px 7px rgb(0 0 0 / 35%);
}
.operator-shape { position: absolute; inset: 0; display: block; transform-origin: center; }
.operator-shape::before, .operator-shape::after {
  content: ""; position: absolute; left: 21%; top: 44%; width: 58%; height: 12%;
  border-radius: 999px; background: currentColor; transform-origin: center;
}
.operator-shape.family-cross.variant-0::before { transform: rotate(0deg); }
.operator-shape.family-cross.variant-0::after { transform: rotate(90deg); }
.operator-shape.family-cross.variant-1::before { transform: rotate(45deg); }
.operator-shape.family-cross.variant-1::after { transform: rotate(135deg); }
.operator-shape.family-bar::after { display: none; }
.operator-shape.family-bar.variant-0::before { transform: rotate(0deg); }
.operator-shape.family-bar.variant-1::before { transform: rotate(90deg); }
.rotator {
  z-index: 1; width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--orange); font: 800 clamp(30px, 3.4vw, 54px)/1 sans-serif;
  text-shadow: 0 0 12px rgb(255 154 98 / 48%); pointer-events: none;
  animation: rotator-pulse 2.2s ease-in-out infinite;
}
@keyframes transform-spin {
  0% { transform: rotate(var(--facing-angle, 0deg)) scale(1); filter: blur(0); }
  14% { transform: rotate(calc(var(--facing-angle, 0deg) + 42deg)) scale(.98); filter: blur(0); }
  44% { transform: rotate(calc(var(--facing-angle, 0deg) + 356deg)) scale(.93); filter: blur(.45px); }
  66% { transform: rotate(calc(var(--facing-angle, 0deg) + 598deg)) scale(.94); filter: blur(.35px); }
  82% { transform: rotate(calc(var(--facing-angle, 0deg) + 690deg)) scale(.97); filter: blur(.15px); }
  93% { transform: rotate(calc(var(--facing-angle, 0deg) + 714deg)) scale(.99); filter: blur(0); }
  100% { transform: rotate(calc(var(--facing-angle, 0deg) + 720deg)) scale(1); filter: blur(0); }
}
@keyframes content-before { 0%, 43% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes content-after { 0%, 43% { opacity: 0; } 57%, 100% { opacity: 1; } }
@keyframes result-appear { from { opacity: .15; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes rotator-pulse { 50% { box-shadow: 0 0 14px rgb(255 154 98 / 25%); } }
.player {
  --facing-angle: 0deg;
  z-index: 8; width: 74%; height: 74%; position: relative;
  transform: rotate(var(--facing-angle)); transform-origin: center;
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 42%));
}
.player.facing-up { --facing-angle: 180deg; }
.player.facing-right { --facing-angle: -90deg; }
.player.facing-left { --facing-angle: 90deg; }
.player::before, .player::after {
  content: ""; position: absolute; clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.player::before {
  inset: 0; z-index: 1; background: linear-gradient(145deg, #f6fbfc 0%, #c9d5da 48%, #748791 100%);
}
.player::after {
  inset: 9%; z-index: 2; background: linear-gradient(145deg, #5f747f, #263b46 62%, #172832);
  box-shadow: inset 0 0 0 2px rgb(225 244 245 / 35%);
}
.player i {
  position: absolute; z-index: 3; width: 36%; aspect-ratio: 1; left: 32%; top: 27%;
  border: 2px solid #b9f5f3; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #e4ffff 0 8%, #68f6f1 20%, #20bbc3 52%, #0c505c 72%);
  box-shadow: 0 0 10px rgb(93 244 239 / 72%), inset 0 0 0 3px rgb(9 34 42 / 42%);
}
.player b {
  position: absolute; z-index: 4; width: 25%; height: 15%; left: 37.5%; bottom: 7%;
  background: var(--lime); clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 36%, 50% 88%, 0 36%);
  filter: drop-shadow(0 0 3px rgb(199 244 100 / 58%));
}
.goal { z-index: 1; width: 100%; height: 100%; position: relative; opacity: .92; pointer-events: none; }
.goal::before {
  content: attr(data-target); position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--lime); font: 800 clamp(30px, 3.4vw, 54px) "Barlow Condensed";
  text-shadow: 0 0 10px rgb(199 244 100 / 44%);
}
.cell.is-stage-gate-closed,
.cell.is-stage-gate-closed:nth-child(odd) {
  background: repeating-linear-gradient(135deg, #303b44 0 8px, #253038 8px 16px);
  box-shadow: inset 0 0 0 3px #e8b85c, inset 0 0 18px rgb(232 184 92 / 20%);
}
.stage-gate {
  z-index: 5; width: 78%; height: 78%; display: grid; place-items: center;
  border: 2px solid #ffd47a; border-radius: 5px; color: #fff0bf; background: #3a3021;
  font: 800 calc(var(--cell-size) * .28) "Barlow Condensed"; box-shadow: inset 0 0 0 2px rgb(0 0 0 / 24%);
}
.cell.is-stage-gate-open { box-shadow: inset 0 0 0 2px rgb(232 184 92 / 28%); }
.stage-gate-open-mark { z-index: 1; color: #a88c56; font-size: calc(var(--cell-size) * .3); opacity: .5; }
.port { z-index: 2; width: 84%; height: 84%; position: relative; display: grid; place-items: center; border: 2px solid var(--cyan); border-radius: 5px; background: rgb(102 214 220 / 12%); }
.port b { font: 800 clamp(11px, 1.1vw, 17px) "Barlow Condensed"; }
.port i { position: absolute; right: 3px; bottom: 1px; color: var(--cyan); font: normal 800 clamp(10px, 1vw, 15px) "Barlow Condensed"; }
.port-output { border-style: dashed; }
.port-output b { font-size: clamp(8px, .8vw, 12px); }
.port.is-loaded { background: #d9edeb; color: #132128; border-color: white; }
.port em { position: absolute; z-index: 7; font: normal 800 clamp(17px, 1.8vw, 29px) "Barlow Condensed"; }
.device-color-1 { --device-accent: var(--orange); border-color: var(--orange); }
.port.device-color-1 i { color: var(--orange); }
.device-color-2 { --device-accent: #b499ed; border-color: #b499ed; }
.port.device-color-2 i { color: #b499ed; }
.game-message { position: absolute; left: 50%; bottom: 24px; z-index: 20; padding: 9px 16px; border-radius: 5px; background: #e8f0ed; color: #132128; font-size: 13px; font-weight: 700; opacity: 0; transform: translate(-50%, 8px); transition: .2s; pointer-events: none; }
.is-gameplay:not(.is-gameplay-preview) .game-message { display: none; }
.game-message.is-visible { opacity: 1; transform: translate(-50%, 0); }
.game-message.is-warning { background: var(--orange); }

.game-sidebar { min-height: 620px; padding: 18px; }
.panel-title { display: flex; justify-content: space-between; color: var(--muted); font: 700 11px "Barlow Condensed"; letter-spacing: 1.5px; }
.device-list { display: grid; gap: 10px; margin-top: 12px; }
.piece-summary { display: grid; gap: 9px; margin-top: 12px; }
.piece-summary div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; background: #101820; }
.piece-summary span { display: block; color: var(--muted); font: 700 9px "Barlow Condensed"; letter-spacing: 1.3px; }
.piece-summary strong { display: block; min-height: 24px; margin-top: 4px; font: 800 20px "Barlow Condensed"; word-break: break-word; }
.last-equation { min-height: 54px; display: grid; place-items: center; margin-top: 10px; padding: 9px; border: 1px solid #536342; border-radius: 5px; color: var(--lime); background: #172119; font: 700 13px/1.5 "Noto Sans JP", sans-serif; text-align: center; }
.rule-card { margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #111a22; }
.rule-card > span { font: 700 9px "Barlow Condensed"; letter-spacing: 1.3px; }
.rule-card p { margin: 7px 0 0; font-size: 10px; }
.rule-card b { color: var(--text); }
.device-card { --device-accent: var(--cyan); padding: 12px; border: 1px solid var(--device-accent); border-radius: 6px; background: rgb(102 214 220 / 5%); }
.device-card.device-color-1 { --device-accent: var(--orange); }
.device-card.device-color-2 { --device-accent: #b499ed; }
.device-name { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 700 10px "Barlow Condensed"; letter-spacing: 1px; }
.device-name strong { color: var(--device-accent); font-size: 24px; }
.device-formula { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.device-formula span { min-width: 36px; text-align: center; }
.device-formula small { display: block; color: var(--muted); font: 700 8px "Barlow Condensed"; }
.device-formula b { display: block; font: 800 22px "Barlow Condensed"; }
.device-formula em { color: var(--device-accent); font: normal 800 18px "Barlow Condensed"; }
.stats-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0; }
.stats-panel div { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: #101820; }
.stats-panel span { display: block; color: var(--muted); font: 700 9px "Barlow Condensed"; letter-spacing: 1px; }
.stats-panel strong { display: block; margin-top: 3px; font: 800 24px "Barlow Condensed"; }
.game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.action-button { height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 5px; background: #202d38; font: 800 12px "Barlow Condensed"; letter-spacing: 1px; }
.action-button:hover:not(:disabled) { border-color: var(--lime); }
.action-button:disabled { opacity: .36; }
.action-button.danger:hover { border-color: var(--red); }
kbd { padding: 3px 6px; color: var(--muted); border: 1px solid #526170; border-radius: 3px; background: #101820; font: 700 11px "Barlow Condensed"; }
.control-hint { color: var(--muted); font-size: 11px; text-align: center; }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(5 9 13 / 78%); backdrop-filter: blur(6px); }
.modal-card { position: relative; width: min(520px, 100%); padding: 36px; border: 1px solid #465968; border-radius: 12px; background: linear-gradient(145deg, #1d2a35, #111922); box-shadow: var(--shadow); text-align: center; }
.modal-card h2 { margin: 8px 0; font-size: 36px; }
.modal-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; }
.clear-ten { width: 100px; height: 100px; display: grid; place-items: center; margin: 18px auto 10px; color: #17200f; background: var(--lime); border-radius: 14px 28px 14px 28px; font: 800 52px "Barlow Condensed"; transform: rotate(-3deg); box-shadow: 0 0 44px rgb(199 244 100 / 22%); }
.modal-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 25px; }
.primary-button, .secondary-button { min-height: 48px; padding: 10px 18px; border-radius: 5px; font-weight: 800; }
.primary-button { border: 0; color: #14200e; background: var(--lime); }
.secondary-button { border: 1px solid var(--line); background: #202c37; }
.link-button { margin-top: 18px; font-size: 12px; text-decoration: underline; }
.world-clear-card .primary-button { width: 100%; margin-top: 12px; }
.help-card { text-align: left; }
.help-card ol { padding-left: 24px; color: #dbe4e5; line-height: 1.9; }
.help-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.help-rules code { padding: 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--lime); background: #101820; font-size: 11px; }
.help-card .primary-button { width: 100%; margin-top: 12px; }
.modal-close { position: absolute; right: 16px; top: 12px; border: 0; background: none; color: var(--muted); font-size: 28px; }
.fatal-error { padding: 80px; color: var(--red); text-align: center; }

.creative-view { padding-top: 28px; }
.creative-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 22px; }
.creative-tabs { width: max-content; display: flex; gap: 4px; margin: -8px auto 18px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: #101820; }
.creative-tab { min-width: 150px; padding: 9px 16px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.creative-tab:hover { color: var(--text); }
.creative-tab.is-active { color: #14200e; background: var(--lime); }
.creative-tab-panel.is-hidden { display: none; }
.save-status { justify-self: end; color: var(--muted); font-size: 11px; font-weight: 700; }
.save-status.is-verified { color: var(--lime); }
.creative-layout { display: grid; grid-template-columns: 292px minmax(650px, 1fr); gap: 22px; align-items: start; }
.creative-sidebar, .creative-workspace { border: 1px solid var(--line); border-radius: 9px; background: rgb(19 29 39 / 93%); }
.creative-sidebar { padding: 16px; }
.creator-section + .creator-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.creator-label { display: grid; gap: 5px; margin-top: 11px; color: var(--muted); font-size: 10px; font-weight: 700; }
.creator-label input, .tool-number-input input {
  width: 100%; min-width: 0; height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px;
  outline: 0; color: var(--text); background: #0f171f; font: 700 14px "Noto Sans JP";
}
.creator-label select {
  width: 100%; min-width: 0; height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px;
  outline: 0; color: var(--text); background: #0f171f; font: 700 11px "Noto Sans JP";
}
.creator-label select:focus { border-color: var(--lime); }
.creator-label input:focus, .tool-number-input input:focus, .json-card textarea:focus { border-color: var(--lime); }
.creator-field-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: end; gap: 7px; }
.creator-field-row > span { padding-bottom: 10px; color: var(--muted); }
.mini-button { height: 36px; padding: 0 10px; border: 1px solid #536342; border-radius: 4px; color: var(--lime); background: #19251e; font-size: 11px; font-weight: 800; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.tool-button {
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px;
  border: 1px solid var(--line); border-radius: 5px; color: #d8e2e4; background: #202d38; font-size: 11px; font-weight: 700;
}
.tool-button:hover { border-color: #718391; }
.tool-button.is-active { border-color: var(--lime); color: var(--lime); background: #1c2a23; box-shadow: inset 0 0 0 1px rgb(199 244 100 / 18%); }
.tool-button b { min-width: 19px; font: 800 18px/1 "Barlow Condensed"; }
.tool-wall, .tool-floor { width: 18px; height: 18px; border: 2px solid #17212a; background: #526372; }
.tool-floor { border-color: #3c5060; background: #253541; }
.tool-number-input { min-height: 48px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 9px; }
.tool-number-input input { height: 34px; padding-inline: 7px; }
.operator-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.operator-tools .operator-tool { position: relative; }
.operator-tools .operator-shape { position: relative; inset: auto; width: 28px; height: 28px; flex: none; }
.creator-subtitle { margin: 15px 0 8px; color: var(--text); font-size: 11px; font-weight: 700; }
.creator-subtitle small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.compact-tools { margin-top: 9px; }
.creator-legend p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.creative-workspace { min-height: 680px; padding: 16px; }
.creative-board-wrap {
  height: 540px; min-height: 0; display: flex; align-items: safe center; justify-content: safe center; overflow: auto; border-radius: 6px;
  background: #0e151c; overscroll-behavior: contain; scrollbar-color: #4b5e6d #111a22; scrollbar-width: thin;
  cursor: grab; user-select: none;
}
.creative-board-wrap.is-panning, .creative-board-wrap.is-panning * { cursor: grabbing !important; }
.creative-board { max-width: none; max-height: none; }
.creative-cell { padding: 0; overflow: hidden; color: inherit; }
.creative-cell::before { content: attr(data-x) "," attr(data-y); position: absolute; left: 3px; top: 2px; z-index: 10; color: rgb(255 255 255 / 22%); font: 600 7px "Barlow Condensed"; pointer-events: none; }
.creative-cell > * { pointer-events: none; }
.creative-board.is-multi-select-mode { touch-action: none; }
.creative-board.is-multi-select-mode .creative-cell { cursor: crosshair; }
.creative-board.is-multi-select-mode .creative-cell.is-multi-selected {
  z-index: 11; outline: 3px solid var(--lime); outline-offset: -4px;
  box-shadow: inset 0 0 16px rgb(199 244 100 / 24%);
}
.creative-board.is-multi-select-mode .creative-cell.is-multi-move-target:not(.is-multi-selected) {
  z-index: 10; outline: 3px dashed var(--cyan); outline-offset: -5px;
  box-shadow: inset 0 0 13px rgb(102 214 220 / 20%);
}
.creative-validation { min-height: 57px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 5px; background: #111a22; }
.creative-validation strong { color: var(--muted); font-size: 12px; white-space: nowrap; }
.creative-validation span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.creative-validation.is-valid { border-color: #536b3d; background: #172119; }
.creative-validation.is-valid strong { color: var(--lime); }
.creative-validation.has-warning { border-color: #756938; background: #211f16; }
.creative-validation.has-warning strong { color: var(--yellow); }
.creative-validation.is-invalid { border-color: #7c4444; background: #25191b; }
.creative-validation.is-invalid strong { color: var(--red); }
.creative-actions { display: grid; grid-template-columns: auto auto auto auto 1fr auto auto; gap: 9px; margin-top: 12px; }
.creative-actions button { min-height: 44px; }
.creative-actions button:disabled { opacity: .38; cursor: default; }
.history-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.history-button kbd { padding: 2px 4px; font-size: 8px; }
.json-card { width: min(720px, 100%); text-align: left; }
.json-card textarea { width: 100%; height: 330px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: #d9e9e5; background: #0c1319; font: 12px/1.55 ui-monospace, Consolas, monospace; }
.json-message { min-height: 20px; margin-top: 7px; color: var(--lime); font-size: 11px; }
.json-actions { margin-top: 8px; }
.world-stage-settings { padding-bottom: 2px; }
.stage-setting-hint { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.world-editor-board .world-cell { overflow: visible; }
.world-cell > * { grid-area: 1 / 1; }
.world-cell.is-world-stage,
.world-cell.is-world-stage:nth-child(odd) { background: #233d49; box-shadow: inset 0 0 0 2px rgb(102 214 220 / 42%); }
.world-stage-block {
  z-index: 4; width: 82%; height: 82%; display: grid; place-items: center; align-content: center; gap: 1px;
  border: 2px solid #b9f5f3; border-radius: 7px; color: #eaffff; background: linear-gradient(145deg, #31757b, #204c55);
  box-shadow: inset 0 -4px rgb(0 0 0 / 18%), 0 4px 7px rgb(0 0 0 / 35%);
}
.world-stage-block b { font: 800 calc(var(--cell-size) * .27) "Barlow Condensed"; }
.world-stage-block.is-cleared b::after { content: " ✓"; color: var(--lime); }
.world-stage-block.is-locked {
  border-color: #70808a; color: #9aa8ae; background: linear-gradient(145deg, #394750, #26323a);
  box-shadow: inset 0 -4px rgb(0 0 0 / 22%);
}
.world-stage-block.is-locked b::after { content: " 🔒"; font-size: .62em; }
.world-cell.is-world-stage-locked,
.world-cell.is-world-stage-locked:nth-child(odd) { background: #29343a; box-shadow: inset 0 0 0 2px rgb(112 128 138 / 34%); }
.world-cell.is-world-stage-cleared { background: #2b3a33; }
.world-editor-board .world-cell.is-stage-move-source { outline: 3px solid var(--lime); outline-offset: -4px; }
.world-editor-board .world-cell.is-stage-edit-selected { outline: 3px solid #b9f5f3; outline-offset: -4px; }
.stage-edit-status { margin: 0 0 8px; color: #b9f5f3; font-size: 10px; line-height: 1.5; }
.stage-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.hub-world-only { display: none !important; }
#creative-world-panel.is-hub-editor .hub-world-only { display: block !important; }
#creative-world-panel.is-hub-editor .tool-button.hub-world-only { display: grid !important; }
#creative-world-panel.is-hub-editor .regular-world-only { display: none !important; }
.world-stage-anchor {
  z-index: 2; align-self: end; margin-bottom: 4%; padding: 1px 4px; border-radius: 4px;
  color: #b9f5f3; background: rgb(10 28 33 / 82%); font: 800 calc(var(--cell-size) * .14) "Barlow Condensed";
}
.world-stage-anchor.is-cleared::after { content: " ✓"; color: var(--lime); }
.world-cell.is-adjacent-entry { box-shadow: inset 0 0 0 3px #b9f5f3, inset 0 0 20px rgb(102 214 220 / 22%); }
.world-cell.is-world-portal,
.world-cell.is-world-portal:nth-child(odd) { background: #332e52; box-shadow: inset 0 0 0 2px rgb(179 159 255 / 55%); }
.world-portal-block {
  z-index: 4; width: 82%; height: 82%; display: grid; place-items: center; border: 2px solid #c5b7ff;
  border-radius: 50% 50% 8px 8px; color: #f3efff; background: linear-gradient(145deg, #6f5eb0, #40356f);
  font: 800 calc(var(--cell-size) * .2) "Barlow Condensed"; box-shadow: inset 0 -4px rgb(0 0 0 / 18%);
}
.world-cell.is-world-portal-raised,
.world-cell.is-world-portal-raised:nth-child(odd) {
  background: #332e52; border: 1px solid rgb(179 159 255 / 24%);
  box-shadow: inset 0 0 0 2px rgb(179 159 255 / 55%);
}
.world-portal-block.is-raised { box-shadow: inset 0 -4px rgb(0 0 0 / 18%), 0 0 12px rgb(179 159 255 / 42%); }
.world-replacement { z-index: 4; }
.world-cell.is-world-gate-closed,
.world-cell.is-world-gate-closed:nth-child(odd) {
  background: repeating-linear-gradient(135deg, #303b44 0 8px, #253038 8px 16px);
  box-shadow: inset 0 0 0 3px #e8b85c, inset 0 0 18px rgb(232 184 92 / 20%);
}
.world-gate {
  z-index: 5; width: 78%; height: 78%; display: grid; place-items: center;
  border: 2px solid #ffd47a; border-radius: 5px; color: #fff0bf; background: #3a3021;
  font: 800 calc(var(--cell-size) * .28) "Barlow Condensed"; box-shadow: inset 0 0 0 2px rgb(0 0 0 / 24%);
}
.world-cell.is-world-gate-open { box-shadow: inset 0 0 0 2px rgb(232 184 92 / 28%); }
.world-gate-open-mark { z-index: 1; color: #a88c56; font-size: calc(var(--cell-size) * .3); opacity: .5; }
.world-cell.is-world-goal,
.world-cell.is-world-goal:nth-child(odd) { box-shadow: inset 0 0 0 3px var(--lime), inset 0 0 20px rgb(199 244 100 / 18%); }
.world-goal { z-index: 2; color: var(--lime); font: 800 calc(var(--cell-size) * .58) "Barlow Condensed"; text-shadow: 0 0 13px rgb(199 244 100 / 55%); }
.world-editor-actions { grid-template-columns: auto auto auto auto auto 1fr auto auto; }
.world-play-panel { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: rgb(19 29 39 / 93%); }
.world-play-toolbar { padding: 0 2px 10px; }
.world-play-board-wrap { height: min(68vh, 650px); margin-top: 0; }
.world-play-board .number-block, .world-play-board .operator-block { font-size: calc(var(--cell-size) * .47); }
.world-play-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 12px 4px 0; }
.world-play-footer p { margin: 0; color: var(--muted); font-size: 11px; }
.world-play-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.world-play-footer button { min-width: 150px; }
.world-play-footer .history-button { min-width: 112px; }
.world-play-footer button:disabled { opacity: .4; cursor: default; }
.world-play-footer .dev-progress-toggle { min-width: 142px; border-color: #6e5d32; color: #f1cb69; }
.world-play-footer .dev-progress-toggle.is-active { border-color: var(--lime); color: #14200e; background: var(--lime); }

@media (max-height: 820px) {
  .app-header { height: 72px; }
  .game-view { padding-top: 18px; }
  .board-panel, .game-sidebar { min-height: 540px; }
  .board:not(.zoomable-board) { width: min(100%, calc(65vh * var(--columns) / var(--rows))); }
  .game-board-wrap { height: 420px; }
  .minimal-board-panel, .minimal-board-panel .game-board-wrap { min-height: calc(100vh - 74px); height: calc(100vh - 74px); }
  .creative-workspace { min-height: 590px; }
  .creative-board-wrap { height: 450px; }
}