:root {
  color-scheme: dark;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background: #160d09;
  color: #fff8e8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 25%, rgba(124, 65, 28, .22), transparent 38%),
    #160d09;
}

button, canvas { -webkit-tap-highlight-color: transparent; }
.game-shell, .game-shell * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
html.gesture-lock, html.gesture-lock body, html.gesture-lock .game-shell, html.gesture-lock .board-wrap {
  touch-action: none;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

.game-shell {
  width: min(calc(100vw - 24px), calc(100svh - 130px), 760px);
  max-height: 100svh;
  overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}

.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 2px 12px #000;
}

.hud-card {
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 227, 175, .25);
  border-radius: 15px;
  background: rgba(37, 18, 9, .75);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.hud-card:last-child { text-align: right; }
.hud-card span { display: block; color: #d7b990; font-size: 11px; }
.hud-meter {
  width: 100%;
  height: 13px;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,235,196,.2);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}
.hud-meter i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transition: transform .12s linear, background .2s ease;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 0 9px currentColor;
}
.time-meter i { color: #f5b44f; background: linear-gradient(90deg,#f0cf62,#ed8c36); }
.time-meter i.danger { color: #ed5c45; background: linear-gradient(90deg,#ffb14e,#e74437); }
.meal-meter i { color: #e9cb77; background: linear-gradient(90deg,#ffe39a,#dca94b); }
.meal-meter.oil-meter i { color: #ffd76b; background: linear-gradient(90deg,#fff1a4,#efaa36); }

.board-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  touch-action: none;
  user-select: none;
}

.companion {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  padding: 7px 13px;
  border: 1px solid rgba(255,234,190,.25);
  border-radius: 999px;
  color: #f5dfbc;
  background: rgba(35,18,10,.72);
  backdrop-filter: blur(6px);
  font-size: clamp(10px,2.4vw,13px);
  pointer-events: none;
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #6a3519;
  cursor: none;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(17, 8, 4, .62);
  backdrop-filter: blur(3px);
  transition: opacity .25s ease;
}

.overlay.hidden { opacity: 0; pointer-events: none; }
#overlay.result-celebrating { background: rgba(17,8,4,0); animation: result-shade .45s 1s ease forwards; }
#overlay.result-celebrating > .panel { opacity: 0; transform: translateY(16px) scale(.96); animation: result-panel-in .48s 1.12s cubic-bezier(.2,.85,.25,1.15) forwards; }
.result-fx { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
#overlay.result-celebrating .result-fx { animation: result-fx-out .24s 1.02s ease forwards; }
#overlay > .panel { position: relative; z-index: 2; }
.result-drop { width: 128px; height: 112px; border-radius: 52% 48% 55% 45%; background: radial-gradient(circle at 33% 25%,#fffbd5 0 7%,#ffd95d 18%,#dc861c 62%,#843b08 100%); box-shadow: 0 0 28px rgba(255,187,50,.8),inset -10px -12px 20px rgba(91,37,3,.35); animation: result-plurun 1.05s cubic-bezier(.2,.9,.25,1.15) both; }
.result-ripple { position: absolute; width: 120px; height: 120px; border: 5px solid rgba(255,225,142,.7); border-radius: 50%; animation: result-ripple 1.15s .18s ease-out both; }
.result-ripple.two { animation-delay: .38s; }
.result-fx strong { position: absolute; top: calc(50% + 88px); color: #fff2af; font-size: clamp(38px,10vw,72px); font-weight: 1000; letter-spacing: .08em; text-shadow: 0 4px 0 #8c4c12,0 0 24px #ffc34e; animation: result-word .75s .3s cubic-bezier(.15,.9,.25,1.3) both; }
#overlay.master-result .result-drop { filter: saturate(1.2) brightness(1.15); box-shadow: 0 0 46px #ffd84e,0 0 90px rgba(255,185,40,.45); }
#overlay.master-result .result-fx strong { color: #fff7bd; text-shadow: 0 4px 0 #9a5610,0 0 18px #fff,0 0 42px #ffd338; }
.result-score-reveal { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: -5px auto 12px; color: #f4ca82; }
.result-score-reveal span { margin-right: 4px; font-size: 9px; letter-spacing: .12em; }
.result-score-reveal strong { color: #ffe49a; font-size: 27px; line-height: 1; text-shadow: 0 0 12px rgba(255,202,76,.4); }
.result-score-reveal small { font-size: 10px; }
#overlay.new-best-result .result-score-reveal strong { color: #fff7b0; animation: new-best-glow .8s 1.65s ease-in-out 2; }
@keyframes result-plurun { 0% { opacity:0; transform:scale(.15,1.7) translateY(-90px) } 48% { opacity:1; transform:scale(1.32,.65) translateY(13px) } 68% { transform:scale(.82,1.25) translateY(-10px) } 84% { transform:scale(1.1,.9) translateY(3px) } 100% { transform:scale(1) } }
@keyframes result-ripple { from { opacity:.85; transform:scale(.45) } to { opacity:0; transform:scale(4.6) } }
@keyframes result-word { from { opacity:0; transform:scale(.35) rotate(-5deg) } to { opacity:1; transform:scale(1) rotate(0) } }
@keyframes result-shade { to { background:rgba(17,8,4,.62) } }
@keyframes result-panel-in { to { opacity:1; transform:none } }
@keyframes result-fx-out { to { opacity:0; visibility:hidden } }
@keyframes new-best-glow { 50% { transform:scale(1.08); text-shadow:0 0 8px #fff,0 0 24px #ffd438 } }
.pause-overlay { z-index: 21; background: rgba(17, 8, 4, .72); }
.external-browser-overlay { z-index: 22; background: rgba(17,8,4,.9); }
.credit-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-top: 13px;
  padding: 5px 10px;
  color: #bfa98d;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.credit-link:active { transform: none; box-shadow: none; }
.kinetic-text {
  position: fixed; top: max(14%,calc(env(safe-area-inset-top) + 64px)); left: 50%; z-index: 30;
  display: flex; justify-content: center; width: min(94vw,760px); transform: translateX(-50%);
  color: #fff2b5; font-size: clamp(30px,8vw,66px); font-weight: 1000; letter-spacing: .03em;
  text-align: center; text-shadow: 0 4px 0 #803d0b,0 0 18px #ffb83e; pointer-events: none;
}
.kinetic-text span { display: inline-block; white-space: pre; animation: dancing-letter .78s cubic-bezier(.2,.9,.25,1.25) both; animation-delay: calc(var(--i)*.055s); }
.kinetic-text.finished { color: #d7ff9f; text-shadow: 0 4px 0 #426a16,0 0 18px #8ed54e; }
.kinetic-text.thanks { color: #ffe1a1; font-size: clamp(25px,6.7vw,54px); }
@keyframes dancing-letter {
  0% { opacity:0; transform:translateY(-45px) rotate(-16deg) scale(.45) }
  45% { opacity:1; transform:translateY(9px) rotate(9deg) scale(1.18,.82) }
  68% { transform:translateY(-12px) rotate(-5deg) scale(.92,1.12) }
  100% { opacity:1; transform:none }
}
.panel-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 5px; }
.best-score-text { margin: 8px auto 0 !important; color: #e5bc7d !important; font-size: 11px !important; font-weight: 800; }
.result-achievement {
  display: grid; gap: 3px; width: min(100%,300px); margin: -5px auto 13px; padding: 9px 12px;
  border: 1px solid rgba(255,215,107,.35); border-radius: 13px;
  background: linear-gradient(135deg,rgba(255,210,97,.14),rgba(255,255,255,.035));
}
.result-achievement span { color: #bfa98d; font-size: 9px; letter-spacing: .14em; }
.result-achievement strong { color: #ffe49a; font-size: 18px; text-shadow: 0 0 10px rgba(255,203,76,.28); }
.result-achievement small { color: #edbd72; font-size: 10px; }
.result-achievement.new-best { border-color: #ffd76b; box-shadow: 0 0 15px rgba(255,198,66,.18); }
.result-achievement.new-unlock { animation: achievement-unlock .65s .2s cubic-bezier(.2,.85,.25,1.2) both; }
#overlay.result-celebrating .result-achievement.new-unlock { animation-delay: 1.55s; }
@keyframes achievement-unlock { from { opacity:0; transform:scale(.72) rotate(-2deg) } to { opacity:1; transform:none } }
.external-browser-panel { width: min(94%, 410px); }
.external-browser-guide { padding: 10px; border: 1px solid rgba(255,225,178,.2); border-radius: 10px; background: rgba(0,0,0,.25); }
.external-browser-actions { display: grid; justify-items: center; gap: 11px; }
.quiet-button { padding: 8px 12px; color: #b99b7d; background: transparent; box-shadow: none; font-size: 12px; }
.quiet-button:active { transform: none; box-shadow: none; }
.external-browser-message { min-height: 20px; margin: 12px 0 0 !important; color: #f4cf8d !important; font-size: 11px !important; }
.overlay { overflow-y: auto; }
.pause-panel { width: min(88%, 360px); }
.pause-actions { display: grid; gap: 13px; justify-items: center; }
.secondary-button {
  color: #f1d8b5;
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
  border: 1px solid rgba(255,225,178,.2);
}

.portal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 250px);
  min-height: 44px;
  margin: 13px auto 0;
  padding: 10px 18px;
  border: 1px solid rgba(255,225,178,.22);
  border-radius: 999px;
  color: #efd9b9;
  background: rgba(255,255,255,.07);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.portal-link:hover, .portal-link:focus-visible { color: #fff4df; border-color: rgba(255,225,178,.5); }
.hidden { display: none !important; }

.reaction-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,225,178,.16);
}
.panel .reaction-title { margin: 0 0 9px; color: #f3d8ad; font-size: 13px; font-weight: 800; }
.reaction-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.reaction-button {
  width: auto;
  min-width: 0;
  padding: 6px 3px 7px;
  border: 1px solid rgba(255,225,178,.18);
  border-radius: 12px;
  color: #efd9b9;
  background: rgba(255,255,255,.045);
  box-shadow: none;
  font-size: 9px;
}
.reaction-button img { display: block; width: min(100%,54px); aspect-ratio: 1; margin: 0 auto 3px; object-fit: contain; }
.reaction-button span { display: block; white-space: nowrap; }
.reaction-button.selected { border-color: #f4bd57; color: #3d1d09; background: linear-gradient(#ffdc82,#eaaa42); }
.reaction-button:active { transform: none; box-shadow: none; }
.panel .reaction-message { min-height: 16px; margin: 7px 0 0; color: #e5bc7d; font-size: 10px; line-height: 1.4; }

.ranking-entry-overlay, .ranking-overlay { z-index: 24; background: rgba(17,8,4,.9); }
.collection-overlay { z-index: 24; background: rgba(17,8,4,.9); }
.collection-panel { position: relative; width: min(94%,460px); }
.collection-panel h1 { font-size: clamp(25px,7vw,35px); }
.panel .collection-progress { margin: -5px auto 11px; color: #ffd76b; font-size: 14px; font-weight: 900; }
.collection-list { display: grid; gap: 10px; }
.collection-group { padding: 8px; border: 1px solid rgba(255,225,178,.13); border-radius: 12px; background: rgba(0,0,0,.14); }
.collection-group h2 { margin: 0 0 6px; color: #e7bd7c; font-size: 11px; text-align: left; }
.collection-group-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.collection-group.hard { border-color: rgba(255,190,75,.28); background: linear-gradient(135deg,rgba(115,39,14,.22),rgba(0,0,0,.18)); }
.collection-card { display: grid; gap: 3px; min-width: 0; padding: 9px 7px; border: 1px solid rgba(255,225,178,.22); border-radius: 11px; background: rgba(255,255,255,.045); }
.collection-card i { color: #ffd76b; font-size: 17px; font-style: normal; }
.collection-card strong { color: #f7dfbd; font-size: 11px; }
.collection-card small { color: #bfa98d; font-size: 8px; line-height: 1.35; }
.collection-card.locked { filter: grayscale(1); opacity: .52; }
.collection-card.locked i { color: #8f8171; }
.panel .collection-note { margin: 10px auto 0; color: #a98e70; font-size: 9px; }
.tutorial-overlay { z-index: 25; background: rgba(17,8,4,.92); }
.tutorial-overlay, .tutorial-overlay * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.tutorial-panel { width: min(92%,390px); }
.tutorial-panel h1 { font-size: clamp(23px,6vw,31px); }
.tutorial-canvas { display: block; width: min(100%,360px); aspect-ratio: 6/5; margin: 0 auto 10px; border: 1px solid rgba(255,225,178,.18); border-radius: 20px; background: #34190d; cursor: pointer; touch-action: none; }
.panel .tutorial-feedback { min-height: 20px; margin: -3px auto 8px; color: #f0bd69; font-size: 11px; font-weight: 800; }
.panel .tutorial-feedback.success { color: #b9e873; }
.tutorial-panel #tutorialNext:disabled { opacity: .38; transform: none; box-shadow: 0 4px 0 #6c421c; cursor: default; }
.tutorial-dots { display: flex; justify-content: center; gap: 7px; margin: 0 0 12px; }
.tutorial-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tutorial-dots i.active { background: #ffd76b; box-shadow: 0 0 7px #ffd76b; }
.ranking-entry-panel, .ranking-panel { width: min(94%,430px); }
.ranking-entry-panel h1, .ranking-panel h1 { font-size: clamp(24px,7vw,34px); }
.ranking-result strong { color: #ffd76b; font-size: 32px; }
.ranking-entry-panel form { display: grid; gap: 9px; justify-items: center; }
.ranking-entry-panel label { color: #d7b990; font-size: 11px; }
.nickname-rule { color: #bfa98d; font-size: 9px; line-height: 1.5; }
.ranking-entry-panel input {
  width: min(100%,270px); padding: 12px 14px; border: 1px solid rgba(255,225,178,.35); border-radius: 10px;
  color: #fff8e8; background: rgba(0,0,0,.35); font: inherit; text-align: center;
}
.ranking-message { min-height: 18px; margin: 9px 0 0 !important; color: #d7b990 !important; font-size: 10px !important; }
.ranking-message.error { color: #ff9c85 !important; }
.ranking-panel { position: relative; }
.modal-close {
  position: absolute; top: 9px; right: 9px; display: block;
  width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,225,178,.18);
  color: #efd9b9; background: rgba(255,255,255,.08); box-shadow: none; font-size: 0; line-height: 1;
}
.modal-close::before, .modal-close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 17px; height: 2px;
  border-radius: 999px; background: currentColor; transform-origin: center;
}
.modal-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.modal-close:active { transform: none; box-shadow: none; }
.ranking-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px 0; }
.ranking-tabs button { width: auto; padding: 8px 4px; border: 1px solid rgba(255,225,178,.18); color: #c7ab87; background: rgba(0,0,0,.24); box-shadow: none; font-size: 11px; }
.ranking-tabs button.selected { color: #3d1d09; background: linear-gradient(#ffdc82,#eaaa42); }
.ranking-tabs button:active { transform: none; box-shadow: none; }
.ranking-self { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0 11px; padding: 9px 11px; border: 1px solid rgba(255,225,178,.22); border-radius: 10px; text-align: left; }
.ranking-self span { grid-row: 1/3; align-self: center; color: #bfa98d; font-size: 9px; }
.ranking-self strong { color: #ffd76b; font-size: 17px; }
.ranking-self small { color: #d7b990; font-size: 9px; }
.ranking-list-title { margin: 0 0 5px; color: #e5bc7d; font-size: 11px; text-align: left; }
.ranking-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ranking-list li { display: grid; grid-template-columns: 42px 1fr auto; gap: 6px; padding: 6px 8px; border-bottom: 1px solid rgba(255,225,178,.12); background: rgba(0,0,0,.2); font-size: 10px; text-align: left; }
.ranking-list li:first-child { color: #fff1a1; background: rgba(106,76,15,.25); }
.ranking-list .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ranking-list .score { color: #ffd76b; font-weight: 900; }

.panel {
  width: min(92%, 430px);
  padding: 20px 18px 18px;
  text-align: center;
  border: 1px solid rgba(255, 226, 175, .28);
  border-radius: 24px;
  background: rgba(35, 18, 10, .88);
  box-shadow: 0 16px 46px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.1);
}

.eyebrow { margin: 0 0 6px; color: #e5bc7d; font-size: 12px; letter-spacing: .18em; }
h1 { margin: 0 0 12px; font-size: clamp(28px, 7vw, 42px); }
.panel p:not(.eyebrow) { margin: 0 auto 18px; line-height: 1.65; color: #f2dfc6; font-size: 14px; white-space: pre-line; }

.difficulty {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
  margin: 0 0 18px;
}

.difficulty-card {
  width: auto;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid rgba(255,225,178,.2);
  border-radius: 12px;
  color: #efd9b9;
  background: rgba(255,255,255,.045);
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
}

.difficulty-card b,.difficulty-card span { display: block; }
.difficulty-card b { margin-bottom: 4px; font-size: 11px; }
.difficulty-card span { color: #bfa98d; font-size: 9px; }
.difficulty-card.selected { border-color: #f4bd57; color: #3d1d09; background: linear-gradient(#ffdc82,#eaaa42); }
.difficulty-card.selected span { color: #714013; }
.difficulty-card:active { transform: none; box-shadow: none; }

button {
  width: min(100%, 250px);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  color: #351807;
  background: linear-gradient(#ffd776, #eda83b);
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 6px 0 #9a571c, 0 12px 24px rgba(0,0,0,.3);
  cursor: pointer;
}

button:active { transform: translateY(4px); box-shadow: 0 2px 0 #9a571c; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.hint { margin: 0; text-align: center; color: #b99b7d; font-size: 12px; }
.footer-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.sound-toggle {
  flex: 0 0 auto;
  width: auto;
  padding: 6px 10px;
  border: 1px solid rgba(255,225,178,.22);
  border-radius: 999px;
  color: #e9cda8;
  background: rgba(255,255,255,.06);
  box-shadow: none;
  font-size: 11px;
}
.sound-toggle:active { transform: none; box-shadow: none; }
.sound-toggle:disabled { opacity: .38; cursor: default; }

@media (max-width: 560px) {
  .footer-row { align-items: stretch; flex-direction: column; }
  .footer-actions { justify-content: center; }
  .panel { width: min(94%, 400px); padding: 18px 14px 16px; }
  .panel p:not(.eyebrow) { margin-bottom: 11px; font-size: 12px; line-height: 1.5; }
  .panel h1 { margin-bottom: 8px; font-size: clamp(26px, 8vw, 38px); }
  .difficulty { gap: 5px; margin-bottom: 11px; }
  .difficulty-card { padding: 8px 3px; }
  .difficulty-card b { font-size: 10px; }
  .difficulty-card span { font-size: 8px; }
  .panel > button:not(.modal-close) { padding: 11px 18px; }
  .panel > .modal-close { width: 36px; height: 36px; padding: 0; }
  .credit-link { margin-top: 7px; padding: 4px 8px !important; }
  .reaction-section { margin-top: 10px; padding-top: 9px; }
  .reaction-button img { width: min(100%,46px); }
}

@media (max-height: 720px) and (orientation: landscape) {
  .game-shell { width: min(calc(100vw - 24px), calc(100svh - 98px), 760px); padding-block: 6px; }
  .hud { margin-bottom: 6px; }
  .hint { display: none; }
}