/* 承認済みゲーム画面。Sitesだけに読み込み、判定座標は変更しない。 */
:root {
  --room-paper: #eee4cc;
  --room-wood: #30241a;
  --room-gold: #d8b566;
  --room-red: #b8382d;
  --room-shadow: #21160f45;
  --room-text: #24211b;
  --room-muted: #605849;
  --room-wash: #fbf5e9;
  /* 墨絵の上に重ねる紙色・地紋の不透明度。全難易度・明暗テーマで統一する。 */
  --room-photo-opacity: .3;
}
body {
  background: var(--ground);
}
#app {
  isolation: isolate;
  gap: 0;
  padding: 0;
  background: var(--ground);
  box-shadow: 0 12px 60px var(--room-shadow);
}
#app[data-screen="game"] {
  width: min(100vw, 32rem);
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) 6.8rem;
  grid-template-areas: "hud" "field" "console";
  gap: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app .hud {
  grid-area: hud;
  display: grid;
  gap: .6rem;
  padding: .7rem 1rem .65rem;
  color: var(--room-text);
  background: var(--room-paper);
  background-image: radial-gradient(ellipse at 30% 0%, #fff9e488, transparent 65%), repeating-linear-gradient(112deg, #6d553207 0 1px, transparent 1px 4px);
  border: 0;
}
#app .hud__bar {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) minmax(0, 1.5fr) minmax(76px, 1fr);
  align-items: center;
  gap: .35rem;
}
#app .game-back {
  display: inline-flex;
  justify-self: start;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .65rem;
  color: var(--room-wash);
  background: var(--room-text);
  border: 1px solid #e1cf9966;
  border-radius: 50%;
  font-size: .76rem;
  letter-spacing: .03em;
  text-indent: 0;
  box-shadow: 0 0 0 2px #24211b18;
}
#app .current-difficulty {
  position: relative;
  margin: 0;
  padding: .45rem .7rem;
  color: #fff8e9;
  background: #282620;
  font-size: clamp(.85rem, 4.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  /* 墨帯の縁。文字やフォーカス対象にはclipを掛けない。 */
  border-radius: 48% 4% 46% 3% / 7% 94% 8% 90%;
  box-shadow: 0 3px 0 #28262020, 0 -2px 0 #28262020;
}
#app .hud__actions { justify-self: end; }
#app .lives { display: grid; justify-items: center; gap: .25rem; padding: 0; border: 0; }
#app .lives__label { color: var(--room-text); font-size: .74rem; }
#app .lives__pips { gap: .28rem; }
#app .lives__pip { width: .83rem; height: .83rem; background: var(--room-red); border-color: var(--room-red); }
#app .lives[data-remaining="2"] .lives__pip:nth-child(3),
#app .lives[data-remaining="1"] .lives__pip:nth-child(n+2),
#app .lives[data-remaining="0"] .lives__pip { background: transparent; opacity: .4; }
#app .meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding-top: .45rem;
  background: transparent;
  border: 0;
  border-top: 1px solid #7163453d;
  border-radius: 0;
  overflow: visible;
}
#app .meter {
  display: grid;
  justify-items: center;
  gap: .18rem;
  padding: 0 .3rem;
  background: transparent;
  border: 0;
}
#app .meter + .meter { border-left: 1px solid #71634555; }
#app .meter__label { color: var(--room-text); font-size: .78rem; letter-spacing: .12em; }
#app .meter__value { color: var(--room-text); font-size: clamp(1.3rem, 6.8vw, 1.9rem); line-height: 1.05; letter-spacing: 0; }
#app .meter--score .meter__value { font-size: clamp(1.05rem, 5.8vw, 1.7rem); }
#app .meter__sub { color: inherit; font-size: .65em; }
#app .field {
  grid-area: field;
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  padding: 0;
  background:
    linear-gradient(to bottom, #211912 0 12%, transparent 12% 88%, #211912 88% 100%),
    var(--ui-fusuma-art, url('../assets/ui/fusuma-art.webp')) center / 100% 76% no-repeat,
    var(--paper-base);
  background-blend-mode: normal, multiply;
  box-shadow: inset 0 0 16px #0009;
}
#app .surface {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  /* border/padding would shift getBoundingClientRect() away from the SVG. */
  border: 0;
  padding: 0;
  border-radius: 0;
  background-color: var(--room-wood);
  background-image: linear-gradient(var(--paper-base), var(--paper-base)), var(--ui-fusuma-art, url('../assets/ui/fusuma-art.webp')), var(--ui-wood, url('../assets/ui/wood.webp'));
  background-position: center, center, center;
  background-size: 100% 76%, 100% 76%, 256px 40px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: multiply, normal, normal;
  box-shadow: inset 0 0 0 1px #17130f;
  overflow: hidden;
  touch-action: none;
}
#app .rift > rect:first-of-type { fill: transparent; }
#app .rift__hazard, #app .rift__closed > rect { fill-opacity: var(--room-photo-opacity); }
#app .rift__band { fill: #211912; opacity: .28; }
#app .rift__gateline { stroke: #b18a50; stroke-width: 1; stroke-dasharray: none; opacity: .8; }
#app .rift__corridor { fill: var(--seam-2); fill-opacity: .97; }
#app .rift__axis { stroke: #c18a2a; stroke-width: .85; stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 2px #fff4c9); }
#app .rift__edge { stroke: #916739; stroke-width: 1.4; opacity: 1; }
#app .rift__closed-frame rect { stroke: #282019; stroke-width: 3; }
/* 黒い引手は左右各1つ、現行renderGateの座標に追従する。 */
#app #issen-pull .pull__well, #app #issen-pull .pull__rim { x: -8px; y: -8px; width: 16px; height: 16px; rx: 8px; }
#app .pull__well { fill: #343a34; }
#app .pull__rim { stroke: #0b100e; stroke-width: .8; }
#app .pull__gleam { stroke: #9b998777; stroke-width: .8; }
#app .surface__tag { color: #e4ce9c; font-family: var(--font-mincho); font-size: .84rem; letter-spacing: .16em; transform: translate(-50%, -50%); }
#app .surface__tag--entry { top: 6%; }
#app .surface__tag--goal { top: 94%; }
#app .surface__signal, #app .surface__depth-readout { display: none; }
#app .console {
  grid-area: console;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 44px;
  gap: .2rem;
  height: 6.8rem;
  padding: .5rem 1.25rem .6rem;
  color: var(--room-text);
  background: repeating-linear-gradient(92deg, #786a3512 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, #77683810 0 1px, transparent 1px 3px), linear-gradient(#e6d9b6, #d7c8a2);
  box-shadow: inset 0 5px 10px #49341430;
}
#app .console__status:not(.sr-only) { align-self: center; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--room-text); font-size: .9rem; line-height: 1.4; text-align: center; overflow: auto; }
#app .console > #action { grid-row: 2; min-height: 44px; }
#app #action:disabled { opacity: 1; color: var(--room-muted); background: transparent; border-color: transparent; box-shadow: none; font-size: .85rem; }
#app #action:not(:disabled), #app #verdict-action { background: var(--room-red); color: #fff8e9; border: 1px solid #85261e; border-radius: 3px; box-shadow: 0 3px 0 #81291f; }
#app .outcome-signal {
  width: min(88%, 17rem);
  min-height: 8rem;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .55rem;
  padding: 1.1rem;
  color: var(--room-text);
  background: color-mix(in srgb, var(--room-wash) 94%, transparent);
  border: 1px solid #a08a5a66;
  border-radius: 4px;
  box-shadow: 0 10px 24px #20170930;
}
#app .outcome-signal[data-tone="pass"] { grid-template-columns: 1fr; }
#app .outcome-signal__mark { width: 3.6rem; height: 3.6rem; border: 2px solid var(--room-red); color: var(--room-red); font-size: 2.35rem; box-shadow: 0 0 0 3px #b8382d22; transform: rotate(-10deg); }
#app .outcome-signal__text { font-size: 1.7rem; letter-spacing: .15em; }
#app .verdict { color: var(--room-text); background: color-mix(in srgb, var(--room-wash) 93%, transparent); }
#app .verdict__title { font-size: clamp(1.4rem, 7vw, 2rem); }
#app .verdict__score { color: #896422; }
#app .mode-menu { background: var(--ground); background-image: radial-gradient(ellipse at 50% 0%, #f4ddae44, transparent 70%); }
#app .mode-menu .title-logo { border: 0; background: transparent; }
#app .mode-menu .guide { border-radius: 5px; }
#app .mode-menu .mode-choice--practice { background: var(--room-red); color: #fff8e9; border-color: #85261e; box-shadow: 0 3px 0 #81291f; }
#app .mode-menu .mode-choice__mark, #app .mode-menu .mode-choice__arrow { color: inherit; }
#app button:focus-visible { outline: 3px solid #a46e18; outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  :root { --room-paper: #28231c; --room-text: #f1e4ca; --room-muted: #e0cfab; --room-wash: #30281e; --room-red: #c44736; }
  #app .console { background: repeating-linear-gradient(92deg, #f3ddb510 0 1px, transparent 1px 5px), linear-gradient(#352e20, #241f17); }
  #app .game-back { color: #fff8e9; background: #15130f; }
  #app .rift__axis { stroke: #fff0b3; }
  #app .rift__corridor { fill: #976a29; }
  #app .rift__edge { stroke: #dcba71; }
  #app .verdict__score { color: #e0ba6b; }
}
@media (max-height: 700px) and (orientation: portrait) {
  #app[data-screen="game"] { grid-template-rows: auto minmax(0, 1fr) 6.1rem; }
  #app .hud { gap: .3rem; padding: .35rem .8rem .45rem; }
  #app .meter__value { font-size: 1.35rem; }
  #app .meter__label { font-size: .7rem; }
  #app .console { height: 6.1rem; padding: .3rem .9rem .45rem; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #app[data-screen="game"] {
    width: min(100vw, 56rem);
    grid-template-columns: minmax(0, 1fr) minmax(15rem, .9fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "field hud" "field console";
    gap: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #app .console { align-self: stretch; height: 100%; grid-template-rows: minmax(0, 1fr) 44px; padding: .5rem 1rem 1rem; }
  #app .hud { padding: .45rem .65rem; }
  #app .surface { max-height: 100%; }
  #app .surface__tag { font-size: .7rem; }
}
@media (min-width: 960px) and (min-height: 561px) {
  #app { width: min(calc(100vw - 3rem), 38rem); height: min(calc(100dvh - 2rem), 52rem); }
  #app[data-screen="game"] { width: min(calc(100vw - 3rem), 32rem); height: min(calc(100dvh - 2rem), 56rem); padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation: none !important; transition: none !important; }
}

/* ボタンの連続タップをダブルタップ拡大へ渡さず、クリックを即時に確定する。 */
#app button { touch-action: manipulation; }