@import url('./fonts/fonts.css');

:root {
  --ink: #070b17;
  --ink-soft: #0d1425;
  --panel: #111b2f;
  --panel-2: #17233b;
  --line: #334566;
  --text: #edf3ff;
  --muted: #9baac2;
  --gold: #ffd13c;
  --gold-2: #ffeb80;
  --red: #f25545;
  --green: #4de1a5;
  --sky: #6ed0e7;
  --purple: #9b86f9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(76, 117, 185, .22), transparent 27rem),
    radial-gradient(circle at 86% 14%, rgba(188, 84, 77, .13), transparent 24rem),
    var(--ink);
  font-family: 'Chakra Petch', 'Trebuchet MS', sans-serif;
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.site-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.3) .55px, transparent .6px);
  background-size: 5px 5px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1220px, calc(100% - 36px));
  margin: 18px auto 0;
  padding: 12px 16px 12px 18px;
  background: rgba(10, 17, 31, .92);
  border: 1px solid #304260;
  border-bottom-color: #566b91;
  border-radius: 13px;
  box-shadow: 0 18px 40px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 225px; }
.brand strong { display: block; color: var(--gold); font: 700 18px/1 'Space Mono', monospace; letter-spacing: -1.2px; text-shadow: 2px 2px 0 #4c2a25; }
.brand small { display: block; margin-top: 6px; color: #71829c; font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1px; }
.brand-mark { position: relative; display: grid; width: 40px; height: 40px; place-items: center; background: var(--red); border: 2px solid var(--gold); border-radius: 9px; box-shadow: 3px 3px 0 #571d25; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ''; position: absolute; display: block; background: #fff1dd; }
.brand-mark::before { width: 21px; height: 9px; top: 9px; border-radius: 9px 9px 4px 4px; box-shadow: -6px 3px 0 -2px #fff1dd, 6px 3px 0 -2px #fff1dd; }
.brand-mark::after { width: 12px; height: 12px; bottom: 7px; border-radius: 2px 2px 6px 6px; }
.brand-mark span { width: 4px; height: 6px; top: 11px; background: var(--red); box-shadow: 7px 0 0 var(--red); z-index: 1; }

.topbar-actions, .hud-cluster { display: flex; align-items: center; }
.topbar-actions { gap: 8px; }
.hud-cluster { gap: 18px; margin-right: 8px; }
.hud-readout { min-width: 52px; text-align: center; }
.hud-label { display: block; margin-bottom: 5px; color: #71839f; font: 700 8px/1 'Space Mono', monospace; letter-spacing: 1px; }
.hud-readout strong { color: #f4f6fb; font: 700 15px/1 'Space Mono', monospace; text-shadow: 0 0 10px rgba(255,255,255,.2); }
.compact-readout strong { color: var(--gold); text-shadow: 0 0 12px rgba(255,209,60,.4); }
.hud-coin, .hud-heart { margin-right: 5px; color: var(--gold-2); font-size: 13px; display: inline-block; }
.hud-coin { animation: coin-spin 2.2s linear infinite; }
.hud-heart { color: var(--red); animation: heartbeat 1.5s ease-in-out infinite; }
.time-readout strong { color: var(--green); text-shadow: 0 0 12px rgba(77,225,165,.4); }
.icon-button, .restart-button { cursor: pointer; }
.icon-button { width: 37px; height: 37px; border-radius: 8px; font-size: 13px; font-weight: 700; }

.icon-button.is-active { --glass-ink: #fff0bf; --glass-rim: #ffe2a680; }
.restart-button { height: 37px; padding: 0 14px; font: 700 10px/1 'Chakra Petch', sans-serif; }



.page-content { width: min(1220px, calc(100% - 36px)); margin: 0 auto; }
.game-section { padding: 58px 0 0; }
.section-kicker { display: flex; align-items: center; gap: 9px; color: var(--green); font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.3px; }
.section-kicker span { width: 18px; height: 2px; background: var(--green); box-shadow: 5px 0 0 rgba(77,225,165,.25); }
.game-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 14px 0 25px; }
h1, h2, h3, p { margin: 0; }
h1 { color: #f8fbff; font-size: clamp(32px, 5vw, 58px); line-height: .93; letter-spacing: -2px; font-weight: 600; }
h1 em, h2 em { color: var(--gold); font-style: normal; }
.game-heading-row p { margin-top: 13px; color: var(--muted); font-size: 15px; letter-spacing: .2px; }
.mission-chip { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #34506c; border-radius: 6px; color: #b9cce3; background: rgba(16, 35, 52, .7); font: 700 9px/1 'Space Mono', monospace; letter-spacing: .5px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.mission-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse-dot 1.8s infinite; }

.arcade-frame { position: relative; padding: 22px 22px 17px; border: 1px solid #7a3a46; border-radius: 18px; background: linear-gradient(135deg, #992934 0%, #4a1926 50%, #1f1224 100%); box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 40px rgba(184, 48, 62, .2), inset 0 1px rgba(255,235,128,.2), inset 0 -12px 20px rgba(0,0,0,.3); }
.arcade-frame::before { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid rgba(255, 211, 60, .5); border-radius: 13px; box-shadow: inset 0 0 12px rgba(255,211,60,.15); }
.frame-rivets { position: absolute; inset: 10px 14px auto; display: flex; justify-content: space-between; pointer-events: none; }
.frame-rivets i { width: 8px; height: 8px; border: 1px solid #f0b86e; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd98a, #80343a); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.screen-header, .screen-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 10px; color: #edc767; font: 700 9px/1 'Space Mono', monospace; letter-spacing: .7px; }
.fx-badge { display: inline-block; padding: 2px 7px; background: linear-gradient(135deg, #ffd13c, #ff6b3d); color: #140b08; border-radius: 4px; font-weight: 700; font-size: 8px; letter-spacing: 1px; box-shadow: 0 0 12px rgba(255, 209, 60, 0.6); }
.screen-tip { color: #d698a6; font-size: 8px; }
.screen-shell { position: relative; overflow: hidden; border: 4px solid #141424; border-radius: 12px; background: #081327; box-shadow: 0 0 0 2px #d49b42, 0 18px 36px rgba(0,0,0,.5), inset 0 0 36px #030712; }
#game-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: auto; image-rendering: -webkit-optimize-contrast; background: #1a5ec9; }
.scanlines { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; display: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(4, 9, 19, .55) 3px, transparent 4px); mix-blend-mode: multiply; transition: opacity .2s ease; }
.arcade-frame.crt-active .scanlines { display: block; opacity: .24; }
.arcade-frame.crt-active #game-canvas { filter: contrast(1.06) brightness(1.02) saturate(1.08); }
.screen-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 22px; background: rgba(5, 11, 24, .82); backdrop-filter: blur(5px); transition: opacity .25s ease, visibility .25s ease; }
.screen-overlay.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.overlay-panel { width: min(580px, 100%); padding: 28px 34px 24px; text-align: center; border: 1px solid #647caa; border-radius: 12px; background: rgba(10, 18, 36, .94); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px rgba(77,167,255,.15), inset 0 0 0 5px rgba(13, 25, 48, .9); }
.overlay-stamp { display: inline-block; padding: 7px 14px; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.4px; box-shadow: 0 0 15px rgba(255,209,60,.25); }
.overlay-icon { margin: 18px auto 10px; color: var(--gold); font-size: 38px; line-height: 1; text-shadow: 0 0 24px rgba(255,209,60,.85); animation: twinkle 1.8s ease-in-out infinite; }
.overlay-eyebrow { color: var(--green); font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.4px; }
.overlay-panel #overlay-title { margin-top: 12px; color: #fff8d6; font: 700 clamp(26px, 4vw, 46px)/.98 'Space Mono', monospace; letter-spacing: -2px; text-shadow: 3px 3px 0 #633338, 0 0 20px rgba(255,209,60,.3); }
.overlay-panel #overlay-title span { color: var(--gold); }
.overlay-copy { max-width: 465px; margin: 15px auto 20px; color: #b5c6dd; font-size: 14px; line-height: 1.5; }
.primary-button { padding: 15px 26px; cursor: pointer; font: 700 12px/1.2 'Chakra Petch', sans-serif; letter-spacing: .06em; }

.primary-button span { margin-left: 12px; font-size: 16px; }
.overlay-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; color: #8798b3; font: 700 9px/1 'Space Mono', monospace; }
.overlay-controls b { color: #f9fafc; }
.screen-footer { padding: 12px 10px 0; }
.objective { display: flex; align-items: center; gap: 7px; color: #a6b5cc; font-size: 9px; }
.objective b { color: #f2cb54; }
.objective-icon { color: var(--gold); font-size: 14px; }
.progress-track { flex: 1; max-width: 400px; height: 6px; overflow: hidden; border-radius: 6px; background: #201323; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--green)); box-shadow: 0 0 10px rgba(77,225,165,.6); transition: width .25s ease; }
.distance-readout { color: #a69cb4; font: 700 9px/1 'Space Mono', monospace; }

.control-deck { display: flex; align-items: center; gap: 18px; min-height: 68px; padding: 13px 5px 0; }
.deck-label { color: #8e9bb0; font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1px; white-space: nowrap; }
.led { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(242,85,69,.9); animation: pulse-dot 1.5s infinite; }
.touch-controls { display: flex; gap: 8px; }
.touch-button { min-width: 44px; height: 48px; padding: 0 12px; cursor: pointer; touch-action: none; user-select: none; font: 700 18px/1 'Chakra Petch', sans-serif; }

.touch-button small { display: block; margin-top: 2px; color: #899ab7; font: 700 7px/1 'Space Mono', monospace; }
.jump-button { min-width: 128px; font-size: 11px; }



.keyboard-hint { margin-left: auto; color: #8190a8; font: 700 9px/1 'Space Mono', monospace; white-space: nowrap; }
kbd { padding: 3px 6px; border: 1px solid #445979; border-bottom-width: 2px; border-radius: 4px; color: #eaf0fb; background: #18233a; font: inherit; font-size: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.3); }

@keyframes heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.22); } 40% { transform: scale(1); } 60% { transform: scale(1.15); } }
@keyframes coin-spin { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes pulse-dot { 0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 2px var(--gold)); } 50% { opacity: 1; filter: drop-shadow(0 0 8px var(--gold)); } }
.mobile-note { display: none; margin: 11px 0 0; color: #8290a5; text-align: center; font: 700 9px/1 'Space Mono', monospace; }

.site-footer { display: flex; justify-content: space-between; width: min(1220px, calc(100% - 36px)); margin: 0 auto; padding: 18px 0 28px; border-top: 1px solid #25344c; color: #64748c; font: 700 9px/1 'Space Mono', monospace; letter-spacing: .4px; }
.site-footer b { color: var(--gold); }

@keyframes twinkle { 0%, 100% { opacity: .75; transform: scale(.94) rotate(-4deg); } 50% { opacity: 1; transform: scale(1.08) rotate(4deg); } }

@media (max-width: 1000px) {
  .hud-cluster { gap: 10px; }
  .hud-readout { min-width: 43px; }
  .brand { min-width: 210px; }
  .brand strong { font-size: 15px; }
  .archive-grid { grid-template-columns: 1fr 1fr; }
  .field-card { grid-column: 1 / -1; }
  .field-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .field-list > div { border-top: 0; border-left: 1px solid #2b4650; padding: 0 0 0 12px; }
}

@media (max-width: 760px) {
  .topbar { align-items: flex-start; flex-direction: column; width: min(100% - 20px, 1220px); margin-top: 10px; padding: 12px; gap: 12px; }
  .brand { width: 100%; }
  .topbar-actions { width: 100%; justify-content: space-between; gap: 6px; }
  .hud-cluster { justify-content: space-between; flex: 1; margin-right: 3px; gap: 4px; }
  .hud-label { font-size: 7px; }
  .hud-readout strong { font-size: 12px; }
  .icon-button { width: 34px; height: 34px; font-size: 14px; }
  .restart-button { padding: 0 8px; font-size: 8px; }
  .page-content { width: min(100% - 20px, 1220px); }
  .game-section { padding-top: 36px; }
  .game-heading-row { align-items: flex-start; flex-direction: column; margin-bottom: 19px; }
  .game-heading-row p { font-size: 13px; }
  .mission-chip { align-self: flex-start; }
  .arcade-frame { padding: 17px 10px 12px; border-radius: 11px; }
  .screen-header { padding: 0 5px 8px; font-size: 7px; }
  .screen-tip { display: none; }
  .screen-shell { border-width: 2px; }
  .screen-footer { flex-wrap: wrap; padding: 9px 5px 0; }
  .progress-track { order: 3; flex-basis: 100%; max-width: none; margin-top: 5px; }
  .control-deck { flex-wrap: wrap; gap: 12px; padding-top: 12px; }
  .deck-label { display: none; }
  .keyboard-hint { width: 100%; margin-left: 0; text-align: center; font-size: 8px; }
  .touch-button { height: 44px; }
  .mobile-note { display: block; }
  .archive-section { margin-top: 74px; }
  .archive-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .archive-heading > p { max-width: none; }
  .archive-grid { grid-template-columns: 1fr; }
  .field-card { grid-column: auto; }
  .field-list { display: block; }
  .field-list > div { border-top: 1px solid #2b4650; border-left: 0; padding: 12px 0; }
  .site-footer { flex-direction: column; gap: 10px; width: min(100% - 20px, 1220px); font-size: 8px; }
}

@media (max-width: 460px) {
  .hud-readout:nth-child(4) { display: none; }
  .brand strong { font-size: 13px; }
  .brand small { font-size: 7px; }
  .brand-mark { width: 35px; height: 35px; }
  .hud-cluster { gap: 1px; }
  .hud-readout strong { font-size: 10px; }
  .restart-button { display: none; }
  .overlay-panel { padding: 19px 15px 17px; }
  .overlay-panel #overlay-title { font-size: 25px; }
  .overlay-copy { font-size: 12px; }
  .overlay-controls { gap: 9px; font-size: 8px; }
  .objective { font-size: 8px; }
  .distance-readout { font-size: 8px; }
  .touch-controls { width: 100%; }
  .touch-button { flex: 1; }
  .jump-button { flex: 2; }
}

/* Adventure controls remain reachable in portrait and fullscreen. */
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #b6f5ff; outline-offset: 3px; }
button:disabled { opacity: .45; cursor: default; }
.play-area { width: 100%; }
.screen-header { flex-wrap: wrap; }
.screen-actions { display: flex; gap: 6px; margin-left: auto; }
.screen-actions button { width: 44px; height: 44px; cursor: pointer; }
.stage-stats { color: #f5e9cf; white-space: nowrap; margin-left: auto; }
#btn-exit-fullscreen { display: none; }

.touch-button { min-height: 48px; }
.touch-button small { font-size: 8px; }
.jump-instructions { color: #b0bfd3; margin: 14px 0 0; text-align: center; font-size: 13px; line-height: 1.5; }
.screen-overlay { overflow-y: auto; overscroll-behavior: contain; }
[data-theme="night"] .arcade-frame { border-color: #738fa3; background: linear-gradient(135deg, #29465d, #18293e 55%, #13212e); box-shadow: 0 25px 70px #0008, 0 0 30px #7dcced12; }

[data-theme="night"] .screen-title { color: #c2ecff; }
@media (max-width: 760px) {
  .topbar { position: relative; }
  .screen-title { font-size: 9px; }
  .screen-header { gap: 8px; padding-inline: 2px; }
  .stage-stats { font-size: 9px; margin-left: 0; }
  .screen-title { flex-basis: 100%; }
  .screen-actions { margin-left: auto; }
  .screen-shell.has-overlay { min-height: 380px; }
  .screen-overlay { padding: 12px; }
  .overlay-panel { padding: 20px 14px; }
  .overlay-stamp { font-size: 8px; padding: 6px 8px; }
  .overlay-icon { font-size: 28px; margin: 12px auto 10px; }
  .overlay-eyebrow { font-size: 8px; letter-spacing: .6px; }
  .overlay-panel #overlay-title { font-size: 28px; }
  .overlay-copy { font-size: 13px; margin: 12px auto 16px; }
  .overlay-controls { margin-top: 16px; font-size: 8px; }
  .control-deck { padding-inline: 0; }
  .touch-controls { width: 100%; gap: 6px; }
  .touch-button { padding-inline: 6px; min-width: 44px; flex: 1; }
  .jump-button { min-width: 100px; flex: 2; }
  .keyboard-hint { display: none; }
  .jump-instructions { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 760px) {
  .screen-shell.has-overlay { min-height: 0; }
  .screen-shell.has-overlay #game-canvas { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .screen-shell.has-overlay .screen-overlay { position: relative; min-height: 380px; }
}


/* The celebration stays fully visible; its continuation lives below the stage. */
.screen-shell.is-celebrating { isolation: isolate; contain: layout paint; }
.screen-shell.is-celebrating #game-canvas { transform: translateZ(0); will-change: transform; }
.screen-overlay.is-celebration { position: relative; inset: auto; display: block; padding: 0; overflow: visible; background: #101d2e; backdrop-filter: none; border-top: 1px solid #d1b16b; }
.is-celebration .overlay-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title action" "copy action"; align-items: center; column-gap: 24px; width: 100%; padding: 20px 26px; text-align: left; border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(110deg, #1c303b, #101c30); }
.is-celebration .overlay-stamp, .is-celebration .overlay-icon, .is-celebration .overlay-eyebrow { display: none; }
.is-celebration .overlay-panel #overlay-title { grid-area: title; margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.8px; text-shadow: none; }
.is-celebration .overlay-copy { grid-area: copy; max-width: none; margin: 8px 0 0; color: #bacbce; font-size: 13px; line-height: 1.45; }
.is-celebration #overlay-action { grid-area: action; margin: 0; min-height: 48px; font-size: 11px; white-space: normal; }
@media (max-width: 760px) {
  .is-celebration .overlay-panel { grid-template-columns: 1fr; grid-template-areas: "title" "copy" "action"; padding: 16px; gap: 0; text-align: center; }
  .is-celebration .overlay-panel #overlay-title { font-size: 19px; }
  .is-celebration .overlay-copy { margin: 8px 0 14px; font-size: 12px; }
  .is-celebration #overlay-action { width: 100%; }
}


/* Gi Studio navigation and the fullscreen entry guide. */
.brand-logo{border-radius:10px;flex-shrink:0}
.site-footer a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.studio-nav{width:min(1220px,calc(100% - 36px));margin:12px auto 0}
.studio-nav a{display:inline-flex;align-items:center;gap:16px;min-height:48px;color:#edf3ff;text-decoration:none;font-weight:700}
.studio-nav span{color:#9baac2;font-size:.8rem;font-weight:400}
.bunny-playing{overflow:hidden}
.rotate-notice{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#0b1424;padding:24px;text-align:center}
.rotate-notice[hidden]{display:none}
.rotate-notice h2{font-size:2rem;color:#ffd13c;margin:16px 0}
.rotate-notice p{line-height:1.7;color:#c5d5e8;margin:0 0 24px}
.rotate-notice>div>span{font-size:4rem;color:#6ed0e7}
#btn-stage-sound{font-size:14px}
@media(pointer:coarse){.screen-actions button,.icon-button,.restart-button{min-width:48px;min-height:48px}}


/* Entry guide and touch-control groups. */
.direction-controls, .action-controls { display: flex; align-items: center; gap: 8px; }
.entry-actions { display: grid; justify-items: center; gap: 14px; }
.entry-actions [hidden] { display: none; }
.entry-cancel { min-height: 48px; padding: 10px 18px; border: 1px solid #57728e; border-radius: 8px; background: #162942; color: #e4efff; font: 700 12px/1.4 'Chakra Petch', sans-serif; cursor: pointer; }
.rotate-notice { overflow-y: auto; overscroll-behavior: contain; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.rotate-notice > div { max-width: 480px; }
@media (pointer: coarse) {
  .primary-button { min-height: 48px; }
  .touch-controls { width: 100%; justify-content: space-between; }
  .direction-controls, .action-controls { gap: 6px; }
  .touch-button { -webkit-touch-callout: none; }
  .jump-button { min-width: 88px; }
}

/* The world itself fills the native fullscreen viewport. Only the HUD has insets. */
.play-area:fullscreen {
  --edge-top: max(8px, env(safe-area-inset-top));
  --edge-bottom: max(8px, env(safe-area-inset-bottom));
  --edge-left: max(12px, env(safe-area-inset-left));
  --edge-right: max(12px, env(safe-area-inset-right));
  position: fixed; inset: 0; display: block; width: 100%; height: 100%;
  min-height: 0; max-width: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; box-shadow: none; overflow: hidden; overscroll-behavior: none;
  background: #1a5ec9; touch-action: none;
}
.play-area:fullscreen .arcade-frame,
.play-area:fullscreen .screen-shell {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  min-height: 0; max-width: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; box-shadow: none; background: transparent;
}
.play-area:fullscreen .arcade-frame::before,
.play-area:fullscreen .frame-rivets,
.play-area:fullscreen .screen-title,
.play-area:fullscreen .screen-footer,
.play-area:fullscreen .jump-instructions,
.play-area:fullscreen .deck-label,
.play-area:fullscreen .keyboard-hint { display: none; }
.play-area:fullscreen #game-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; aspect-ratio: auto; border: 0;
  border-radius: 0; outline: none;
}
.play-area:fullscreen:has(#game-canvas:focus-visible) .stage-stats { outline: 3px solid #b6f5ff; outline-offset: 2px; }
.play-area:fullscreen .screen-header {
  position: absolute; top: var(--edge-top); left: var(--edge-left); right: var(--edge-right);
  z-index: 6; height: 48px; padding: 0; flex-wrap: nowrap; gap: 12px;
  pointer-events: none; letter-spacing: 0;
}
.play-area:fullscreen .stage-stats {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 8px 12px;
  border-radius: 20px; color: #fff; background: #0b1b32b8;
  font-size: 12px; text-shadow: 0 1px 2px #07101f;
}
.play-area:fullscreen .screen-actions { gap: 6px; flex-shrink: 0; }
.play-area:fullscreen .screen-actions button {
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
  --glass-inset: 3px; --glass-radius: 15px; pointer-events: auto;
}
.play-area:fullscreen #btn-exit-fullscreen { display: inline-flex; }
.play-area:fullscreen .control-deck {
  position: absolute; z-index: 7; left: var(--edge-left); right: var(--edge-right); bottom: var(--edge-bottom);
  display: block; width: auto; height: 72px; min-height: 0; padding: 0; margin: 0;
  background: none; border: 0; box-shadow: none; pointer-events: none;
}
.play-area:fullscreen .control-deck[inert] { visibility: hidden; }
.play-area:fullscreen .touch-controls { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: end; }
.play-area:fullscreen .direction-controls,
.play-area:fullscreen .action-controls { display: flex; align-items: end; gap: 8px; }
.play-area:fullscreen .touch-button {
  flex: none; width: 64px; height: 64px; min-width: 64px; min-height: 56px; padding: 0 6px;
  --glass-radius: 22px; font-size: 26px; pointer-events: auto;
}

.play-area:fullscreen .jump-button {
  --glass-radius: 25px; width: 80px; height: 72px; font-size: 13px;
}

.play-area:fullscreen .power-button { order: -1; width: 56px; min-width: 56px; }


.play-area:fullscreen .screen-overlay { position: absolute; inset: 0; min-height: 0; }
.play-area:fullscreen .screen-overlay:not(.is-celebration) { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.play-area:fullscreen .overlay-stamp,
.play-area:fullscreen .overlay-icon,
.play-area:fullscreen .overlay-controls { display: none; }
.play-area:fullscreen .screen-overlay.is-celebration {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 64px var(--edge-right) 24px var(--edge-left); border: 0;
  background: transparent; backdrop-filter: none; pointer-events: none;
}
.play-area:fullscreen .is-celebration .overlay-panel {
  display: flex; flex-direction: column; gap: 10px; width: clamp(168px, 26vw, 250px);
  max-height: 100%; padding: 14px; overflow-y: auto; border: 0; border-radius: 14px;
  background: #091529bd; box-shadow: none; text-align: center; pointer-events: auto;
}
.play-area:fullscreen .is-celebration .overlay-panel #overlay-title { margin: 0; font-size: 18px; }
.play-area:fullscreen .is-celebration .overlay-copy { margin: 0; font-size: 12px; }
.play-area:fullscreen .is-celebration #overlay-action { width: 100%; min-height: 48px; padding: 12px 8px; font-size: 10px; }
@media (orientation: landscape) and (max-height: 600px) {
  .play-area:fullscreen .overlay-panel { padding: 14px; }
  .play-area:fullscreen .overlay-panel #overlay-title { font-size: 24px; margin-top: 8px; }
  .play-area:fullscreen .overlay-copy { font-size: 12px; margin: 10px auto; }
  .play-area:fullscreen .is-celebration .overlay-panel #overlay-title { font-size: 18px; margin: 0; }
  .play-area:fullscreen .is-celebration .overlay-copy { margin: 0; }
  .rotate-notice > div > span { font-size: 2rem; }
  .rotate-notice h2 { margin: 8px 0; font-size: 1.6rem; }
  .rotate-notice p { margin-bottom: 14px; line-height: 1.5; }
  .entry-actions { display: flex; justify-content: center; }
}
@media (orientation: landscape) and (max-height: 380px) {
  .play-area:fullscreen .touch-button { width: 56px; min-width: 56px; height: 56px; }
  .play-area:fullscreen .jump-button { width: 76px; height: 64px; }
  .play-area:fullscreen .stage-stats { font-size: 11px; }
  .play-area:fullscreen .is-celebration .overlay-panel { padding: 10px; }
  .play-area:fullscreen .is-celebration .overlay-panel #overlay-title { font-size: 15px; }
  .play-area:fullscreen .is-celebration .overlay-copy { font-size: 11px; }
}


/* Lightweight glass controls. The surface is translucent; the label stays opaque. */
button.glass-button {
  --glass-fill: rgb(13 32 49 / .58);
  --glass-sheen: rgb(232 249 255 / .16);
  --glass-rim: rgb(226 245 255 / .42);
  --glass-ink: #f4fbff;
  --glass-radius: 15px;
  position: relative; isolation: isolate; border: 0; border-radius: var(--glass-radius);
  background: transparent; color: var(--glass-ink); box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 3px #071b30cc;
}
button.glass-button::before {
  content: ""; position: absolute; inset: var(--glass-inset, 0px); z-index: -1;
  border: 1px solid var(--glass-rim); border-top-color: rgb(245 253 255 / .68);
  border-radius: inherit;
  background: linear-gradient(150deg in oklab, var(--glass-sheen), transparent 65%), var(--glass-fill);
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #071b301f, 0 4px 12px #03172c1f;
  pointer-events: none; transition: transform 120ms ease, background-color 120ms ease;
}
/* Blur is confined to the small button faces; the full game is never filtered. */
@supports (backdrop-filter: blur(4px)) {
  button.glass-button { --glass-fill: rgb(13 32 49 / .32); }
  button.glass-button::before { backdrop-filter: blur(4px); }
}
button.glass-button:is(:active, .is-pressed):not(:disabled)::before {
  background-color: rgb(204 235 255 / .20); border-color: #eafaffb3;
  transform: scale(.94); box-shadow: inset 0 2px 7px #071b3040;
}
@media (hover: hover) and (pointer: fine) {
  button.glass-button:hover:not(:disabled)::before { background-color: #ceeaff1f; border-color: #eafaffb3; }
}
button.glass-button:focus-visible { outline: 3px solid #d2f8ff; outline-offset: 2px; }
button.glass-button:is(.jump-button, .primary-button) {
  --glass-sheen: rgb(255 219 136 / .32); --glass-rim: rgb(255 226 163 / .68); --glass-ink: #fff0c5;
}
button.glass-button.power-button {
  --glass-sheen: rgb(136 255 218 / .20); --glass-rim: rgb(189 255 232 / .54); --glass-ink: #dcfff0;
}
button.glass-button:is(.touch-button, .icon-button), .screen-actions button.glass-button {
  display: inline-flex; align-items: center; justify-content: center;
}
button.glass-button:is(.jump-button, .power-button) { flex-direction: column; gap: 2px; }
.button-glyph {
  display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  filter: drop-shadow(0 1px 1px #071b30b3);
}
.screen-actions .button-glyph, .icon-button .button-glyph { width: 21px; height: 21px; }
.direction-mark { width: 28px; height: 28px; stroke-width: 2; }
.jump-mark { width: 25px; height: 25px; }
.power-mark { width: 23px; height: 23px; }
.touch-button .control-caption { margin: 0; color: inherit; font: 700 .625rem/1.2 'Chakra Petch', sans-serif; letter-spacing: .07em; }
.jump-button .control-caption { font-size: .75rem; }
.touch-button .jump-badge {
  position: absolute; top: 6px; right: 8px; margin: 0; color: #fff0c5;
  font: 700 .625rem/1 'Chakra Petch', sans-serif; letter-spacing: -.04em;
}
.sound-off, .resume-mark { display: none; }
[aria-pressed="false"] > .sound-on, [data-paused="true"] > .pause-mark { display: none; }
[aria-pressed="false"] > .sound-off, [data-paused="true"] > .resume-mark { display: block; }
@media (prefers-reduced-transparency: reduce) {
  button.glass-button { --glass-fill: #14283e; }
  button.glass-button::before { backdrop-filter: none; }
}
@media (forced-colors: active) {
  button.glass-button { color: ButtonText; text-shadow: none; }
  button.glass-button::before { background: ButtonFace; border: 1px solid ButtonText; backdrop-filter: none; }
  .button-glyph { filter: none; }
  button.glass-button:is(:active, .is-pressed)::before { background: Highlight; }
}

/* A quiet welcome page; game overlays and native fullscreen keep their layout. */
@font-face {
  font-family: 'Bunny Outfit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/outfit.ttf') format('truetype');
}
@font-face {
  font-family: 'Bunny Outfit'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('./fonts/outfit-bold.ttf') format('truetype');
}
.welcome-art, .welcome-help, .welcome-hint { display: none; }
.welcome-content { display: contents; }
.studio-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-nav #btn-sound { flex: none; width: 48px; height: 48px; }
.game-heading-row h2 { font-size: clamp(32px, 5vw, 58px); line-height: 1; letter-spacing: -2px; }
body.is-welcome { background: #f7f8f0; color: #203d35; font-family: 'Bunny Outfit', 'Trebuchet MS', sans-serif; }
.is-welcome .site-noise, .is-welcome .topbar,
.is-welcome .game-section > .section-kicker, .is-welcome .game-heading-row,
.is-welcome .frame-rivets, .is-welcome .screen-header, .is-welcome .screen-footer,
.is-welcome .control-deck, .is-welcome .jump-instructions,
.is-welcome .overlay-stamp, .is-welcome .overlay-icon { display: none; }
.is-welcome .studio-nav, .is-welcome .page-content, .is-welcome .site-footer {
  width: min(1120px, calc(100% - 64px));
}
.is-welcome .studio-nav { margin: 22px auto 0; }
.is-welcome .studio-nav a { color: #203d35; font-size: 1rem; gap: 14px; }
.is-welcome .studio-nav span { color: #55665d; font-size: .875rem; }
.is-welcome .studio-nav #btn-sound { color: #203d35; text-shadow: none; }
.is-welcome .studio-nav #btn-sound::before {
  background: #e8edde; border: 1px solid #d4dfcc; box-shadow: none; backdrop-filter: none;
}
.is-welcome .studio-nav .button-glyph { filter: none; }
.is-welcome .game-section { padding: 0; }
.is-welcome .page-content { margin: 24px auto 0; }
.is-welcome .play-area:not(:fullscreen) .arcade-frame,
.is-welcome .play-area:not(:fullscreen) .screen-shell {
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}
.is-welcome .arcade-frame::before { display: none; }
.is-welcome #game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.is-welcome .play-area:not(:fullscreen) .screen-overlay {
  position: relative; inset: auto; min-height: 0; padding: 0; overflow: visible;
  background: transparent; backdrop-filter: none; transition: none;
}
.is-welcome .play-area .overlay-panel {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  grid-template-areas: 'copy art'; gap: clamp(24px, 4vw, 64px); align-items: center;
  width: 100%; min-height: min(620px, calc(100svh - 168px)); padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left;
}
.is-welcome .welcome-art { grid-area: art; display: block; overflow: hidden; border-radius: 100px 100px 24px 24px; background: #81c3f4; }
.welcome-art img { display: block; width: 100%; height: auto; }
.is-welcome .welcome-art img { aspect-ratio: 1.08; object-fit: cover; object-position: 53% center; }
.is-welcome .welcome-content { grid-area: copy; display: block; padding-block: 24px; }
.is-welcome .overlay-eyebrow { color: #496652; font: 700 .7rem/1.5 'Bunny Outfit', sans-serif; letter-spacing: .15em; }
.is-welcome .overlay-panel #overlay-title {
  margin: 12px 0 0; color: #203d35; font: 700 clamp(48px, 6.7vw, 84px)/.98 'Bunny Outfit', sans-serif;
  letter-spacing: -.055em; text-shadow: none;
}
.is-welcome #overlay-title span { display: block; color: #b96325; }
.is-welcome .overlay-copy { max-width: 320px; margin: 20px 0 28px; color: #526359; font-size: 1.125rem; line-height: 1.5; }
.is-welcome #overlay-action {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  width: min(100%, 320px); min-height: 60px; padding: 16px 24px; border: 0; border-radius: 18px;
  background: #eebf46; color: #273b2e; font: 700 1.3rem/1.25 'Bunny Outfit', sans-serif;
  letter-spacing: 0; text-shadow: none; box-shadow: 0 5px 0 #c59425;
  touch-action: manipulation; transition: background-color 140ms, transform 140ms;
}
.is-welcome #overlay-action::before { display: none; }
.welcome-play-icon { fill: currentColor; }
.is-welcome #overlay-action:active { transform: translateY(3px); box-shadow: 0 2px 0 #c59425; }
.is-welcome :is(button, a, summary):focus-visible { outline: 3px solid #236754; outline-offset: 4px; }
.is-welcome .welcome-hint { display: none; align-items: center; gap: 8px; max-width: 320px; margin: 20px 0 0; color: #56665a; font-size: .8125rem; line-height: 1.45; }
.welcome-hint svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.is-welcome .welcome-help { display: block; max-width: 320px; margin-top: 16px; }
.welcome-help summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 48px; color: #354d3e; font-size: .9375rem; font-weight: 700; cursor: pointer;
  list-style: none; border-bottom: 1px solid #d8e0d1; touch-action: manipulation;
}
.welcome-help summary::-webkit-details-marker { display: none; }
.welcome-help summary > span { font-size: 1.5rem; font-weight: 400; line-height: 1; }
.welcome-help[open] summary > span { transform: rotate(45deg); }
.welcome-help-copy { padding: 12px 0 4px; color: #526359; font-size: .9375rem; line-height: 1.5; }
.welcome-help ol { display: grid; gap: 10px; margin: 0; padding-left: 1.35em; }
.welcome-help li { padding-left: 4px; }
.welcome-help li::marker { color: #8b5923; font-weight: 700; }
.welcome-help strong { color: #203d35; }
.welcome-help-copy > p { margin-top: 14px; }
.welcome-help .touch-help { display: none; }
.is-welcome .site-footer { justify-content: center; margin-top: 26px; padding: 18px 0 24px; border-top: 0; color: #667366; font: 400 .75rem/1.5 'Bunny Outfit', sans-serif; text-align: center; }
.is-welcome .site-footer a { display: none; }
@media (hover: hover) and (pointer: fine) {
  .is-welcome #overlay-action:hover { background: #f7cc5e; }
  .welcome-help summary:hover { color: #9b551e; }
}
@media (pointer: coarse) {
  .is-welcome .welcome-hint { display: flex; }
  .welcome-help .touch-help { display: grid; }
  .welcome-help .keyboard-help { display: none; }
}
@media (max-width: 699px) {
  .is-welcome .studio-nav, .is-welcome .page-content, .is-welcome .site-footer { width: calc(100% - 40px); }
  .is-welcome .studio-nav { margin-top: max(8px, env(safe-area-inset-top)); }
  .is-welcome .studio-nav span { display: none; }
  .is-welcome .studio-nav a { font-size: .9375rem; }
  .is-welcome .page-content { margin-top: 12px; }
  .is-welcome .play-area .overlay-panel {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: 'art' 'copy'; gap: 22px; min-height: 0; text-align: center;
  }
  .is-welcome .welcome-art { border-radius: 80px 80px 22px 22px; max-width: 460px; width: 100%; justify-self: center; }
  .is-welcome .welcome-art img { aspect-ratio: 1.75; object-position: center 41%; }
  .is-welcome .welcome-content { padding: 0; }
  .is-welcome .overlay-eyebrow { font-size: .625rem; letter-spacing: .14em; }
  .is-welcome .overlay-panel #overlay-title { font-size: clamp(42px, 12vw, 62px); margin-top: 6px; }
  .is-welcome #overlay-title span { display: inline; }
  .is-welcome .overlay-copy { max-width: 270px; margin: 12px auto 22px; font-size: 1rem; line-height: 1.4; }
  .is-welcome #overlay-action { width: 100%; max-width: 360px; margin: 0 auto; min-height: 56px; font-size: 1.2rem; }
  .is-welcome .welcome-hint { justify-content: center; margin: 18px auto 0; max-width: 290px; font-size: .75rem; text-align: left; }
  .is-welcome .welcome-help { max-width: 360px; margin: 12px auto 0; text-align: left; }
  .is-welcome .site-footer { margin-top: 10px; padding-top: 14px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .is-welcome .studio-nav { margin-top: 6px; }
  .is-welcome .page-content { margin-top: 10px; }
  .is-welcome .play-area .overlay-panel { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-areas: 'copy art'; gap: 24px; text-align: left; }
  .is-welcome .welcome-art img { aspect-ratio: 1.5; }
  .is-welcome .welcome-content { padding: 4px 0; }
  .is-welcome .overlay-panel #overlay-title { font-size: 44px; margin-top: 4px; }
  .is-welcome #overlay-title span { display: inline; }
  .is-welcome .overlay-copy { font-size: .9375rem; margin: 10px 0 16px; }
  .is-welcome #overlay-action { min-height: 52px; padding: 12px 24px; }
  .is-welcome .welcome-hint { margin-top: 14px; font-size: .75rem; }
  .is-welcome .welcome-help { margin-top: 4px; }
  .is-welcome .site-footer { margin-top: 8px; padding-top: 8px; }
}
@media (forced-colors: active) {
  .is-welcome #overlay-action { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .welcome-help summary { border-color: ButtonText; }
}

/* A desktop F-key entry can show the welcome page inside native fullscreen. */
.is-welcome .play-area:fullscreen .screen-overlay { background: #f7f8f0; overflow-y: auto; padding: 24px; }
.is-welcome .play-area:fullscreen .overlay-panel { max-width: 1120px; margin: auto; }
.is-welcome .play-area:fullscreen .screen-header { display: none; }
.is-welcome .rotate-notice button:focus-visible { outline-color: #b6f5ff; }

/* Movable mobile controls; positions are relative to the fullscreen play area. */
#controls-layout-safe-area { position: absolute; visibility: hidden; pointer-events: none;
  padding: var(--edge-top, 8px) var(--edge-right, 12px) var(--edge-bottom, 8px) var(--edge-left, 12px); }
.controls-layout-panel[hidden], .controls-layout-hold[hidden] { display: none; }
.controls-layout-panel, .controls-layout-hold { position: absolute; z-index: 15; left: 50%; transform: translateX(-50%);
  color: #f9f7ea; border: 1px solid #ffffff45; border-radius: 18px; background: #102332f2;
  font-family: 'Bunny Outfit', sans-serif; box-shadow: 0 8px 30px #06162650; }
.controls-layout-hold { top: max(76px, env(safe-area-inset-top)); width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; font-size: 14px; text-align: center; pointer-events: none; }
.controls-layout-panel { top: max(8px, env(safe-area-inset-top)); width: min(760px, calc(100% - 24px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; }
.controls-layout-panel h2 { margin: 0 0 3px; font: 700 17px/1.15 'Bunny Outfit', sans-serif; color: #fff3ce; }
.controls-layout-panel p { margin: 0; font-size: 13px; line-height: 1.25; color: #d0dfdf; }
.controls-layout-actions { display: flex; gap: 6px; }
.controls-layout-actions button { min-height: 48px; min-width: 54px; padding: 8px 11px; border: 1px solid #ffffff45;
  border-radius: 12px; background: #ffffff13; color: #f9f7ea; font: 700 13px/1.2 'Bunny Outfit', sans-serif; cursor: pointer; touch-action: manipulation; }
.controls-layout-actions #controls-layout-save { background: #f8d770; border-color: #ffe8a1; color: #23302d; }
.controls-layout-actions button:focus-visible { outline: 3px solid #8debd6; outline-offset: 2px; }
.play-area:fullscreen.has-custom-controls .control-deck { inset: 0; width: 100%; height: 100%; }
.play-area:fullscreen.has-custom-controls .touch-controls { display: block; }
.play-area:fullscreen.has-custom-controls :is(.direction-controls, .action-controls) { display: contents; }
.play-area:fullscreen.has-custom-controls .touch-button { position: absolute; left: var(--control-x); top: var(--control-y); margin: 0; }
.play-area:fullscreen.controls-editing::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(#ffffff0c 1px, transparent 1px), linear-gradient(90deg, #ffffff0c 1px, transparent 1px), #07162255;
  background-size: 24px 24px; }
.play-area:fullscreen.controls-editing .screen-header { visibility: hidden; }
.play-area:fullscreen.controls-editing .control-deck { z-index: 12; }
.play-area:fullscreen.controls-editing .touch-button { outline: 2px dashed #ffe594; outline-offset: 3px;
  cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none; }
.play-area:fullscreen.controls-editing .touch-button.is-dragging { cursor: grabbing; outline-style: solid; }
.play-area:fullscreen.controls-editing .touch-button.is-overlapping { outline-color: #ffada0; }
@media (max-width: 640px) {
  .controls-layout-panel { gap: 8px; padding: 8px; }
  .controls-layout-panel h2 { font-size: 15px; }
  .controls-layout-panel p { font-size: 12px; }
  .controls-layout-actions button { padding-inline: 8px; font-size: 12px; }
}
@media (forced-colors: active) {
  .controls-layout-panel, .controls-layout-hold { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .controls-layout-panel :is(h2, p) { color: CanvasText; }
  .controls-layout-actions button, .controls-layout-actions #controls-layout-save { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}