:root { --ink: #2a3428; --paper: #eef2e8; --foam: #b3cbb6; --sun: #f0d860; --water: #3d758e; --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: var(--water); overscroll-behavior: none; touch-action: pan-x pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; font-family: var(--mono); color: var(--paper); }
body { position: fixed; inset: 0; height: 100dvh; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; touch-action: none; }
canvas { display: block; touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.hidden { display: none !important; }

#hud { position: fixed; top: 0; left: 0; z-index: 5; image-rendering: pixelated; touch-action: none; cursor: pointer; }

#modal { position: fixed; z-index: 20; top: calc(var(--hud-h, 33px) + 6px); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(540px, 58vw);
  display: flex; flex-direction: column; padding: 14px 16px; background: var(--ink); color: var(--paper); border: 4px solid var(--foam);
  box-shadow: 0 0 0 4px var(--ink), 8px 8px 0 4px rgba(0, 0, 0, .35); touch-action: pan-x pan-y; }
#modal-head { display: flex; align-items: flex-start; gap: 10px; }
#modal-name { flex: 1; margin: 0 0 8px; font: 700 20px/1.2 var(--mono); letter-spacing: .04em; color: var(--sun); text-shadow: 2px 2px 0 #000; word-break: break-word; }
#modal-close { flex: none; width: 44px; height: 44px; margin: -4px -4px 0 0; padding: 0; font: 700 20px var(--mono); color: var(--ink); background: var(--foam); border: 3px solid var(--paper);
  box-shadow: 3px 3px 0 #000; cursor: pointer; touch-action: manipulation; }
#modal-close:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
#modal-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; background: var(--sun); }
#modal-hero { display: none; flex: none; position: relative; aspect-ratio: 16 / 9; max-height: 38vh; margin: 2px 0 10px; background: #1b221a; border: 3px solid var(--foam); box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px rgba(0, 0, 0, .35); overflow: hidden; }
#modal.has-hero #modal-hero { display: block; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; background: #1b221a; }
.hero-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 13px var(--mono); letter-spacing: .2em; color: var(--foam); text-transform: uppercase; animation: blink 1.2s steps(2) infinite; }
.hero-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 14px var(--mono); color: var(--sun); }
#modal-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--foam); }
#modal-stats .lang { color: var(--sun); }
#modal-topics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
#modal-topics span { padding: 1px 6px; font-size: 11px; color: var(--ink); background: var(--foam); }
#modal-topics:empty { display: none; }
#modal-desc { margin: 8px 0 4px; font-size: 13px; line-height: 1.4; }
#modal-link { align-self: flex-start; margin-bottom: 8px; font-size: 12px; color: var(--sun); }
#modal-readme { flex: 1; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 10px 12px; font: 13px/1.5 var(--mono);
  background: rgba(0, 0, 0, .28); border: 2px solid #3f4a3b; user-select: text; -webkit-user-select: text; word-break: break-word; }
#modal-readme h1, #modal-readme h2, #modal-readme h3, #modal-readme h4 { color: var(--sun); margin: 14px 0 6px; line-height: 1.25; }
#modal-readme h1 { font-size: 18px; } #modal-readme h2 { font-size: 16px; } #modal-readme h3, #modal-readme h4 { font-size: 14px; }
#modal-readme > :first-child { margin-top: 0; }
#modal-readme a { color: #9cd8d0; }
#modal-readme img { max-width: 100%; height: auto; image-rendering: auto; }
#modal-readme pre { overflow-x: auto; padding: 8px; background: #1b221a; border-left: 3px solid var(--foam); touch-action: pan-x pan-y; }
#modal-readme code { padding: 0 3px; background: #1b221a; color: var(--paper); }
#modal-readme pre code { padding: 0; }
#modal-readme blockquote { margin: 8px 0; padding: 0 10px; border-left: 3px solid #57625a; color: var(--foam); }
#modal-readme table { border-collapse: collapse; display: block; overflow-x: auto; }
#modal-readme th, #modal-readme td { border: 1px solid #57625a; padding: 3px 7px; }
#modal-readme hr { border: 0; border-top: 2px solid #57625a; }

#end { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: rgba(42, 52, 40, .45); cursor: pointer; padding: 20px; }
#end-title { font: 700 clamp(28px, 7vw, 64px)/1.1 var(--mono); letter-spacing: .12em; color: var(--sun); text-shadow: 4px 4px 0 #000; }
#end-sub { font: 700 clamp(14px, 2.4vw, 22px) var(--mono); color: var(--paper); text-shadow: 2px 2px 0 #000; }
#end-hint { font: 700 clamp(13px, 2vw, 20px) var(--mono); color: var(--ink); background: var(--foam); padding: 8px 16px; border: 3px solid var(--paper); box-shadow: 4px 4px 0 #000; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }

#stick { display: none; position: fixed; z-index: 15; left: calc(max(14px, env(safe-area-inset-left)) + 6px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 6px); width: 100px; height: 100px;
  border-radius: 50%; background: rgba(42, 52, 40, .2); border: 3px solid rgba(179, 203, 182, .6); touch-action: none; }
