*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111827;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;touch-action:none}
button{font:inherit}
#app{height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#f8fafc}
#game-wrap{position:relative;min-height:0;background:#0f172a;overflow:hidden}
#game,#game canvas{width:100%!important;height:100%!important;display:block}
#hud{position:absolute;left:0;right:0;top:max(8px,env(safe-area-inset-top));display:flex;justify-content:space-around;z-index:4;padding:0 8px;pointer-events:none}
.hud-item{min-width:28%;padding:6px 10px;border-radius:12px;background:rgba(15,23,42,.78);color:white;text-align:center;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px)}
.hud-item span{display:block;font-size:11px;opacity:.7}
.hud-item b{display:block;font-size:18px}
#prompt-panel{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;text-align:center;background:rgba(255,255,255,.93);border:2px solid #f59e0b;border-radius:18px;padding:9px 12px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
#sushi-name{font-size:13px;font-weight:800;color:#92400e;margin-bottom:2px}
#prompt{font-size:27px;font-weight:900;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#typed{color:#16a34a}
#remaining{color:#111827}
#keyboard-wrap{position:relative;background:#e5e7eb;padding:7px 7px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #cbd5e1;user-select:none}
#keyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.flick-key,.subkey{appearance:none;border:0;border-radius:13px;background:white;box-shadow:0 2px 0 #cbd5e1;color:#111827;font-weight:900}
.flick-key{height:58px;font-size:22px;touch-action:none;position:relative}
.flick-key.active{transform:translateY(1px);box-shadow:0 1px 0 #94a3b8;background:#fef3c7}
.subkeys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.subkey{height:42px;font-size:17px}
#flick-guide{display:none;position:fixed;width:152px;height:152px;z-index:99;pointer-events:none;transform:translate(-50%,-50%)}
#flick-guide.show{display:block}
.g{position:absolute;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#111827;color:white;font-size:22px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.g.center{left:52px;top:52px;background:#f59e0b}
.g.up{left:52px;top:0}.g.down{left:52px;bottom:0}.g.left{left:0;top:52px}.g.right{right:0;top:52px}
@media (max-height:700px){
  .flick-key{height:50px}
  #prompt{font-size:23px}
}
.screen{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;background:linear-gradient(#fff7ed,#fecaca)}.screen.hidden{display:none}.title-logo{font-size:72px}.screen h1{font-size:36px;color:#991b1b;margin:8px}.title-card{background:#ffffffbb;padding:14px 30px;border-radius:18px;line-height:1.8}.primary-btn{margin-top:20px;width:80%;padding:16px;border:0;border-radius:18px;background:#dc2626;color:white;font-size:22px;font-weight:900;box-shadow:0 6px #991b1b}.best-box{margin-top:18px;background:#111827;color:#fff;padding:8px 18px;border-radius:99px}.result-score{font-size:52px;font-weight:1000;color:#b91c1c}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:90%;margin:15px}.result-grid>div{background:#ffffffcc;padding:12px;border-radius:13px}.result-rank{font-size:27px;font-weight:900;color:#7c2d12}#keyboard-wrap.disabled{pointer-events:none;opacity:.45}
.hud-item small{display:block;font-size:10px;color:#fde68a;margin-top:1px}
}
.plate-stack{position:absolute;right:8px;bottom:102px;width:62px;height:120px;z-index:8;pointer-events:none}
.plate{position:absolute;right:0;width:58px;height:15px;border-radius:50%;background:#fff;border:4px solid #ef4444;box-shadow:0 2px 3px #0004}
.toast{position:absolute;z-index:20;left:50%;top:38%;transform:translate(-50%,-50%);font-size:34px;font-weight:1000;color:#fff;white-space:nowrap;text-shadow:0 3px 0 #991b1b,0 0 10px #0008;pointer-events:none}
.toast.show{display:block;animation:toastPop .65s ease-out forwards}
@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}35%{opacity:1;transform:translate(-50%,-65%) scale(1.18)}100%{opacity:0;transform:translate(-50%,-95%) scale(.95)}}
#prompt-panel.miss{animation:promptMiss .26s ease-in-out}
@keyframes promptMiss{25%{transform:translateX(-9px);border-color:#dc2626;background:#fee2e2}75%{transform:translateX(9px)}}
.result-extra{margin-top:8px;font-size:14px;line-height:1.65;color:#57534e}

/* v0.31: iOS Safari flick-input hardening */
html,body,#app,#keyboard-wrap,#keyboard,.flick-key,.flick-key *,
.subkeys,.subkey,.subkey *,#flick-guide,#flick-guide *{
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-drag:none !important;
}
#keyboard-wrap,#keyboard,.flick-key,.subkeys,.subkey,#flick-guide{
  touch-action:none !important;
  overscroll-behavior:none;
}
.flick-key,.subkey{
  -webkit-appearance:none;
  appearance:none;
  cursor:default;
}
.flick-key *,.subkey *{pointer-events:none !important}

/* v0.32: iPhone Safari / WebView flick input */
#keyboard-wrap,
#keyboard,
.flick-key,
.flick-key .key-label,
.subkey,
#flick-guide,
#flick-guide .g {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  touch-action: none !important;
}

.flick-key .key-label {
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  pointer-events:none !important;
}

.flick-key,
.subkey {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none;
}

#keyboard-wrap *::selection {
  background: transparent !important;
  color: inherit !important;
}

#keyboard-wrap *::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}

#flick-guide .g{
  transition:transform .05s linear;
}

#flick-guide .g.selected{
  transform:scale(1.22);
}

/* v0.4: sound/effects */
.sound-btn{
  margin-top:10px;border:0;border-radius:999px;padding:9px 16px;
  background:#fff;color:#7f1d1d;font-weight:900;
  box-shadow:0 2px 0 #fecaca;
}
.screen-flash{
  position:absolute;inset:0;z-index:18;pointer-events:none;
  background:#fff;opacity:0;
}
.screen-flash.hit{animation:screenFlash .16s ease-out}
.screen-flash.gold{background:#fde68a}
.screen-flash.missfx{background:#fecaca}
@keyframes screenFlash{
  0%{opacity:.55}
  100%{opacity:0}
}
.fx-layer{
  position:absolute;inset:0;z-index:19;pointer-events:none;overflow:hidden;
}
.spark{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px #fff;
  animation:sparkFly .55s ease-out forwards;
}
.spark.gold{background:#fde047;box-shadow:0 0 12px #f59e0b}
.spark.red{background:#f87171;box-shadow:0 0 12px #dc2626}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}
.combo-pop{
  position:absolute;left:50%;top:31%;z-index:19;
  transform:translate(-50%,-50%);
  font-size:30px;font-weight:1000;color:#fff;
  text-shadow:0 3px 0 #7c2d12,0 0 12px #0007;
  animation:comboPop .7s ease-out forwards;
  white-space:nowrap;
}
@keyframes comboPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  30%{opacity:1;transform:translate(-50%,-65%) scale(1.22)}
  100%{opacity:0;transform:translate(-50%,-100%) scale(.9)}
}
#game-wrap.shake{animation:shake .17s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-4px,2px)}
  50%{transform:translate(4px,-2px)}
  75%{transform:translate(-3px,-1px)}
}

/* v0.5: phone-like 3x4 Japanese flick layout */
#app{
  grid-template-rows:minmax(0,48fr) minmax(0,52fr);
}

#keyboard-wrap{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 10px calc(10px + env(safe-area-inset-bottom));
}

#keyboard{
  flex:1;
  min-height:0;
  grid-template-columns:repeat(3,1fr) !important;
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:8px;
}

.flick-key{
  height:auto !important;
  min-height:0;
  font-size:25px;
  border-radius:16px;
}

.utility-key{
  font-size:20px;
}

#prompt-panel{
  bottom:8px;
  padding:8px 10px;
}

