/* 承認された絵の構図を、操作可能なUIとして実装する。 */
#app { container-type: inline-size; }
#app[data-screen="home"] { --home-height: max(740px, 100dvh, 211cqw); }
#app[data-screen="home"] .topbar { z-index: 4; height: calc(var(--home-height) * .245); padding: calc(12px + env(safe-area-inset-top)) 14px 0; }
#app[data-screen="home"] .masthead-home { top: calc(var(--home-height) * .085); left: 12%; right: 12%; width: 76%; height: calc(var(--home-height) * .135); }
#app .home { position: relative; display: flex; flex-direction: column; height: auto; min-height: calc(var(--home-height) * .755); padding: 0 9% max(18px, env(safe-area-inset-bottom)); gap: 12px; }
#app .home__intro { padding: 0; }
#app .home__tagline { margin: 0; font-size: clamp(.95rem,4.2cqw,1.3rem); line-height: 1.45; letter-spacing: 0; }
#app .home-art { top: calc(var(--home-height) * -.245); bottom: 0; height: auto; min-height: var(--home-height); }
#app .home-art img { object-fit: fill; object-position: center; }
#app .home-start { margin-top: calc(var(--home-height) * .36); flex: none; }
#app .menu__item--mint { min-height: 62px; gap: 14px; padding: 9px 14px; border-color: #593219; background: linear-gradient(#ffe983,#ffd655 54%,#ffc63d); box-shadow: inset 0 2px 1px #fff5bd,0 3px 0 #ab691f,0 4px 7px #51321840; }
#app .menu__item--mint .menu__body strong { font-size: clamp(1.65rem,6.4cqw,2.25rem); }
#app .home-options { margin: 0; gap: 12px; }
#app .home-options .difficulty-options { padding: 5px; border: 2px solid #a87c4c; border-radius: 18px; background: #f9ebd5ed; box-shadow: inset 0 2px 0 #fff9e9,0 3px 3px #64391830; }
#app .home-options .difficulty-options button { min-height: 54px; padding: 7px 4px 18px; border: 1px solid #c29d79; border-radius: 12px; background: linear-gradient(#fff9ed,#f2dfc1); box-shadow: inset 0 1px 1px #fff; }
#app .home-options .difficulty-options button::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 4px); width: 8px; height: 8px; border: 1px solid #ad8764; border-radius: 50%; background: #fff7e6; }
#app .home-options .difficulty-options button[aria-pressed="true"] { background: linear-gradient(#eef6d5,#d6eab7); border-color: #6a9a55; box-shadow: inset 0 1px 0 #fff; }
#app .home-options .difficulty-options button[aria-pressed="true"]::after { background: #43953b; border-color: #287329; }
#app .home-options .difficulty-options strong, #app .home-options .difficulty-options:has([data-difficulty="oni"]) strong { font-size: clamp(.78rem,3.1cqw,1rem); }
#app .home-unlock-hint { margin: 4px 0 0; font-size: .75rem; }
#app .home-options .answer-style { display: block; }
#app .home-options .answer-style__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#app .home-options .answer-style .tabs { gap: 3px; width: 82%; margin: auto; padding: 3px; border: 2px solid #ab7b51; border-radius: 99px; background: #fcf0dcf2; box-shadow: inset 0 1px 0 #fff,0 2px 3px #67402430; }
#app .home-options .tabs button { min-height: 44px; padding: 5px 7px; border-radius: 99px; font-size: .87rem; font-weight: 900; }
#app .home-options .tabs button[aria-pressed="true"] { color: #3f4724; background: linear-gradient(#e6f1ce,#d4e9ae); box-shadow: inset 0 0 0 1px #7d9c61; }
#app .home__setup { margin: 0; padding: 0; }
#app .menu { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
#app .menu__item--howto, #app .menu__item--highscore { width: 100%; min-width: 0; min-height: 44px; padding: 8px; gap: 6px; border: 1px solid #916342; border-radius: 13px; background: #fff5e6f2; }
#app .menu__item--howto .menu__body strong, #app .menu__item--highscore .menu__body strong { font-size: .86rem; overflow-wrap: anywhere; }
#app .home__slogan { margin-top: 12px; width: 100%; font-size: .8rem; }
/* ポータルは一閃と同じSVG/CSS。背景画像には含めない。 */
#app .home-portal-menu > summary, #app .home-portal { color: #48271b; border: 1px solid #aa8965; background: #fffdf5f5; box-shadow: 0 2px 5px #3e291a33; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* 襖の絵は左右の可動パネルだけに使い、中央を横切る素材は実画像のまま。 */
#app[data-screen="game"] .topbar { background: linear-gradient(#bc864b 0 3px,#704121 3px 8px,#f3e2c2 8px); border-bottom-color: #79502b; }
#app .hud__score output { font-size: clamp(1rem,5.1cqw,1.5rem); white-space: nowrap; }
#app .scanner { padding: 0 8px; border-inline-color: #98623a; grid-template-rows: minmax(0,1fr) 35px; background: repeating-linear-gradient(0deg,#c1b786 0 1px,#d4c894 1px 3px); }
#app .scanner__panel { background: #f3dfb4 var(--fusuma-art,url('../assets/scenes/approved-fusuma.webp')) right center / cover no-repeat; }
#app .scanner__window[data-phase="answer"] .scanner__guide { visibility: hidden; }
#app .scanner__prompt { font-size: .75rem; }
#app .answer { gap: 10px; padding: 12px; background: linear-gradient(90deg,#e9c9a080,transparent 15% 85%,#e9c9a080),#f8e6cc; border-top: 7px solid #966338; }
#app .answer__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
#app .answer-clock { margin: 0; min-height: 40px; padding: 6px 9px; border-radius: 14px; box-shadow: inset 0 1px 0 #fffdf5,0 2px 4px #71492330; }
#app .answer__timer { min-width: 58px; font-size: 1rem; }
#app .choices { grid-template-rows: repeat(2,clamp(52px,8dvh,76px)); gap: 9px; }
#app .choice { border-color: #9d7049; border-radius: 15px; background: linear-gradient(#fffaf0,#f9ecd9); box-shadow: inset 0 2px 0 #fff,0 3px 3px #77462930; }
#app .choice__name { font-size: clamp(.9rem,4.3cqw,1.4rem); }
#app .choice[data-state="correct"] { color: #284d1d; background: #e5f4d1; border: 2px solid #5c943f; }
#app .choice[data-state="wrong"] { color: #652c1c; background: #ffe5d8; border: 2px solid #b94e35; }
#app .choice[data-state="correct"]::before, #app .choice[data-state="wrong"]::before { top: 5px; right: 7px; font-size: 1.1rem; }
#app .game-status { margin: 0; min-height: 4.2em; font-size: .77rem; line-height: 1.4; }
#app .scanner__feedback, #app .scanner__feedback:has(img) { top: 36%; width: calc(100% - 32px); max-width: 24rem; min-height: 0; max-height: none; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px; border: 2px solid #7e9d61; border-radius: 20px; background: #fff9eaf7; text-align: center; }
#app .scanner__feedback:has(img) { grid-template-columns: 40px minmax(0,1fr); }
#app .scanner__feedback:has(img) .round-feedback__heading { grid-column: 1 / -1; }
#app .scanner__feedback[hidden] { display: none; }
#app .scanner__feedback[data-tone="bad"] { border-color: #bf7450; }
#app .round-feedback__heading { display: flex; align-items: center; justify-content: center; gap: .3em; margin: 0; color: #237537; font-size: clamp(1.35rem,7.2cqw,2.1rem); line-height: 1.15; font-weight: 900; overflow-wrap: anywhere; }
#app [data-tone="bad"] .round-feedback__heading { color: #b64028; }
#app .round-feedback__mark { flex: none; font-size: 1.3em; line-height: 1; }
#app .round-feedback__label { display: block; text-align: center; font-size: clamp(.9rem,4cqw,1.2rem); line-height: 1.4; }
#app .round-feedback__icon { width: 40px; height: 40px; }
/* 正解・不正解はこの単一のボタンを共用し、文言で位置を変えない。 */
#app .next-round-button { top: 72%; bottom: auto; left: 50%; width: 36%; min-width: 110px; max-width: 190px; height: 52px; min-height: 52px; padding: 6px 10px; font-size: .9rem; line-height: 1.15; overflow-wrap: anywhere; background: linear-gradient(#ffe985,#ffd64a,#ffc941); transform: translate(-50%,-50%); }
#app .next-round-button:active { transform: translate(-50%,calc(-50% + 2px)); }
@media (orientation: portrait) {
  #app[data-screen="game"] { grid-template-rows: calc(112px + env(safe-area-inset-top)) minmax(588px,1fr); overflow-x: hidden; overflow-y: auto; }
}
@container (max-width: 420px) {
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options:has([data-difficulty="oni"]) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options:has([data-difficulty="oni"]) strong { font-size: .85rem; overflow-wrap: normal; }
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .answer-style .tabs { width: 100%; }
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .tabs button { font-size: .82rem; }
}
@media (orientation: landscape) {
  #app[data-screen="home"] { --home-height: max(740px,150cqw); }
  #app[data-screen="home"] .topbar { height: 90px; }
  #app[data-screen="home"] .masthead-home { top: 80px; left: 6%; width: 40%; height: 95px; }
  #app .home { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; min-height: 360px; padding: 0 5% 18px; gap: 10px 6%; }
  #app .home__intro { grid-column: 1; grid-row: 1 / 4; padding-top: 125px; }
  #app .home-art { top: -90px; min-height: 540px; height: 100%; }
  #app .home-art img { object-fit: cover; object-position: center 40%; }
  #app .home-start { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; }
  #app .home-options { grid-column: 2; grid-row: 2; align-self: start; }
  #app .home__setup { grid-column: 2; grid-row: 3; align-self: start; }
  #app .home__tagline { font-size: .9rem; }
  #app .home-options .answer-style .tabs { width: 100%; }
  #app .answer { grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; }
  #app .choices { grid-template-rows: repeat(2,minmax(44px,1fr)); }
  #app .scanner__feedback, #app .scanner__feedback:has(img) { top: 32%; padding: 8px; gap: 6px; }
  #app .scanner__feedback:has(img) { grid-template-columns: 32px minmax(0,1fr); }
  #app .round-feedback__heading { font-size: 1.25rem; }
  #app .round-feedback__label { font-size: .85rem; }
  #app .round-feedback__icon { width: 32px; height: 32px; }
  #app .choice__name { font-size: clamp(.9rem,2.2cqw,1.25rem); }
}
@media (min-width: 960px) and (min-height: 561px) {
  #app { width: min(calc(100vw - 48px),58rem); }
  #app[data-screen="home"] .masthead-home { top: 110px; height: 145px; }
  #app .home__intro { padding-top: 220px; }
  #app .home { min-height: calc(100dvh - 145px); }
  #app .home-art { min-height: 100dvh; }
  #app .menu__item--mint { min-height: 70px; }
}
@media (max-height: 360px) and (orientation: landscape) {
  #app .scanner { min-height: 265px; }
  #app .answer { min-height: 265px; }
  #app[data-screen="game"] main, #app[data-screen="game"] .game { min-height: 265px; }
}

