:root {
    --ink: #0d2030;
    --paper: #fff8e7;
    --gull: #ffd166;
    --bad: #ef476f;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    width: 100%; height: 100%; overflow: hidden; background: #0d2030;
    overscroll-behavior: none; -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }
  body {
    font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
    color: var(--paper);
    -webkit-font-smoothing: antialiased;
  }
  #game { display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; }

  /* ---------- HUD ---------- */
  #hud {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(18px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
    text-shadow: 0 2px 0 rgba(0,0,0,.35);
  }
  #hpBar {
    width: 150px; height: 9px; border-radius: 99px; margin-top: 7px;
    background: rgba(13,32,48,.55); border: 2px solid rgba(255,248,231,.3);
    overflow: hidden;
  }
  #hpFill { height: 100%; width: 100%; background: #06d6a0; transition: width .12s, background .3s; }
  #staminaBar {
    width: 150px; height: 7px; border-radius: 99px; margin-top: 4px;
    background: rgba(13,32,48,.55); border: 1px solid rgba(255,248,231,.3);
    overflow: hidden;
  }
  #staminaFill {
    height: 100%; width: 100%; background: linear-gradient(90deg,#4cc9f0,#bdeff8);
    transition: width .06s linear, filter .15s;
  }
  #staminaBar.empty #staminaFill { filter: saturate(.35) brightness(.7); }
  #poopBar {
    width: 150px; height: 7px; border-radius: 99px; margin-top: 4px;
    background: rgba(13,32,48,.55); border: 1px solid rgba(255,248,231,.3);
    overflow: hidden;
  }
  #poopFill {
    height: 100%; width: 0%; background: linear-gradient(90deg,#8a5a3c,#c9976a);
    transition: width .12s;
  }
  .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .panel {
    background: rgba(13,32,48,.42);
    border: 2px solid rgba(255,248,231,.22);
    border-radius: 14px;
    padding: 8px 14px;
    backdrop-filter: blur(6px);
  }
  .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
  .value { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
  #timeVal.low { color: var(--bad); animation: pulse .6s infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
  #comboWrap { text-align: center; opacity: 0; transition: opacity .2s; }
  #comboWrap.on { opacity: 1; }
  #comboVal { font-size: 34px; font-weight: 900; color: var(--gull); }
  #buffs { font-size: 14px; font-weight: 800; color: var(--gull); min-height: 18px; margin-top: 2px; }
  #carryBar {
    width: 190px; height: 12px; border-radius: 99px;
    background: rgba(13,32,48,.5); border: 2px solid rgba(255,248,231,.3);
    overflow: hidden; opacity: 0; transition: opacity .18s;
  }
  #carryBar.on { opacity: 1; }
  #carryFill { height: 100%; width: 0%; background: linear-gradient(90deg,#ffd166,#06d6a0); transition: width .06s linear; }
  #carryHint { font-size: 13px; font-weight: 700; text-align: center; margin-top: 5px; min-height: 18px; }
  .bottom { align-items: flex-end; }

  /* ---------- iPhone / iPad controls ---------- */
  #touchControls {
    position: fixed; z-index: 4;
    left: calc(14px + env(safe-area-inset-left));
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: none; align-items: flex-end; justify-content: space-between;
    pointer-events: none; touch-action: none;
  }
  /* The whole left half of the screen summons the stick under the finger. */
  #stickZone {
    position: fixed; z-index: 3; left: 0; top: 0; bottom: 0; width: 46vw;
    display: none; pointer-events: none; touch-action: none;
  }
  body.game-playing #stickZone { display: block; pointer-events: auto; }
  #touchStick {
    position: relative; width: 170px; height: 170px; border-radius: 50%;
    pointer-events: auto; touch-action: none;
    background: rgba(13,32,48,.34); border: 2px solid rgba(255,248,231,.28);
    box-shadow: inset 0 0 24px rgba(13,32,48,.25), 0 4px 16px rgba(13,32,48,.18);
    backdrop-filter: blur(4px);
  }
  #touchStick::before, #touchStick::after {
    content: ''; position: absolute; left: 50%; top: 50%; opacity: .18; background: var(--paper);
    transform: translate(-50%,-50%); pointer-events: none;
  }
  #touchStick::before { width: 72%; height: 2px; }
  #touchStick::after { width: 2px; height: 72%; }
  #touchKnob {
    position: absolute; left: 50%; top: 50%; width: 74px; height: 74px;
    border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none;
    background: rgba(255,248,231,.82); border: 3px solid rgba(13,32,48,.2);
    box-shadow: 0 4px 12px rgba(13,32,48,.28);
  }
  #touchActions {
    /* Anchored to the viewport's right edge so the buttons never move,
       no matter where the floating joystick currently lives. */
    position: fixed;
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(2, 68px); gap: 10px;
    pointer-events: none; align-items: end;
  }
  .touch-btn {
    width: 68px; height: 58px; min-width: 0; padding: 0;
    pointer-events: auto; touch-action: none; border-radius: 19px;
    color: var(--paper); background: rgba(13,32,48,.62);
    border: 2px solid rgba(255,248,231,.38); box-shadow: 0 4px 0 rgba(13,32,48,.42);
    font-size: 11px; line-height: 1.05; letter-spacing: .06em;
    text-shadow: 0 1px 0 rgba(0,0,0,.35); backdrop-filter: blur(5px);
  }
  .touch-btn.boost { grid-column: 1 / -1; width: 100%; color: #bdeff8; border-color: rgba(76,201,240,.7); }
  .touch-btn.active, .touch-btn:active {
    transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 rgba(13,32,48,.42);
    background: rgba(255,248,231,.24);
  }
  #touchPause {
    position: fixed; z-index: 4; display: none;
    right: calc(12px + env(safe-area-inset-right));
    top: calc(68px + env(safe-area-inset-top));
    width: 46px; height: 42px; border-radius: 15px; font-size: 17px;
  }

  /* ---------- Overlays ---------- */
  .screen {
    position: fixed; inset: 0; z-index: 10; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; text-align: center;
    padding: calc(30px + env(safe-area-inset-top)) calc(30px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(30px + env(safe-area-inset-left));
    background: radial-gradient(ellipse at 50% 40%, rgba(13,32,48,.72), rgba(13,32,48,.94));
    backdrop-filter: blur(3px); overflow-y: auto; touch-action: pan-y;
  }
  .screen.on { display: flex; }
  h1 { font-size: clamp(34px, 7vw, 68px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
  h1 .sub { display: block; font-size: .34em; letter-spacing: .3em; font-weight: 700; opacity: .65; margin-top: 10px; text-transform: uppercase; }
  .keys { display: grid; grid-template-columns: auto auto; gap: 8px 16px; font-size: 15px; opacity: .9; }
  .keys b { background: rgba(255,248,231,.14); border: 1px solid rgba(255,248,231,.3); border-radius: 7px; padding: 2px 9px; font-family: ui-monospace, monospace; }
  .keys span { text-align: left; }
  .tips { max-width: 520px; font-size: 15px; line-height: 1.6; opacity: .85; }

  /* The title screen uses its own compact layout so added control rows never
     push the title above the viewport or the launch button below it. */
  #startScreen { justify-content: flex-start; text-align: left; overflow-x: hidden; }
  .start-layout {
    flex: none; width: min(1180px, 100%); margin: auto;
    display: grid; grid-template-columns: minmax(300px, .82fr) minmax(540px, 1.28fr);
    align-items: center; gap: clamp(32px, 5vw, 76px);
  }
  .start-layout > * { min-width: 0; }
  .start-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .start-eyebrow { color: var(--gull); font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
  #startScreen h1 { font-size: clamp(48px, 6.2vw, 82px); line-height: .92; }
  #startScreen h1 .sub { font-size: .27em; margin-top: 16px; }
  .start-lead { max-width: 430px; font-size: 18px; line-height: 1.55; opacity: .88; }
  .start-objective {
    max-width: 430px; padding: 12px 15px; border-left: 4px solid var(--gull);
    border-radius: 0 10px 10px 0; background: rgba(255,209,102,.08);
    font-size: 14px; line-height: 1.5; opacity: .88;
  }
  #startBtn { min-width: 190px; margin-top: 4px; }
  .start-guide {
    padding: 19px 21px 20px; border: 2px solid rgba(255,248,231,.18);
    border-radius: 20px; background: rgba(13,32,48,.38); backdrop-filter: blur(7px);
    box-shadow: 0 18px 45px rgba(0,0,0,.13);
  }
  .start-guide > .label { margin-bottom: 11px; color: var(--gull); opacity: .9; }
  .start-guide .keys {
    grid-template-columns: 112px minmax(0,1fr); gap: 6px 13px;
    font-size: 13px; align-items: center;
  }
  .start-guide .keys b { text-align: center; white-space: nowrap; padding: 3px 7px; }
  .start-guide .keys span { line-height: 1.25; }
  .start-tips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
  .start-tip {
    padding: 9px 11px; border-radius: 11px; background: rgba(255,248,231,.07);
    border: 1px solid rgba(255,248,231,.1); font-size: 12px; line-height: 1.42; opacity: .82;
  }
  button {
    pointer-events: auto; font: inherit; font-weight: 800; font-size: 19px;
    color: #0d2030; background: var(--gull); border: none;
    padding: 14px 40px; border-radius: 99px; cursor: pointer;
    box-shadow: 0 5px 0 #c9a33f; transition: transform .08s, box-shadow .08s;
  }
  button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #c9a33f; }
  button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9a33f; }
  #finalScore { font-size: 76px; font-weight: 900; color: var(--gull); line-height: 1; }
  #breakdown { font-size: 15px; opacity: .85; line-height: 1.8; }
  #best { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
  #rank { font-size: 22px; font-weight: 800; }

  @media (max-width: 900px) {
    #startScreen { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .start-layout { grid-template-columns: minmax(0,1fr); gap: 24px; margin: 0 auto; max-width: 680px; }
    .start-hero { align-items: center; text-align: center; gap: 13px; }
    #startScreen h1 { font-size: clamp(44px, 12vw, 68px); }
    .start-lead, .start-objective { max-width: 560px; }
    .start-objective { border-left: 0; border-top: 3px solid var(--gull); border-radius: 10px; }
    #startBtn { align-self: center; }
  }
  @media (max-width: 520px) {
    #startScreen {
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
    #startScreen h1 { font-size: clamp(38px, 11vw, 44px); }
    #startScreen h1, .start-lead, .start-objective { width: 100%; max-width: 100%; min-width: 0; white-space: normal; }
    #startScreen h1 { text-wrap: balance; overflow-wrap: normal; }
    .start-lead { font-size: 15px; overflow-wrap: anywhere; }
    .start-objective { overflow-wrap: anywhere; }
    .start-hero, .start-guide { width: 100%; min-width: 0; }
    .start-guide { padding: 14px 12px; overflow: hidden; }
    .start-guide .keys { grid-template-columns: 82px minmax(0,1fr); font-size: 10.5px; gap: 5px 7px; }
    .start-guide .keys span { min-width: 0; overflow-wrap: anywhere; }
    .start-tips { grid-template-columns: 1fr; }
    .start-tip { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
  }
  @media (max-height: 720px) {
    #startScreen { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .start-layout { margin: 0 auto; }
    .start-hero { gap: 11px; }
    #startScreen h1 { font-size: clamp(42px, 5vw, 64px); }
    .start-lead { font-size: 15px; }
    .start-objective { padding: 8px 12px; font-size: 12px; }
    .start-guide { padding: 13px 16px; }
    .start-guide .keys { gap: 4px 11px; font-size: 12px; }
    .start-tips { margin-top: 9px; gap: 6px; }
    .start-tip { padding: 6px 8px; font-size: 10.5px; }
  }

  @media (hover: none), (pointer: coarse) {
    body.game-playing #touchControls { display: flex; }
    body.game-playing #touchPause { display: block; }
    #hud {
      padding: calc(8px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) calc(154px + env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left));
    }
    .panel { padding: 6px 9px; border-radius: 11px; }
    .value { font-size: 25px; }
    #hpBar, #staminaBar, #poopBar { width: 122px; }
    #buffs { max-width: 42vw; font-size: 11px; }
    #carryBar { width: min(190px, 44vw); }
    #carryHint { font-size: 11px; }
  }
  @media (hover: none) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
    #touchStick { width: 150px; height: 150px; }
    #touchKnob { width: 64px; height: 64px; }
    #touchActions { grid-template-columns: repeat(2, 62px); gap: 8px; }
    .touch-btn { width: 62px; height: 54px; }
  }
  @media (max-height: 600px) and (hover: none), (max-height: 600px) and (pointer: coarse) {
    .screen { justify-content: flex-start; gap: 10px; }
    h1 { font-size: 34px; }
    .keys { gap: 5px 10px; font-size: 12px; }
    .tips { font-size: 12px; line-height: 1.35; }
    .screen button { font-size: 16px; padding: 10px 30px; }
    /* Landscape phone: compact controls so they don't eat half the screen.
       The floating stick still grows from wherever the thumb lands. */
    /* Carry/gulp bar may sit much lower — the action buttons are on the
       right, so the bottom center is free. */
    #hud { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
    #touchStick { width: 118px; height: 118px; }
    #touchKnob { width: 52px; height: 52px; }
    #touchActions { grid-template-columns: repeat(2, 56px); gap: 7px; }
    .touch-btn { width: 56px; height: 46px; font-size: 11px; }
    #hud .value { font-size: 21px; }
    #hpBar, #staminaBar, #poopBar { width: 110px; }
  }