#prompt{
  font-size:24px;
}

#sushi-name{
  font-size:12px;
}

#plate-stack{
  bottom:88px;
}

@media (max-height:700px){
  #app{
    grid-template-rows:minmax(0,46fr) minmax(0,54fr);
  }
  .flick-key{
    font-size:22px;
  }
  #prompt{
    font-size:21px;
  }
}

/* v0.6 visual polish */
#game-wrap{background:#f6efe4}
#prompt-panel{border-color:#b45309;box-shadow:0 7px 18px rgba(69,26,3,.20)}
.hud-item{background:rgba(15,23,42,.86);border-color:rgba(255,255,255,.22)}
.flick-key{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #d7dde5;box-shadow:0 3px 0 #cbd5e1}
.utility-key{background:linear-gradient(180deg,#f1f5f9,#e2e8f0)}

/* v0.61 scene readiness */
.primary-btn:disabled{
  opacity:.55;
  filter:grayscale(.35);
  box-shadow:0 3px 0 #9ca3af;
  transform:none !important;
}


.demo-sign{
  position:absolute;
  left:50%;
  top:8%;
  transform:translateX(-50%) rotate(-1deg);
  z-index:4;
  padding:7px 18px;
  border:3px solid #7c2d12;
  border-radius:9px;
  background:#fffaf0;
  color:#7c2d12;
  font-weight:1000;
  font-size:15px;
  white-space:nowrap;
  box-shadow:0 4px 0 rgba(124,45,18,.16);
}

.demo-lane{
  position:absolute;
  left:0;
  right:0;
  top:31%;
  height:45%;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg,#9aa8b4 0 34px,#8796a2 34px 38px);
  border-top:8px solid #5b6872;
  border-bottom:10px solid #3e4b55;
  box-shadow:inset 0 8px 12px rgba(255,255,255,.15), inset 0 -8px 12px rgba(0,0,0,.12);
}

.demo-belt-lines{
  position:absolute;
  inset:15% 0 auto 0;
  height:7px;
  opacity:.55;
  background:repeating-linear-gradient(90deg,#d9e1e7 0 46px,transparent 46px 78px);
  animation:demoBelt 1s linear infinite;
}

@keyframes demoBelt{
  to{background-position:-78px 0}
}

.demo-sushi{
  position:absolute;
  top:50%;
  width:110px;
  height:88px;
  transform:translateY(-50%);
  animation:demoSushiMove 10s linear infinite;
  will-change:transform,left;
}

.demo-sushi-1{animation-delay:-1s}
.demo-sushi-2{animation-delay:-3.5s}
.demo-sushi-3{animation-delay:-6s}
.demo-sushi-4{animation-delay:-8.5s}

@keyframes demoSushiMove{
  0%{left:110%;transform:translateY(-50%) rotate(0deg)}
  48%{transform:translateY(-53%) rotate(-1deg)}
  52%{transform:translateY(-47%) rotate(1deg)}
  100%{left:-130px;transform:translateY(-50%) rotate(0deg)}
}

.demo-plate{
  position:absolute;
  left:7px;
  bottom:4px;
  width:96px;
  height:27px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 5px 5px rgba(0,0,0,.2);
}
.plate-blue{border:6px solid #3b82f6}
.plate-red{border:6px solid #ef4444}
.plate-gold{border:6px solid #eab308}
.plate-green{border:6px solid #22c55e}

.demo-nigiri{
  position:absolute;
  left:18px;
  bottom:20px;
  width:72px;
  height:52px;
}
.demo-nigiri .rice{
  position:absolute;
  left:7px;
  bottom:0;
  width:58px;
  height:29px;
  border-radius:45% 45% 38% 38%;
  background:#fffdf4;
  border:2px solid #e7e5e4;
  box-shadow:inset 0 -4px 0 #f5f5f4;
}
.demo-nigiri .topping{
  position:absolute;
  left:0;
  top:4px;
  width:72px;
  height:28px;
  border-radius:48% 46% 35% 38%;
  transform:rotate(-3deg);
  box-shadow:0 4px 2px rgba(0,0,0,.12);
}
.demo-nigiri.tuna .topping{
  background:linear-gradient(135deg,#ef4444,#b91c1c);
}
.demo-nigiri.salmon .topping{
  background:
    repeating-linear-gradient(115deg,#fb923c 0 10px,#ffedd5 10px 14px);
}
.demo-nigiri.tamago .topping{
  background:linear-gradient(180deg,#fde047,#eab308);
}
.demo-nigiri .nori{
  position:absolute;
  left:31px;
  top:1px;
  width:12px;
  height:46px;
  background:#17211b;
  border-radius:2px;
}

.demo-gunkan{
  position:absolute;
  left:25px;
  bottom:21px;
  width:61px;
  height:52px;
}
.demo-gunkan .nori-wrap{
  position:absolute;
  left:0;
  bottom:0;
  width:61px;
  height:37px;
  border-radius:8px 8px 12px 12px;
  background:#17211b;
}
.ikura-dot{
  position:absolute;
  width:17px;
  height:17px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fed7aa 0 13%,#fb923c 16%,#ea580c 70%);
  box-shadow:0 2px 2px rgba(0,0,0,.2);
}
.demo-gunkan .d1{left:4px;top:4px}
.demo-gunkan .d2{left:20px;top:0}
.demo-gunkan .d3{left:37px;top:5px}
.demo-gunkan .d4{left:13px;top:14px}
.demo-gunkan .d5{left:31px;top:15px}

.demo-caption{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  color:#7c2d12;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  opacity:.82;
}

@media (prefers-reduced-motion:reduce){
  .demo-sushi,.demo-belt-lines{animation-duration:0.001ms;animation-iteration-count:1}
}

/* v0.64: keep keyboard labels simple */
#special-key .key-label{font-size:27px}
#space-key .key-label{font-size:21px}

/* v0.66 visible build version */
.version-label{
  position:static;
  margin-top:-2px;
  margin-bottom:2px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:#7c2d12;
  opacity:.32;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

/* ==========================================================================
   v0.70  タイトルデモ / キーボード切替  ※ここが唯一の切替ロジック
   v0.62 / v0.67 / v0.68 / v0.69 の重複ブロックは全部削除済み
   ========================================================================== */

/* ビルド整合チェック用（main.js が読み取る） */
:root{ --build-version:"1.21"; }

/* --- 既定（プレイ中）: キーボードを出し、デモは消す --- */
.title-sushi-demo{ display:none; }

/* --- タイトル/リザルト中: デモを出し、キーボードは完全に消す --- */
#keyboard-wrap.title-demo-mode{
  position:relative;
  overflow:hidden;
  height:auto;
  min-height:0;
  padding:0 0 env(safe-area-inset-bottom);
  background:linear-gradient(180deg,#fff8e8 0%,#fff1d6 34%,#dfe7ed 34%,#d4dde4 100%);
}

#keyboard-wrap.title-demo-mode > #keyboard,
#keyboard-wrap.title-demo-mode > #flick-guide{
  display:none !important;
}

#keyboard-wrap.title-demo-mode > #title-sushi-demo{
  display:block;
  position:absolute;
  inset:0 0 env(safe-area-inset-bottom) 0;
  overflow:hidden;
  pointer-events:none;
  z-index:5;
}

/* タイトル中の「入力不可」減光をデモに適用しない（デモは常にくっきり） */
#keyboard-wrap.disabled.title-demo-mode{ opacity:1; }

/* --- プレイ中は通常のキーボード寸法に戻す --- */
#keyboard-wrap:not(.title-demo-mode){
  height:auto;
  min-height:0;
}

/* --- ビルド不一致の警告バナー（キャッシュ検知用） --- */
.stale-banner{
  position:fixed;left:0;right:0;top:0;z-index:9999;
  background:#b91c1c;color:#fff;font-size:12px;font-weight:700;
  padding:6px 10px;text-align:center;line-height:1.4;
}

/* v0.72 result screen: hide keyboard area completely */
#keyboard-wrap.result-hidden-mode{
  display:none !important;
}

#app:has(#keyboard-wrap.result-hidden-mode){
  grid-template-rows:1fr !important;
}

#result-screen{
  overflow-y:auto;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

#result-screen .primary-btn{
  margin-bottom:16px;
}

/* v0.73 pending kana transform indicator */
.pending-kana{
  position:relative;
  display:inline-block;
  padding-right:.08em;
}

.pending-mark{
  position:absolute;
  color:#111827 !important;
  font-weight:900;
  line-height:1;
  pointer-events:none;
  text-shadow:none;
  z-index:2;
}

/* dakuten / handakuten: just above and to the right of the base kana */
.pending-dakuten,
.pending-handakuten{
  font-size:.48em;
  right:-.28em;
  top:-.18em;
}

/* small-kana conversion: small black "小" hint at upper-right */
.pending-small{
  font-size:.34em;
  right:-.35em;
  top:-.28em;
}

/* v0.76 Android system-gesture safety
   The OS bottom-edge swipe cannot be reliably cancelled from a web app.
   Keep the lowest flick row physically away from the navigation gesture area. */

:root{
  --gesture-safe-bottom: 18px;
}

@media (pointer:coarse){
  :root{
    --gesture-safe-bottom: 34px;
  }
}

#keyboard-wrap:not(.title-demo-mode):not(.result-hidden-mode){
  padding-bottom:
    calc(
      10px
      + env(safe-area-inset-bottom)
      + var(--gesture-safe-bottom)
    ) !important;
}

/* Give the keyboard a little more vertical room so keys do not become too short
   after reserving the system gesture zone. */
#app{
  grid-template-rows:minmax(0,46fr) minmax(0,54fr);
}

@media (pointer:coarse) and (max-height:800px){
  #app{
    grid-template-rows:minmax(0,43fr) minmax(0,57fr);
  }
}

/* Visual dead-zone hint: intentionally blank area under the final row. */
#keyboard-wrap:not(.title-demo-mode):not(.result-hidden-mode)::after{
  content:"";
  display:block;
  flex:0 0 var(--gesture-safe-bottom);
  width:100%;
  pointer-events:none;
}

/* Prevent scroll/overscroll from starting inside the game keyboard.
   This helps browser gestures, though OS navigation gestures still take priority. */
#keyboard-wrap,
#keyboard-wrap *{
  overscroll-behavior:none;
}

.android-device{
  --gesture-safe-bottom: 44px;
}

@media (max-height:720px){
  .android-device{
    --gesture-safe-bottom: 36px;
  }
}


/* ==========================================================================
   v0.80  お題表示 2レイヤー方式
   .pc          1文字ぶんの枠（幅は黒い目標文字が決める）
   .pc-base     下: 目標文字（黒）        例:「が」
   .pc-over     上: 入力済み文字（緑）    例:「か」
   → 緑の「か」が黒の「が」の"か"部分を塗りつぶし、濁点だけ黒で残る
   ========================================================================== */

#prompt{
  position:relative;
  min-height:1.2em;
  white-space:nowrap;
  overflow:hidden;
}

