.egg-shell { width: min(1600px, calc(100% - 32px)); padding-top: 20px; }
.site-header .header-inner { min-height: 64px; }
.egg-intro { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 18px; }
.egg-intro h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; margin: 10px 0; }
.egg-intro h1 em { color: #ffda82; font-style: normal; }
.egg-intro p { line-height: 1.5; margin: 8px 0; font-size: 13px; }
.egg-rule-card { width: min(440px, 43%); border: 1px solid #394640; border-radius: 12px; background: #182520; padding: 16px 20px; }
.egg-rule-card summary { cursor: pointer; color: #ffda82; font-size: 14px; font-weight: 700; }
.egg-rule-card b { color: #c5ee8e; margin-right: 8px; }
.egg-arena { background: #182520; border: 1px solid #455346; border-radius: 14px; padding: 12px; }
.egg-arena-top, .egg-bottom, .egg-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.egg-arena-top button { color: #ffda82; border: 1px solid #536753; background: #21352b; border-radius: 7px; padding: 12px 16px; min-height: 54px; font-size: 14px; }
.egg-arena .cta { min-height: 56px; min-width: 180px; font-size: 15px; justify-content: center; }
.egg-hud { display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr; gap: 12px; margin: 12px 0; }
.egg-hud div { border-left: 2px solid #5f775a; padding-left: 14px; }
.egg-hud span { display: block; color: #bbc7b8; font-size: 10px; letter-spacing: .1em; margin-bottom: 6px; }
.egg-hud strong { font-size: 28px; font-variant-numeric: tabular-nums; color: #fff3d0; }
.egg-hud small { font-size: 11px; font-weight: 400; }
.egg-stage { background: #253d30; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 28px #081c2355, 0 0 0 1px #c5df962e; }
.egg-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; touch-action: none; }
.egg-stage canvas:focus-visible { outline: 3px solid #ffda82; outline-offset: -4px; }
.egg-controls { padding: 16px 0; }
.egg-controls p { font-size: 12px; line-height: 1.6; color: #becbbd; }
.egg-pad { display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px); gap: 10px; touch-action: none; user-select: none; }
.egg-pad button { border: 2px solid #6c8465; border-radius: 12px; color: #fff1c7; background: #2b4333; font-size: 34px; touch-action: none; user-select: none; -webkit-user-select: none; }
.egg-pad button[data-move="4"] { grid-column: 2; grid-row: 1; }
.egg-pad button[data-move="1"] { grid-column: 1; grid-row: 2; }
.egg-pad button[data-move="8"] { grid-column: 2; grid-row: 3; }
.egg-pad button[data-move="2"] { grid-column: 3; grid-row: 2; }
.egg-pad button.active { background: #f0d489; color: #1c3028; }
.egg-bottom { border-top: 1px solid #3c4c40; padding-top: 16px; }
.egg-bottom p { color: #fff1c7; font-size: 13px; }
.egg-note { font-size: 12px; color: #b7c4b4; line-height: 1.7; }
.egg-finish { margin-top: 20px; padding: 24px; background: #263d2e; border: 1px solid #c7df8c; border-radius: 12px; }
.egg-finish h2 { font-size: 30px; margin: 12px 0; }
.egg-finish label { display: block; margin: 20px 0 9px; }
.egg-save-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.egg-save-controls input { flex: 1; min-width: 160px; color: #fff7de; background: #13231a; border: 1px solid #8b9c79; border-radius: 6px; padding: 12px; }
.egg-rankings { padding: 65px 0; }
.egg-rankings h2 { font-size: clamp(25px, 4vw, 40px); }
.egg-rankings .quiet-button { color: #ffda82; background: transparent; border: 1px solid #536753; border-radius: 7px; min-height: 44px; padding: 10px 14px; }
.egg-ranking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.egg-ranking-grid article { background: #19251f; border: 1px solid #394b3e; padding: 22px; border-radius: 12px; min-width: 0; }
.egg-ranking-icon { font-size: 30px; color: #ffda82; }
.egg-ranking-grid h3 { font-size: 21px; margin: 12px 0; }
.egg-ranking-grid p { color: #b8c4b4; font-size: 12px; line-height: 1.6; }
.egg-ranking-grid ol { padding-left: 24px; }
.egg-ranking-grid li { padding: 10px 2px; border-top: 1px solid #354637; overflow-wrap: anywhere; font-size: 13px; }
.egg-ranking-grid li strong { color: #ffda82; }
.egg-arena:fullscreen, .egg-arena.game-fullscreen-fallback { display: flex; flex-direction: column; height: 100dvh; overflow: auto; min-height: 0; border: 0; border-radius: 0; background: #182520; padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
.egg-arena:fullscreen .egg-arena-top, .egg-arena.game-fullscreen-fallback .egg-arena-top { position: sticky; top: 0; z-index: 2; background: #182520; flex-shrink: 0; }
.egg-arena:fullscreen .egg-stage, .egg-arena.game-fullscreen-fallback .egg-stage { flex: 1 0 140px; min-height: 140px; }
.egg-arena:fullscreen canvas, .egg-arena.game-fullscreen-fallback canvas { height: 100%; width: 100%; aspect-ratio: auto; }
.egg-arena:fullscreen .egg-controls, .egg-arena.game-fullscreen-fallback .egg-controls { padding: 6px 0; }
.egg-arena:fullscreen > :not(.egg-stage), .egg-arena.game-fullscreen-fallback > :not(.egg-stage) { flex-shrink: 0; }
@media (max-width: 760px) {
  .egg-shell { width: calc(100% - 12px); padding-top: 12px; }
  .egg-intro { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; padding-inline: 6px; }
  .egg-intro h1 { font-size: clamp(30px, 8vw, 42px); }
  .egg-intro .eyebrow { font-size: 9px; }
  .egg-rule-card { width: 100%; padding: 12px; }
  .egg-arena { padding: 8px; }
  .egg-arena-top .eyebrow { font-size: 9px; }
  .egg-hud { grid-template-columns: 1fr .8fr 1.5fr 1fr; gap: 8px; }
  .egg-hud strong { font-size: 22px; }
  .egg-hud #basket { display: block; font-size: 12px; line-height: 1.6; }
  .egg-hud span { font-size: 8px; }
  .egg-hud div { padding-left: 5px; }
  .egg-controls { gap: 8px; flex-direction: column; align-items: stretch; padding: 10px 0; }
  .egg-controls p { font-size: 11px; margin: 0; }
  .egg-pad { align-self: center; grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 68px); gap: 6px; }
  .egg-bottom { flex-wrap: wrap; }
  .egg-bottom .cta { width: 100%; justify-content: center; }
  .egg-ranking-grid { grid-template-columns: 1fr; }
  .egg-finish { padding: 16px; }
  .egg-save-controls .cta { width: 100%; }
}
@media (max-height: 650px) and (orientation: landscape) {
  .egg-arena:fullscreen, .egg-arena.game-fullscreen-fallback { display: grid; grid-template-columns: minmax(0, 1fr) 216px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
  .egg-arena:fullscreen .egg-arena-top, .egg-arena.game-fullscreen-fallback .egg-arena-top { grid-column: 2; grid-row: 1; justify-content: stretch; }
  .egg-arena:fullscreen .egg-arena-top .eyebrow, .egg-arena.game-fullscreen-fallback .egg-arena-top .eyebrow { display: none; }
  .egg-arena:fullscreen .egg-arena-top button, .egg-arena.game-fullscreen-fallback .egg-arena-top button { width: 100%; padding: 8px; }
  .egg-arena:fullscreen .egg-hud, .egg-arena.game-fullscreen-fallback .egg-hud { grid-column: 1; grid-row: 1; grid-template-columns: 1fr 1fr 1.6fr 1fr; margin: 0; width: 100%; }
  .egg-arena:fullscreen .egg-stage, .egg-arena.game-fullscreen-fallback .egg-stage { grid-column: 1; grid-row: 2; min-height: 0; height: 100%; }
  .egg-arena:fullscreen .egg-controls, .egg-arena.game-fullscreen-fallback .egg-controls { grid-column: 2; grid-row: 2 / 4; align-self: center; padding: 0; }
  .egg-arena:fullscreen .egg-controls p, .egg-arena.game-fullscreen-fallback .egg-controls p { display: none; }
  .egg-arena:fullscreen .egg-pad, .egg-arena.game-fullscreen-fallback .egg-pad { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 6px; }
  .egg-arena:fullscreen .egg-pad button[data-move="4"], .egg-arena.game-fullscreen-fallback .egg-pad button[data-move="4"] { grid-column: 2; grid-row: 1; }
  .egg-arena:fullscreen .egg-pad button[data-move="1"], .egg-arena.game-fullscreen-fallback .egg-pad button[data-move="1"] { grid-column: 1; grid-row: 2; }
  .egg-arena:fullscreen .egg-pad button[data-move="8"], .egg-arena.game-fullscreen-fallback .egg-pad button[data-move="8"] { grid-column: 2; grid-row: 3; }
  .egg-arena:fullscreen .egg-pad button[data-move="2"], .egg-arena.game-fullscreen-fallback .egg-pad button[data-move="2"] { grid-column: 3; grid-row: 2; }
  .egg-arena:fullscreen .egg-bottom, .egg-arena.game-fullscreen-fallback .egg-bottom { grid-column: 1; grid-row: 3; align-self: end; padding-top: 6px; }
  .egg-arena:fullscreen .egg-bottom .cta, .egg-arena.game-fullscreen-fallback .egg-bottom .cta { width: 100%; min-width: 0; }
  .egg-arena:fullscreen .egg-bottom p, .egg-arena.game-fullscreen-fallback .egg-bottom p { margin: 0; font-size: 11px; }
  .egg-arena:fullscreen .egg-finish, .egg-arena.game-fullscreen-fallback .egg-finish { grid-column: 1 / -1; }
  .egg-arena:fullscreen > .egg-note, .egg-arena.game-fullscreen-fallback > .egg-note { display: none; }
  .egg-arena:fullscreen .egg-hud strong, .egg-arena.game-fullscreen-fallback .egg-hud strong { font-size: 20px; }
  .egg-arena:fullscreen .egg-hud #basket, .egg-arena.game-fullscreen-fallback .egg-hud #basket { font-size: 14px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .egg-shell * { scroll-behavior: auto; transition: none; } }