#app .home-options .difficulty-options button[data-difficulty] { background-image: linear-gradient(#fff9ed,#f2dfc1); }
#app .home-options .difficulty-options button[data-difficulty][aria-pressed="true"] { background-image: linear-gradient(#eef6d5,#d6eab7); }

/* 解放した難易度だけを並べる。空のロック枠を残さない。 */
#app .home-options .difficulty-options,
#app .home-options .difficulty-options:has([data-difficulty="oni"]) { grid-template-columns: repeat(var(--visible-difficulties,1),minmax(0,1fr)); }
@container (max-width: 420px) {
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options[data-count="3"],
  html:is(:lang(en),:lang(fr),:lang(es),:lang(de),:lang(pt)) #app .home-options .difficulty-options[data-count="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* 画面切替で戻る操作の位置を動かさず、ノッチの内側へ置く。 */
#app { --back-top: calc(12px + env(safe-area-inset-top)); --back-left: calc(14px + env(safe-area-inset-left)); }
#app .topbar > .home-portal-menu,
#app .topbar > .game-back { grid-area: auto; position: absolute; top: var(--back-top); left: var(--back-left); margin: 0; width: 44px; height: 44px; }
/* 襖は常に半幅の同じ板。開閉は移動のみで、背景のcover倍率を変えない。 */
#app .scanner__panel { width: 50%; transition: transform .28s ease-out; will-change: transform; }
#app .scanner__panel--left { transform: translateX(calc(-1 * var(--panel-shift,var(--gap-w)))); }
#app .scanner__panel--right { transform: translateX(var(--panel-shift,var(--gap-w))) scaleX(-1); }
@media (prefers-reduced-motion: reduce) { #app .scanner__panel { transition: none; } }

#app .menu__item--mint:disabled { cursor: wait; filter: saturate(.7); }

#app .result-sharing { width: 100%; margin: 18px auto 0; }
#app .result-sharing[hidden] { display: none; }
#app .result-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#app .result-share-actions :is(button, a) { flex: 1 1 105px; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #986d46; border-radius: 12px; background: #fff4de; color: #432719; font: inherit; font-size: .9rem; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
#app .result-sharing p { margin: 9px 0; color: #654730; font-size: .75rem; line-height: 1.5; }
#app #result-share-text { width: 100%; min-height: 8em; padding: 10px; border: 1px solid #ac855e; border-radius: 10px; background: #fff8ea; color: #3f291c; font: inherit; font-size: .85rem; user-select: text; -webkit-user-select: text; }

/* 承認された正誤札。和紙・葉・強調線は生成素材、見出しと答えは翻訳可能なDOM。 */
#app .scanner__feedback,
#app .scanner__feedback:has(img) {
  top: 37%; width: 84%; max-width: 32rem; min-height: 100px; max-height: none;
  aspect-ratio: 3.05; padding: 12px 10%; gap: 5px; border: 0; border-radius: 0;
  color: #3b1b0f; background-color: transparent;
  background-image: var(--feedback-correct-art,url('../assets/feedback/correct.webp'));
  background-repeat: no-repeat; background-position: center;
  background-size: 107.65% 138.02%; box-shadow: none; overflow: visible;
}
#app .scanner__feedback[data-tone="bad"] {
  background-image: var(--feedback-incorrect-art,url('../assets/feedback/incorrect.webp'));
  background-size: 104.05% 146.82%;
}
#app .round-feedback__heading { min-width: 0; gap: .13em; margin: 0; color: #25833b; font-size: clamp(1.65rem,10cqw,2.9rem); font-weight: 900; line-height: 1.03; }
#app .round-feedback__heading[data-compact="true"] { font-size: clamp(1.35rem,8.2cqw,2.35rem); }
#app .round-feedback__heading[data-long="true"] { font-size: clamp(1.2rem,7cqw,2rem); }
#app .scanner__feedback[data-tone="bad"] .round-feedback__heading { color: #c94027; }
#app .round-feedback__mark { display: block; flex: 0 0 1.14em; width: 1.14em; height: 1.14em; font-size: 1em; line-height: 1; }
#app .round-feedback__mark svg { display: block; width: 100%; height: 100%; }
#app .round-feedback__title { min-width: 0; overflow-wrap: anywhere; }
#app .round-feedback__label { min-width: 0; color: #3b1b0f; font-size: clamp(.88rem,4.4cqw,1.3rem); font-weight: 850; line-height: 1.25; }
#app .scanner__feedback:has(img) { grid-template-columns: 32px minmax(0,1fr); }
#app .round-feedback__icon { width: 32px; height: 32px; }
#app .next-round-button { font-size: clamp(1rem,4.8cqw,1.35rem); line-height: 1.12; border: 2px solid #efa03a; background: linear-gradient(#ffe98a,#ffd754 55%,#ffc239); box-shadow: inset 0 1px 2px #fffce6,0 0 0 1px #fff2bb,0 0 13px #efaa3b66,0 3px 0 #b37531; }
#app .choice[data-state="correct"], #app .choice[data-state="wrong"] { overflow: visible; }
#app .choice[data-state="correct"]::before, #app .choice[data-state="wrong"]::before { display: grid; place-items: center; z-index: 2; top: -4px; right: -4px; width: clamp(22px,6.5cqw,28px); height: clamp(22px,6.5cqw,28px); padding: 0; border: 1px solid #267c32; border-radius: 50%; color: white; background: linear-gradient(#67b655,#338d3c); box-shadow: 0 0 0 2px #fff7df; font-size: clamp(15px,4.6cqw,20px); font-weight: 900; line-height: 1; }
#app .choice[data-state="wrong"]::before { border-color: #ad3427; background: linear-gradient(#ef7855,#d33b29); }
@media (orientation: landscape) {
  #app .scanner__feedback, #app .scanner__feedback:has(img) { top: 31%; min-height: 88px; width: 86%; padding: 9px 10%; gap: 4px; }
  #app .round-feedback__heading { font-size: 1.7rem; }
  #app .round-feedback__heading[data-compact="true"] { font-size: 1.4rem; }
  #app .round-feedback__heading[data-long="true"] { font-size: 1.22rem; }
  #app .round-feedback__label { font-size: .88rem; }
  #app .next-round-button { top: 76%; font-size: .95rem; }
}

/* 長い訳は札の装飾を避けた中央へ収める。文字を極小にせず自然な2行を許可する。 */
#app .round-feedback__heading[data-compact="true"] { width: 72%; justify-self: center; margin-inline: auto; }
#app .round-feedback__heading[data-compact="true"] .round-feedback__title { text-wrap: balance; }
#app .scanner__feedback:has(.round-feedback__heading[data-compact="true"]) { aspect-ratio: auto; }

/* 短い翻訳語は一語のまま。Correct / ! などの分断を作らず19px以上を保つ。 */
#app .round-feedback__heading[data-compact="true"]:not([data-long="true"]) { font-size: clamp(19px,6cqw,27px); }
#app .round-feedback__heading[data-compact="true"]:not([data-long="true"]) .round-feedback__title { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@media (orientation: landscape) {
  #app .round-feedback__heading[data-compact="true"]:not([data-long="true"]) { font-size: 1.2rem; }
}