.pc{
  position:relative;
  display:inline-block;
  vertical-align:top;
  line-height:1.15;
}

.pc-base{
  position:relative;
  z-index:1;
  color:#111827;
  -webkit-text-fill-color:#111827;
}

.pc-over{
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  color:#16a34a;
  -webkit-text-fill-color:#16a34a;
  /* 黒い下地のフチがはみ出さないよう緑をわずかに太らせる（em指定で文字サイズ追従） */
  -webkit-text-stroke:.05em #16a34a;
  opacity:0;
  pointer-events:none;
}

/* 確定済み: 緑が黒を完全に覆う */
.pc.is-done > .pc-over{ opacity:1; }

/* 変換待ち（か→が / は→ぱ）: 緑の下地文字を重ねる = 濁点だけ黒く残る */
.pc.is-pending > .pc-over{ opacity:1; }

/* 変換待ち（つ→っ）は大きさの差なので、黒い「小」バッジで示す */
.pc.needs-small::after{
  content:"小";
  position:absolute;
  right:-.10em;
  top:-.20em;
  z-index:3;
  font-size:.34em;
  font-weight:900;
  line-height:1;
  color:#111827;
  -webkit-text-fill-color:#111827;
  background:rgba(255,255,255,.92);
  border-radius:.18em;
  padding:0 .08em;
  pointer-events:none;
}

/* v0.85 — safe visual overhaul, gameplay mechanics untouched */
#app.title-active{display:block!important;height:100dvh}
#app.title-active #game-wrap{height:100dvh}
#app.title-active #keyboard-wrap{display:none!important}