.touch #stick { display: block; }
#boost { display: none; position: fixed; z-index: 16; right: calc(max(14px, env(safe-area-inset-right)) + 6px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 6px); width: 76px; height: 76px; touch-action: none; }
.touch #boost { display: block; }
.modal-open #stick, .modal-open #boost { visibility: hidden; pointer-events: none; }
#boost canvas { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .35)); }
#flash { position: fixed; inset: 0; z-index: 24; pointer-events: none; background: #d83048; opacity: 0; }
#flash.hit { animation: flash .4s steps(5) 1; }
@keyframes flash { 0% { opacity: .5; } 100% { opacity: 0; } }
#stick::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 2px dashed rgba(179, 203, 182, .3); }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #e4a830; border: 3px solid #2a3428; box-shadow: inset -4px -4px 0 #c0600c, inset 3px 3px 0 #f0d860; pointer-events: none; opacity: .92; }

#rotate { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; background: #3d758e;
  background-image: repeating-linear-gradient(0deg, rgba(42, 52, 40, .18) 0 4px, transparent 4px 8px); touch-action: none; }
#rotate-title { font: 700 clamp(20px, 6vw, 34px) var(--mono); letter-spacing: .1em; color: var(--sun); text-shadow: 3px 3px 0 #000; }
#rotate-sub { font: 14px var(--mono); color: var(--paper); text-shadow: 2px 2px 0 #000; }
#rotate-phone { position: relative; width: 44px; height: 76px; background: var(--ink); border: 5px solid var(--paper); box-shadow: 4px 4px 0 #000; animation: turn 2.4s steps(12) infinite; }
#rotate-phone::before { content: ""; position: absolute; left: 50%; bottom: 4px; width: 8px; height: 4px; margin-left: -4px; background: var(--paper); }
#rotate-phone i { position: absolute; inset: 6px 4px 14px; background: #4c7c5c; box-shadow: inset 0 -10px 0 #e4a830; }
@keyframes turn { 0%, 15% { transform: rotate(0); } 50%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

#loading { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: #3d758e; transition: opacity .4s steps(4); }
#loading.done { opacity: 0; pointer-events: none; }
#loading-text { font: 700 24px var(--mono); letter-spacing: .2em; color: var(--paper); text-shadow: 3px 3px 0 #000; }
#loading-text::after { content: "..."; animation: dots 1.2s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { width: 0; } 100% { width: 1.2em; } }

@media (max-height: 560px) and (orientation: landscape) {
  #modal.has-hero { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto minmax(0, 1fr); column-gap: 12px; }
  #modal.has-hero > #modal-hero { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin: 2px 0 0; max-height: none; }
  #modal.has-hero > :not(#modal-hero) { grid-column: 2; }
  #modal.has-hero > #modal-readme { grid-row: 6; min-height: 0; }
}
@media (max-height: 460px) {
  #modal { top: calc(var(--hud-h, 22px) + 4px); padding: 10px 12px; width: min(540px, 56vw); }
  #modal-name { font-size: 16px; margin-bottom: 4px; }
  #modal-readme { font-size: 12px; }
}
/* phone landscape: compact popup, 92vw x 88dvh at most, body text about 11.5 px, title 14 px. The X keeps a 40 px hit area (transparent border) around a 24 px square. */
@media (max-height: 560px) and (orientation: landscape) {
  .touch #modal { top: calc(var(--hud-h, 22px) + 4px); bottom: auto; left: max(4vw, env(safe-area-inset-left)); right: max(4vw, env(safe-area-inset-right)); width: auto;
    height: min(88dvh, calc(100dvh - var(--hud-h, 22px) - 10px - env(safe-area-inset-bottom, 0px))); padding: 7px 10px 8px; border-width: 3px; box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 3px rgba(0, 0, 0, .35); }
  .touch #modal-head { gap: 6px; align-items: center; }
  .touch #modal-name { margin: 0 0 4px; font-size: 14px; line-height: 1.15; letter-spacing: .03em; text-shadow: 1px 1px 0 #000; }
  .touch #modal-close { width: 40px; height: 40px; margin: -8px -8px -8px 0; border: 8px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 2px var(--paper); font-size: 13px; line-height: 1; }
  .touch #modal-close:active { transform: none; box-shadow: inset 0 0 0 2px var(--paper); background-color: var(--sun); }
  .touch #modal-stats { gap: 2px 10px; font-size: 10px; }
  .touch #modal-topics { gap: 3px; margin-top: 3px; }
  .touch #modal-topics span { padding: 0 4px; font-size: 9px; }
  .touch #modal-desc { margin: 4px 0 2px; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .touch #modal-link { margin-bottom: 4px; font-size: 10px; }
  .touch #modal-readme { padding: 6px 8px; font-size: 11.5px; line-height: 1.4; border-width: 2px; }
  .touch #modal-readme h1 { font-size: 14px; } .touch #modal-readme h2 { font-size: 13px; } .touch #modal-readme h3, .touch #modal-readme h4 { font-size: 12px; }
  .touch #modal-readme h1, .touch #modal-readme h2, .touch #modal-readme h3, .touch #modal-readme h4 { margin: 8px 0 4px; }
  .touch #modal-readme p, .touch #modal-readme ul, .touch #modal-readme ol { margin: 0 0 6px; }
  .touch #modal-readme pre { padding: 5px; font-size: 10.5px; }
  .touch #modal-hero { border-width: 2px; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px rgba(0, 0, 0, .35); }
  .touch #modal.has-hero { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 10px; }
  .touch .hero-wait, .touch .hero-link { font-size: 11px; }
}