.title-screen-redesign{padding:0!important;justify-content:flex-start!important;background:#fff7ed!important;overflow:hidden}
.title-art-wrap{position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden;background:#0f5fa8}
.title-art{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.title-art-wrap:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,#fff7ed);pointer-events:none}
.title-art-wrap .version-label{position:absolute;top:8px;right:8px;margin:0;padding:3px 7px;border-radius:99px;background:#11182799;color:#fff;opacity:.85}
.title-bottom-panel{padding:9px 16px calc(13px + env(safe-area-inset-bottom,0px));background:linear-gradient(#fff7ed,#fde7c7);border-top:4px solid #b45309}
.title-copy{text-align:center;font-size:16px;font-weight:1000;color:#7c2d12}
.title-subcopy{text-align:center;font-size:11px;color:#92400e;margin-top:2px}
.title-start-btn{width:min(90%,430px)!important;margin:10px auto 0!important;font-size:24px!important;border-radius:18px!important;border:3px solid #7f1d1d!important;background:linear-gradient(#ef4444,#dc2626)!important;box-shadow:0 7px 0 #991b1b!important}
.title-meta-row{display:flex;justify-content:center;gap:8px;align-items:center;margin-top:9px}
.title-meta-row .best-box,.title-meta-row .sound-btn{margin:0;font-size:12px}

#game-wrap{background:linear-gradient(#ffe8c7,#fed7aa)}
#hud{padding:6px 7px 0;gap:6px}
.hud-item{border:2px solid #92400e;border-radius:14px;background:linear-gradient(#374151,#111827);box-shadow:0 4px 0 #78350f}
.hud-item span{color:#fde68a;opacity:1;font-weight:900}
#prompt-panel{left:8px;right:8px;border:3px solid #b45309;border-radius:23px;background:linear-gradient(#fff,#fff7ed);box-shadow:0 6px 0 #92400e}
#sushi-name{color:#9a3412;font-weight:900}
#keyboard-wrap:not(.title-demo-mode):not(.result-hidden-mode){background:linear-gradient(#f3f4f6,#e2e8f0);border-top:3px solid #b45309}
.flick-key{border:2px solid #cbd5e1!important;border-radius:18px!important;background:linear-gradient(#fff,#f8fafc)!important;box-shadow:0 5px 0 #cbd5e1!important;font-weight:1000!important}
.flick-key.active{border-color:#f59e0b!important;background:#fff7ed!important}

#prompt.prompt-two-lines{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;min-height:2.35em}
#prompt.prompt-two-lines .pc{flex:0 0 auto}

:root{--flick-extra-bottom:4px}
.platform-ios{--flick-extra-bottom:2px}
.platform-android{--flick-extra-bottom:40px}
@media(max-height:720px){.platform-android{--flick-extra-bottom:32px}}
#keyboard-wrap:not(.title-demo-mode):not(.result-hidden-mode){padding-bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--flick-extra-bottom))!important}
.platform-ios #app{grid-template-rows:minmax(0,48fr) minmax(0,52fr)!important}
.platform-android #app{grid-template-rows:minmax(0,44fr) minmax(0,56fr)!important}


/* ==========================================================
   v0.86 Cute & cool gameplay screen redesign
   Based on the bright mockup illustration style.
   Gameplay logic untouched.
   ========================================================== */

html,body{
  background:#cfefff;
}

#game-wrap{
  background:linear-gradient(180deg,#d8f3ff 0%,#ffe5bf 52%,#ffd6a5 100%) !important;
}

#hud{
  padding:8px 8px 0 !important;
  gap:8px !important;
}

.hud-item{
  min-width:0 !important;
  flex:1 1 0 !important;
  padding:7px 6px 8px !important;
  border-radius:18px !important;
  border:3px solid #7c2d12 !important;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.18),transparent 38%),
    linear-gradient(180deg,#31435f,#182335) !important;
  box-shadow:0 5px 0 #9a3412, 0 10px 18px rgba(30,41,59,.14) !important;
}

.hud-item span{
  color:#fde68a !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  opacity:1 !important;
}

.hud-item b{
  color:#ffffff;
  font-size:22px !important;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}

.hud-item small{
  color:#fde68a !important;
  font-size:11px !important;
  font-weight:900 !important;
}

#prompt-panel{
  left:10px !important;
  right:10px !important;
  bottom:10px !important;
  padding:9px 12px 10px !important;
  border:4px solid #fb923c !important;
  border-radius:25px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,.98) 35%,#fff7ed 100%) !important;
  box-shadow:0 6px 0 #b45309, 0 12px 24px rgba(124,45,18,.18) !important;
}

#sushi-name{
  display:inline-block;
  font-size:13px !important;
  font-weight:1000 !important;
  color:#9a3412 !important;
  margin-bottom:3px !important;
  padding:2px 10px !important;
  border-radius:999px !important;
  border:2px solid #fdba74 !important;
  background:#ffedd5 !important;
  box-shadow:0 2px 0 #fed7aa !important;
}

#prompt{
  font-size:28px !important;
  font-weight:1000 !important;
  letter-spacing:.03em !important;
  text-shadow:0 1px 0 #fff !important;
}
#typed{color:#16a34a !important}
#remaining{color:#0f172a !important}

#keyboard-wrap:not(.title-demo-mode):not(.result-hidden-mode){
  background:linear-gradient(180deg,#dbeafe,#e2e8f0 34%,#e5e7eb 100%) !important;
  border-top:3px solid #fb923c !important;
  padding-left:9px !important;
  padding-right:9px !important;
}

.flick-key,.subkey{
  border:2px solid #cbd5e1 !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
  box-shadow:0 5px 0 #bfd0e5, 0 8px 12px rgba(30,41,59,.08) !important;
}

.flick-key{
  font-size:26px !important;
  color:#0f172a !important;
}

.flick-key.active{
  transform:translateY(3px) !important;
  box-shadow:0 2px 0 #bfd0e5 !important;
  background:linear-gradient(180deg,#fff7ed,#ffedd5) !important;
  border-color:#fdba74 !important;
}

.utility-key{
  color:#334155 !important;
  font-size:21px !important;
}

#plate-stack{
  right:8px !important;
  bottom:96px !important;
}

.plate{
  width:60px !important;
  height:16px !important;
  border:4px solid #ef4444 !important;
  box-shadow:0 2px 3px rgba(0,0,0,.18) !important;
}

.toast{
  font-size:38px !important;
  color:#fffef2 !important;
  text-shadow:0 3px 0 #991b1b, 0 0 12px rgba(0,0,0,.3) !important;
}

.combo-pop{
  font-size:34px !important;
  color:#fffef2 !important;
  text-shadow:0 3px 0 #92400e,0 0 12px rgba(0,0,0,.25) !important;
}

#result-screen{
  background:linear-gradient(180deg,#fff7ed,#fecaca) !important;
}
#result-screen .primary-btn{
  background:linear-gradient(180deg,#ef4444,#dc2626) !important;
  border:2px solid #991b1b !important;
}
.result-grid>div{
  border:2px solid #fdba74 !important;
  box-shadow:0 4px 0 #fed7aa !important;
}

/* Long prompt layout remains compatible */
#prompt.prompt-two-lines{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:2.35em !important;
}
#prompt.prompt-two-lines .pc{flex:0 0 auto}

/* iPhone / Android bottom spacing kept split */
:root{--flick-extra-bottom:4px}
.platform-ios{--flick-extra-bottom:2px}
.platform-android{--flick-extra-bottom:40px}
@media(max-height:720px){.platform-android{--flick-extra-bottom:32px}}
#keyboard-wrap:not(.title-demo-mode):not(.result-hidden-mode){
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--flick-extra-bottom)) !important;
}
.platform-ios #app{grid-template-rows:minmax(0,48fr) minmax(0,52fr) !important}
.platform-android #app{grid-template-rows:minmax(0,44fr) minmax(0,56fr) !important}


/* ==========================================================
   v0.89 Reliable DOM sushi conveyor
   *_plate.png = conveyor sushi, no-plate = prompt icon
   ========================================================== */

#sushi-flow-layer{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:43%;
  height:35%;
  overflow:hidden;
  pointer-events:none;
}

.flow-sushi{
  --flow-ms:7000ms;
  position:absolute;
  left:calc(100% + 35px);
  top:50%;
  width:124px;
  height:146px;
  transform:translateY(-50%);
  will-change:left,transform;
}

.flow-sushi.is-moving{
  animation:flowAcross var(--flow-ms) linear forwards;
}

@keyframes flowAcross{
  from{left:calc(100% + 35px)}
  to{left:-145px}
}

.flow-sushi-img{
  position:absolute;
  left:50%;
  top:46%;
  width:112px;
  height:112px;
  object-fit:contain;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 5px 4px rgba(15,23,42,.22));
  z-index:2;
}

.flow-price{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:4px 8px;
  border-radius:999px;
  border:2px solid #fb923c;
  background:rgba(255,255,255,.96);
  color:#7c2d12;
  font-size:11px;
  font-weight:900;
  box-shadow:0 3px 0 #fed7aa;
  z-index:4;
}
.flow-price b{color:#b91c1c}

.flow-glow{
  display:none;
  position:absolute;
  left:50%;
  top:45%;
  width:118px;
  height:88px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(250,204,21,.55),rgba(250,204,21,0) 70%);
  z-index:1;
}
.flow-sushi.rank-4 .flow-glow,
.flow-sushi.rank-5 .flow-glow{
  display:block;
  animation:premiumPulse .55s ease-in-out infinite alternate;
}
.flow-sushi.rank-4 .flow-price{
  border-color:#a855f7;
}
.flow-sushi.rank-5{
  width:144px;
}
.flow-sushi.rank-5 .flow-sushi-img{
  width:132px;
  height:132px;
}
.flow-sushi.rank-5 .flow-price{
  border-color:#f59e0b;
  background:#fff7ed;
  box-shadow:0 0 14px rgba(245,158,11,.55),0 3px 0 #f59e0b;
}
.flow-crown{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  font-size:26px;
  z-index:5;
  animation:crownBob .45s ease-in-out infinite alternate;
}
@keyframes premiumPulse{to{transform:translate(-50%,-50%) scale(1.18);opacity:.82}}
@keyframes crownBob{to{transform:translate(-50%,-6px) rotate(-3deg)}}

.flow-sushi.is-captured{
  transition:
    left .40s cubic-bezier(.2,.8,.2,1),
    top .40s cubic-bezier(.2,.8,.2,1),
    transform .40s cubic-bezier(.2,.8,.2,1),
    opacity .40s ease;
  left:50% !important;
  top:110% !important;
  transform:translateX(-50%) scale(1.35) rotate(7deg) !important;
  opacity:.15;
}

.prompt-sushi-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-bottom:2px;
}
#prompt-sushi-icon{
  width:30px;
  height:30px;
  object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
.prompt-sushi-head #sushi-name{
  margin-bottom:0 !important;
}

@media(max-width:390px){
  #sushi-flow-layer{
    top:42%;
    height:36%;
  }
  .flow-sushi{
    width:112px;
    height:132px;
  }
  .flow-sushi-img{
    width:100px;
    height:100px;
  }
  .flow-sushi.rank-5 .flow-sushi-img{
    width:118px;
    height:118px;
  }
}

/* ==========================================================================
   v0.94  タイトル画の切れ / コンベアとの位置合わせ
   ========================================================================== */

/* title_hero.png は 640x360 の横長。object-fit:cover だと左右が大きく切れて
   「フリック寿司道場」のロゴが読めなくなるため contain に変更する。 */
.title-art-wrap{
  background:linear-gradient(180deg,#0e5ea8 0%,#3f9ad8 52%,#cfeaff 100%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.title-art{
  width:100% !important;
  height:auto !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* 流れる寿司の値段ラベルがお題パネルの裏に潜らないよう、ベルトの上へ載せる */
.flow-price{
  bottom:14px !important;
  font-size:11.5px !important;
  box-shadow:0 3px 0 #fed7aa, 0 4px 10px rgba(15,23,42,.18) !important;
}

/* 寿司に接地感を出す（ベルトに落ちる影） */
.flow-sushi:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:34px;
  width:76px;
  height:14px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(10,20,40,.34),rgba(10,20,40,0) 70%);
  z-index:1;
}

/* ゲーム画面の取り分を増やす。キーボードは4段×約66pxで十分タップできる。 */
.platform-ios #app{ grid-template-rows:minmax(0,55fr) minmax(0,45fr) !important; }
.platform-android #app{ grid-template-rows:minmax(0,54fr) minmax(0,46fr) !important; }

/* 流れる寿司の値段はお題パネルと重複していて情報が二重になるため、
   高級ネタ（rank4以上）のときだけ出す。 */
.flow-price{ display:none !important; }
.flow-sushi.rank-4 .flow-price,
.flow-sushi.rank-5 .flow-price{ display:block !important; }

/* ベルトが広くなったぶん、寿司も少し大きく見せる */
.flow-sushi{ width:136px !important; height:158px !important; }
.flow-sushi-img{ width:124px !important; height:124px !important; }
.flow-sushi.rank-5{ width:154px !important; }
.flow-sushi.rank-5 .flow-sushi-img{ width:142px !important; height:142px !important; }
@media(max-width:390px){
  .flow-sushi{ width:122px !important; height:144px !important; }
  .flow-sushi-img{ width:112px !important; height:112px !important; }
}

/* ==========================================================================
   v0.94  タイトル画面（空きスペースを回転寿司レーンで埋める）
   ========================================================================== */

#app.title-active #game-wrap{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.85) 0 26px, transparent 27px),
    radial-gradient(circle at 25% 9%,  rgba(255,255,255,.8)  0 18px, transparent 19px),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.8)  0 22px, transparent 23px),
    radial-gradient(circle at 89% 12%, rgba(255,255,255,.75) 0 15px, transparent 16px),
    linear-gradient(180deg,#1b7fc4 0%,#63b7e6 34%,#bfe6ff 60%,#ffeed3 100%) !important;
}

.title-screen-redesign{ justify-content:flex-start !important; }

.title-art-wrap{
  flex:0 0 auto !important;
  background:transparent !important;
  margin-top:clamp(10px,5vh,54px) !important;
  overflow:visible !important;
}
.title-art{
  filter:drop-shadow(0 10px 18px rgba(9,42,74,.35));
  border-radius:14px;
}
.title-art-wrap:after{ display:none !important; }

/* タイトル下の回転寿司レーン */
.title-lane{
  position:relative;
  flex:1 1 auto;
  min-height:96px;
  margin-top:auto;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.title-lane-belt{
  position:absolute;
  left:0; right:0; top:50%;
  height:66px;
  transform:translateY(-46%);
  background:
    linear-gradient(180deg,#6280ad 0 8%,#4a648c 8% 88%,#33486b 88% 100%);
  border-top:4px solid #a8c6e4;
  border-bottom:4px solid #2b3d5c;
  box-shadow:inset 0 8px 14px rgba(255,255,255,.10);
}
.title-lane-run{
  position:absolute;
  left:0; top:50%;
  display:flex;
  gap:26px;
  align-items:center;
  transform:translateY(-58%);
  animation:titleLaneRun 22s linear infinite;
  will-change:transform;
}
.title-lane-run img{
  width:74px; height:74px;
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 5px 4px rgba(15,23,42,.28));
}
@keyframes titleLaneRun{
  from{ transform:translate(0,-58%) }
  to  { transform:translate(-50%,-58%) }
}
@media (prefers-reduced-motion:reduce){
  .title-lane-run{ animation:none }
}

.title-bottom-panel{ margin-top:0 !important; }

/* タイトル画面は align-items:center の縦フレックスなので、
   幅いっぱいに広げたい要素には明示的に stretch を指定する。 */
.title-screen-redesign.screen{
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.85) 0 26px, transparent 27px),
    radial-gradient(circle at 26% 7%,  rgba(255,255,255,.8)  0 17px, transparent 18px),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.8)  0 22px, transparent 23px),
    radial-gradient(circle at 89% 10%, rgba(255,255,255,.75) 0 14px, transparent 15px),
    linear-gradient(180deg,#1b7fc4 0%,#63b7e6 30%,#bfe6ff 56%,#ffeed3 78%,#fff7ed 100%) !important;
}
.title-lane{
  width:100% !important;
  align-self:stretch !important;
}
.title-art-wrap{ align-self:stretch !important; }

/* レーンはタイトル画の直下に置いて一つの塊に見せ、下の空きは空として残す */
.title-lane{
  flex:0 0 auto !important;
  min-height:104px !important;
  margin-top:0 !important;
}
.title-bottom-panel{ margin-top:auto !important; }

/* UA から iOS / Android を判定できない環境（PCブラウザ、Kitaku Arcade の iframe など）
   でも同じ比率になるようにする。platform-* の指定があればそちらが優先される。 */
#app{ grid-template-rows:minmax(0,54fr) minmax(0,46fr) !important; }

/* ==========================================================================
   v0.95  リザルト画面の演出（バン、バン、バン）
   ========================================================================== */

#result-screen{
  position:absolute;
  overflow:hidden !important;
  justify-content:flex-start !important;
  padding-top:clamp(12px,4vh,40px) !important;
}
#result-screen.rs-scroll{ overflow-y:auto !important; }

/* --- 集中線 ------------------------------------------------------------ */
/* 集中線は 220vmax もあるので、必ず inset:0 の枠で切り抜く。
   直接置くと #result-screen の scrollHeight を押し上げて
   スクロール判定が誤爆する（v0.95 で踏んだ） */
.rs-rays{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.rs-rays:before{
  content:"";
  position:absolute;
  left:50%; top:34%;
  width:220vmax; height:220vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.62) 0deg 2.2deg,
    rgba(255,255,255,0)   2.2deg 8deg);
  opacity:0;
  transition:opacity .55s ease;
}
#result-screen.rs-go .rs-rays:before{
  opacity:.85;
  animation:rsRaySpin 40s linear infinite;
}
@keyframes rsRaySpin{
  from{ transform:translate(-50%,-50%) rotate(0deg) }
  to  { transform:translate(-50%,-50%) rotate(360deg) }
}

/* --- 紙吹雪 ------------------------------------------------------------ */
.rs-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.rs-piece{
  position:absolute; top:-24px;
  width:9px; height:14px; border-radius:2px;
  opacity:.95;
  animation:rsFall linear forwards;
}
@keyframes rsFall{
  0%  { transform:translateY(0) rotate(0deg); opacity:1 }
  100%{ transform:translateY(115vh) rotate(760deg); opacity:.15 }
}

/* --- 段階表示の土台 ---------------------------------------------------- */
#result-screen > *:not(.rs-rays):not(.rs-confetti){ position:relative; z-index:2; }
/* まだ出ていない要素はタップを拾わせない。
   これをしないと、演出中に透明な「もう一皿！」を押してしまい
   スキップのつもりが再スタートになる。 */
.rv{ opacity:0; pointer-events:none; will-change:transform,opacity; }
/* opacity は animation の forwards ではなくルール自体で確定させる。
   これをしないと、あとから別の animation（ボタンのパルス等）が
   上書きした瞬間に opacity:0 へ戻って要素が消える。 */
.rv.rv-in{ opacity:1; pointer-events:auto; animation:rsBang .40s cubic-bezier(.18,1.5,.36,1) forwards; }
@keyframes rsBang{
  0%  { opacity:0; transform:scale(2.2) }
  55% { opacity:1; transform:scale(.93) }
  100%{ opacity:1; transform:scale(1) }
}
@media (prefers-reduced-motion:reduce){
  .rv.rv-in{ animation:rsFade .25s ease forwards }
  @keyframes rsFade{ from{opacity:0} to{opacity:1} }
  #result-screen.rs-go .rs-rays:before{ animation:none }
  #result-screen.rs-done .primary-btn{ animation:none }
  .rs-plate{ animation:none }
  .rs-piece{ display:none }
}

/* --- のれん ------------------------------------------------------------ */
.rs-noren{
  position:absolute !important;
  left:-4%; top:0;
  width:108%; height:52px;
  background:linear-gradient(180deg,#1e3a8a 0 78%,#17306e 78% 100%);
  border-bottom:4px solid #0f214d;
  box-shadow:0 6px 14px rgba(30,58,138,.28);
  z-index:3 !important;
  transform-origin:top center;
}
.rs-noren:before{
  content:"本日もありがとうございました";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff8e7; font-size:14px; font-weight:900; letter-spacing:.08em;
}
.rs-noren.rv-in{ animation:rsNoren .5s cubic-bezier(.2,1.3,.4,1) forwards }
@keyframes rsNoren{
  0%  { opacity:0; transform:translateY(-100%) }
  70% { opacity:1; transform:translateY(6px) }
  100%{ opacity:1; transform:translateY(0) }
}

/* --- 見出し（木札） ---------------------------------------------------- */
.rs-head{ margin-top:60px; }
.rs-head span{
  display:inline-block;
  padding:6px 22px;
  border-radius:10px;
  background:linear-gradient(180deg,#8a5a2b,#6b4420);
  border:3px solid #d8a15a;
  color:#fff3dc;
  font-size:16px; font-weight:900; letter-spacing:.1em;
  box-shadow:0 4px 0 #4a2d13;
}

/* --- 金額 -------------------------------------------------------------- */
.rs-score-box{ margin-top:10px; }
.result-score{
  font-size:clamp(44px,14vw,62px) !important;
  line-height:1.05;
  color:#b91c1c !important;
  text-shadow:
    0 3px 0 #fff, 0 5px 0 #fca5a5,
    0 8px 16px rgba(153,27,27,.35);
  font-variant-numeric:tabular-nums;
}
.rs-score-box.rv-in{ animation:rsBangHard .52s cubic-bezier(.16,1.6,.3,1) forwards }
@keyframes rsBangHard{
  0%  { opacity:0; transform:scale(3) rotate(-6deg) }
  50% { opacity:1; transform:scale(.88) rotate(1.5deg) }
  75% { transform:scale(1.06) rotate(-1deg) }
  100%{ opacity:1; transform:scale(1) rotate(0) }
}

/* --- NEW RECORD -------------------------------------------------------- */
#new-record{
  margin-top:6px;
  display:inline-block;
  padding:5px 16px;
  border-radius:99px;
  background:linear-gradient(180deg,#fde047,#f59e0b);
  border:3px solid #b45309;
  color:#7c2d12;
  font-size:16px; font-weight:900;
  box-shadow:0 4px 0 #92400e, 0 0 22px rgba(250,204,21,.75);
}
#new-record.hidden{ display:none }
#new-record.rv-in{ animation:rsRecord .6s cubic-bezier(.16,1.5,.3,1) forwards }
@keyframes rsRecord{
  0%  { opacity:0; transform:scale(2.6) rotate(20deg) }
  55% { opacity:1; transform:scale(.9) rotate(-5deg) }
  100%{ opacity:1; transform:scale(1) rotate(-2deg) }
}

/* --- 成績タイル -------------------------------------------------------- */
.result-grid{ margin:14px 0 6px !important; width:92% !important; gap:9px !important; }
.result-grid>div{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  padding:10px 8px !important;
  background:linear-gradient(180deg,#ffffff,#fff7ed) !important;
}
.rs-k{ font-size:12px; color:#9a6a3c; font-weight:700; letter-spacing:.04em }
.result-grid>div b{ font-size:21px; color:#7c2d12; font-variant-numeric:tabular-nums }

/* --- 称号（判子） ------------------------------------------------------ */
.result-rank{
  margin-top:8px;
  display:inline-block;
  padding:7px 22px;
  border:4px double #b91c1c;
  border-radius:14px;
  color:#b91c1c !important;
  font-size:clamp(22px,7vw,28px) !important;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(185,28,28,.10);
}
.result-rank.rv-in{ animation:rsStamp .46s cubic-bezier(.14,1.7,.3,1) forwards }
@keyframes rsStamp{
  0%  { opacity:0; transform:scale(3.2) rotate(-24deg) }
  55% { opacity:1; transform:scale(.9)  rotate(-9deg) }
  100%{ opacity:1; transform:scale(1)   rotate(-4deg) }
}

.result-extra{ margin-top:10px !important }
#result-screen .primary-btn{ margin-top:14px !important; width:78% !important }
#result-screen .primary-btn.rv-in{ animation:rsBtn .45s cubic-bezier(.2,1.4,.4,1) forwards }
@keyframes rsBtn{
  0%  { opacity:0; transform:translateY(26px) scale(.9) }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}
#result-screen.rs-done .primary-btn{ animation:rsBtnPulse 1.6s ease-in-out infinite }
@keyframes rsBtnPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:1;transform:scale(1.035)} }

.rs-skip{
  margin-top:10px;
  font-size:11.5px; color:#a8836a; letter-spacing:.06em;
}
#result-screen.rs-done .rs-skip{ visibility:hidden }


/* --- 食べた皿の山 ------------------------------------------------------ */
.rs-plates{
  position:relative;
  height:0;
  z-index:3;
  margin:18px 0 4px;
  width:100%;
  display:flex; align-items:flex-end; justify-content:center;
}
.rs-plate{
  position:absolute;
  left:50%;
  width:92px; height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg,#ffffff 0 46%,#e2e8f0 46% 100%);
  box-shadow:0 2px 0 rgba(100,116,139,.55);
  animation:rsPlateDrop .34s cubic-bezier(.2,1.6,.4,1) backwards;
}
.rs-plate.c1{ background:linear-gradient(180deg,#ffffff 0 46%,#bfdbfe 46% 100%) }
.rs-plate.c2{ background:linear-gradient(180deg,#ffffff 0 46%,#fecaca 46% 100%) }
.rs-plate.c3{ background:linear-gradient(180deg,#fffbeb 0 46%,#fde68a 46% 100%) }
@keyframes rsPlateDrop{
  from{ opacity:0; transform:translateX(-50%) translateY(-26px) scaleX(1.2) }
  to  { opacity:1; transform:translateX(-50%) translateY(0) scaleX(1) }
}
.rs-plates-more{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:12px; font-weight:900; color:#7c2d12;
}

/* 縦位置：内容が収まるときは中央寄せ、あふれるときは上詰め＋スクロール */
#result-screen{ justify-content:center !important; padding-top:66px !important; }
#result-screen.rs-scroll{ justify-content:flex-start !important; }
#result-screen.rs-scroll .rs-head{ margin-top:8px }
.rs-head{ margin-top:0 }

/* ==========================================================================
   v1.0  モード選択 / 段位 / モードバー / 採点内訳
   ========================================================================== */

/* --- タイトルのモードボタン -------------------------------------------- */
.mode-btns{
  width:100%;
  display:flex; flex-direction:column; gap:9px;
  margin:10px 0 4px;
}
.mode-btn{
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:11px 14px;
  border:0; border-radius:16px;
  color:#fff; font-family:inherit; cursor:pointer;
  background:linear-gradient(180deg,#64748b,#475569);
  box-shadow:0 5px 0 #334155;
}
.mode-btn:disabled{ opacity:.5 }
.mode-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #334155 }
.mode-btn .mb-main{ font-size:19px; font-weight:900; letter-spacing:.02em }
.mode-btn .mb-sub{ font-size:11.5px; opacity:.88; font-weight:700 }
.mb-dojo{ background:linear-gradient(180deg,#ef4444,#dc2626); box-shadow:0 5px 0 #991b1b }
.mb-dojo:active{ box-shadow:0 2px 0 #991b1b }
.mb-endless{ background:linear-gradient(180deg,#3b82f6,#2563eb); box-shadow:0 5px 0 #1e40af }
.mb-endless:active{ box-shadow:0 2px 0 #1e40af }
.mb-arcade{ background:linear-gradient(180deg,#f59e0b,#d97706); box-shadow:0 5px 0 #92400e }
.mb-arcade:active{ box-shadow:0 2px 0 #92400e }

.ghost-btn{
  border:2px solid rgba(120,53,15,.35);
  background:rgba(255,255,255,.75);
  color:#7c2d12;
  font-family:inherit; font-weight:800; font-size:13px;
  padding:7px 14px; border-radius:99px; cursor:pointer;
}

/* --- 段位選択画面 ------------------------------------------------------ */
#dojo-screen{
  justify-content:flex-start !important;
  padding:14px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,#fff7ed 0%,#ffe9c9 55%,#fed7aa 100%) !important;
  overflow-y:auto !important;
}
.dojo-head{
  width:100%; display:flex; align-items:center; gap:8px;
  margin-bottom:12px;
}
.dojo-headline{ flex:1; font-size:19px; font-weight:900; color:#7c2d12 }
.dojo-current{
  font-size:12px; font-weight:900; color:#fff;
  background:#7c2d12; padding:5px 11px; border-radius:99px; white-space:nowrap;
}
.dojo-list{ width:100%; display:flex; flex-direction:column; gap:9px }

.rank-row{
  display:flex; align-items:center; gap:11px;
  width:100%; padding:10px 12px;
  border:3px solid #e7c9a0; border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fffaf2);
  box-shadow:0 4px 0 #e7c9a0;
  text-align:left; font-family:inherit; cursor:pointer;
}
.rank-row:active{ transform:translateY(2px); box-shadow:0 2px 0 #e7c9a0 }
.rank-row.locked{ opacity:.55; cursor:default; background:#f1ece4 }
.rank-row.cleared{ border-color:#16a34a; box-shadow:0 4px 0 #86efac }

.rank-badge{
  flex:none; width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900;
  border:3px solid rgba(0,0,0,.18);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.14);
}
.rank-body{ flex:1; min-width:0 }
.rank-name{ font-size:16px; font-weight:900; color:#3b2606; line-height:1.25 }
.rank-hint{ font-size:11px; color:#8a6a4a; line-height:1.35 }
.rank-meta{ font-size:11px; font-weight:800; color:#b45309; margin-top:2px }
.rank-right{ flex:none; text-align:right; min-width:56px }
.rank-best{ font-size:15px; font-weight:900; color:#7c2d12; font-variant-numeric:tabular-nums }
.rank-state{ font-size:10.5px; font-weight:900 }
.rank-state.ok{ color:#15803d }
.rank-state.lock{ color:#94a3b8 }
.dojo-note{ margin-top:14px; font-size:11.5px; color:#8a6a4a; text-align:center }

/* --- モードバー（HUDの下） --------------------------------------------- */
.mode-bar{
  position:absolute;
  left:10px; right:10px;
  top:calc(max(8px,env(safe-area-inset-top)) + 84px);
  height:19px; border-radius:99px;
  background:rgba(15,23,42,.55);
  border:2px solid rgba(255,255,255,.28);
  overflow:hidden; z-index:5; pointer-events:none;
}
.mode-bar.hidden{ display:none }
.mode-bar-fill{
  position:absolute; inset:0 100% 0 0;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
}
/* 修行モードは皿ごとに跳ねるので補間する。
   無限モードは100msごとに動くため補間するとむしろ遅れて見える。 */
.mode-bar.smooth .mode-bar-fill{
  transition:right .28s cubic-bezier(.2,.9,.3,1);
}
.mode-bar.low .mode-bar-fill{ background:linear-gradient(90deg,#f87171,#dc2626) }
.mode-bar-text{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  font-variant-numeric:tabular-nums;
}

/* --- 採点内訳（修行モードのリザルト） ---------------------------------- */
.score-breakdown{
  width:92%; margin:8px 0 2px;
  background:rgba(255,255,255,.82);
  border:2px solid #fdba74; border-radius:14px;
  padding:8px 12px;
}
.score-breakdown.hidden{ display:none }
.sb-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; padding:2.5px 0;
  border-bottom:1px dashed rgba(180,83,9,.22);
}
.sb-row:last-child{ border-bottom:0 }
.sb-row .sb-l{ color:#7c5230; font-weight:700 }
.sb-row .sb-v{ font-weight:900; font-variant-numeric:tabular-nums }
.sb-row.base .sb-v{ color:#57534e }
.sb-row.minus .sb-v{ color:#b91c1c }
.sb-row.plus  .sb-v{ color:#15803d }

/* --- リザルトのボタン列 ------------------------------------------------ */
.rs-btns{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:10px }
.rs-btns .primary-btn{ margin-top:0 !important }
/* 既存の `#result-screen .primary-btn` が !important で赤を指定しているので、
   同じかそれ以上の詳細度で上書きする */
#result-screen #next-btn.primary-btn{
  background:linear-gradient(180deg,#22c55e,#16a34a) !important;
  border:2px solid #15803d !important;
  box-shadow:0 6px #14532d !important;
}
#next-btn.hidden, #retry-btn.hidden{ display:none }

/* 合否スタンプ */
.result-rank.fail{ color:#475569 !important; border-color:#94a3b8 !important }


/* --- v1.0 リザルトの崩れ対策 -------------------------------------------
   #result-screen は縦フレックス。内容があふれると flex-shrink で各要素が
   潰され、絶対配置で組んだ皿の山が枠の外へはみ出す。縮ませない。 */
#result-screen > *{ flex:none !important }

/* スクロールする長さになったときは、のれんの下から始める */
#result-screen.rs-scroll{ padding-top:14px !important }
#result-screen.rs-scroll .rs-head{ margin-top:60px !important }

/* 合否スタンプは文字数が変わるので折り返しと縮小を許す */
.result-rank{
  max-width:94%;
  font-size:clamp(18px,5.6vw,25px) !important;
  line-height:1.3;
  padding:7px 16px !important;
}

/* 採点内訳は詰めて縦を節約 */
.score-breakdown{ padding:6px 11px !important }
.sb-row{ font-size:12.5px !important; padding:2px 0 !important }

/* モードボタン3つを置くので、タイトル下部の板を少し広げる */
.title-bottom-panel{ min-width:82% !important; }

/* v1.01 リザルトの「タイトルへ」を押しやすく。
   13px/高さ31px はタップ目標として小さすぎた（Androidの推奨は48dp以上）。 */
#result-screen #home-btn.ghost-btn{
  width:78%;
  padding:15px 18px;
  font-size:18px;
  font-weight:900;
  border-radius:17px;
  border:3px solid rgba(120,53,15,.42);
  background:rgba(255,255,255,.9);
  box-shadow:0 5px 0 rgba(120,53,15,.24);
  margin-top:2px;
}
#result-screen #home-btn.ghost-btn:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(120,53,15,.24);
}

/* ==========================================================================
   v1.1  遊び方画面
   ========================================================================== */

#howto-screen{
  justify-content:flex-start !important;
  padding:14px 14px calc(24px + env(safe-area-inset-bottom)) !important;
  background:linear-gradient(180deg,#fff7ed 0%,#ffeed8 40%,#ffe3bd 100%) !important;
  overflow-y:auto !important;
  text-align:left !important;
}
.ht-body{ width:100%; display:flex; flex-direction:column; gap:12px }

.ht-sec{
  background:rgba(255,255,255,.86);
  border:2px solid #e7c9a0;
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 3px 0 #eddcc4;
}
.ht-h{
  margin:0 0 8px;
  font-size:15px; font-weight:900; color:#7c2d12;
  line-height:1.4;
}
.ht-p{ margin:0 0 8px; font-size:13.5px; line-height:1.7; color:#4a3524 }
.ht-note{
  margin:8px 0 0; font-size:12px; line-height:1.6; color:#8a6a4a;
  padding-left:10px; border-left:3px solid #f0d4ab;
}
.ht-steps{ margin:0; padding-left:20px; font-size:13.5px; line-height:1.8; color:#4a3524 }
.ht-steps li{ margin:2px 0 }
.ht-dirs{ margin:8px 0 0; padding-left:18px; font-size:13.5px; line-height:1.85; color:#4a3524 }

/* --- フリックの図 ------------------------------------------------------ */
.ht-flick{ display:flex; justify-content:center; margin:14px 0 6px }
.ht-fkey{
  position:relative;
  width:190px; height:150px;
}
.ht-f{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  border-radius:12px;
}
.ht-c{
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:60px; height:52px; font-size:25px;
  background:linear-gradient(180deg,#ffffff,#f1f5f9);
  border:3px solid #94a3b8;
  color:#1f2937;
  box-shadow:0 4px 0 #cbd5e1;
  z-index:2;
}
.ht-f:not(.ht-c){
  width:48px; height:42px; font-size:20px;
  background:#fff7ed;
  border:2px dashed #fb923c;
  color:#b45309;
}
.ht-l{ left:0;   top:50%; transform:translateY(-50%) }
.ht-r{ right:0;  top:50%; transform:translateY(-50%) }
.ht-u{ top:0;    left:50%; transform:translateX(-50%) }
.ht-d{ bottom:0; left:50%; transform:translateX(-50%) }
/* 中央から四方への矢印 */
.ht-fkey:before, .ht-fkey:after{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  border-top:2px dotted #fdba74;
  border-left:2px dotted #fdba74;
}
.ht-fkey:before{ width:130px; height:0 }
.ht-fkey:after{ width:0; height:104px }

/* --- キー配置図 -------------------------------------------------------- */
.ht-kb{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  max-width:250px; margin:4px auto 0;
}
.ht-k{
  height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; color:#1f2937;
  background:linear-gradient(180deg,#ffffff,#f4f7fb);
  border:2px solid #cbd5e1; border-radius:12px;
  box-shadow:0 3px 0 #dbe3ec;
}
.ht-k.ht-u2{ font-size:15px; color:#475569; background:linear-gradient(180deg,#f8fafc,#eef2f7) }

/* --- 表 ---------------------------------------------------------------- */
.ht-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px }
.ht-table th, .ht-table td{
  text-align:left; padding:6px 6px;
  border-bottom:1px dashed rgba(180,83,9,.25);
  vertical-align:middle;
}
.ht-table tr:last-child th, .ht-table tr:last-child td{ border-bottom:0 }
.ht-table th{ white-space:nowrap; color:#7c2d12; font-weight:900; width:74px }
.ht-table td{ color:#4a3524 }
.ht-ex{ font-weight:900; color:#b45309; white-space:nowrap }
.ht-score th{ width:70px }
.ht-score td:first-of-type{ width:44px; font-weight:900; font-variant-numeric:tabular-nums }
.ht-plus{ color:#15803d }
.ht-minus{ color:#b91c1c }

/* --- モード紹介 -------------------------------------------------------- */
.ht-mode{
  border-radius:13px; padding:10px 12px; margin-top:8px;
  border-left:5px solid #94a3b8; background:rgba(255,255,255,.7);
}
.ht-m1{ border-left-color:#dc2626; background:rgba(254,226,226,.5) }
.ht-m2{ border-left-color:#2563eb; background:rgba(219,234,254,.5) }
.ht-mname{ font-size:14.5px; font-weight:900; color:#3b2606; margin-bottom:4px }

.ht-foot{ margin-top:14px; text-align:center; font-size:11.5px; color:#8a6a4a }

/* タイトルのメタ行を2段にしたので間隔を詰める */
.title-meta-row + .title-meta-row{ margin-top:6px }

/* v1.2 「小」キーの巡回の説明 */
.ht-cyc{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:5px; margin:12px 0 2px;
}
.ht-cy{
  font-size:12.5px; font-weight:900; color:#b45309;
  background:#fff7ed; border:2px dashed #fb923c;
  padding:5px 10px; border-radius:9px; white-space:nowrap;
}
.ht-cy0{ color:#334155; background:#f1f5f9; border:2px solid #94a3b8 }
.ht-ar{ color:#c8a179; font-weight:900; font-size:13px }
.ht-ex-list{ display:flex; flex-direction:column; gap:5px; margin-top:8px }
.ht-ex-row{
  display:flex; align-items:baseline; gap:10px;
  background:rgba(255,247,237,.8); border-radius:9px; padding:6px 10px;
}
.ht-ex-row b{ flex:none; width:22px; font-size:17px; color:#1f2937 }
.ht-ex-row span{ font-size:13px; font-weight:800; color:#b45309; line-height:1.6 }
.ht-ex-row i{ font-style:normal; font-weight:600; font-size:11.5px; color:#8a6a4a }
.ht-h u{ text-decoration-color:#fb923c; text-underline-offset:3px }

/* v1.21 「小゛゜」キー。
   ゛゜ を素で並べると上に小さく浮いて「点」にしか見えないため、
   記号だけ拡大して下へずらし、実機の見た目に寄せる。 */
#special-key .key-label-3{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  line-height:1;
}
#special-key .kl-s{
  font-style:normal;
  font-size:19px;
  font-weight:900;
}
/* ゛゜ はフォント上、em枠の上のほうに小さく描かれる。
   font-size を上げるだけでは字面が小さいままなので、
   拡大したうえで枠の中央へ引き下ろす。 */
#special-key .kl-m{
  font-style:normal;
  font-size:19px;
  font-weight:900;
  display:inline-block;
  width:1.0em;
  text-align:center;
  transform:scale(1.85) translateY(.20em);
  transform-origin:center;
}
@media(max-width:390px){
  #special-key .kl-s{ font-size:17px }
  #special-key .kl-m{ font-size:17px; transform:scale(1.7) translateY(.20em) }
}