/* 日本語: 白黒の世界に、四角い枠のことばだけを置く。ことばは mix-blend-mode: difference で白地には黒、黒地には白に見える。
   English: Only boxed words on a black/white world; difference blending makes words read black on white and white on black. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #808080; overflow: hidden; overscroll-behavior: none; }
body { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage { --h: 844px; position: fixed; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden; background: #fff; transform-origin: 0 0; }
#world { position: absolute; left: 0; top: 0; width: 780px; height: calc(var(--h) * 2); will-change: transform; }
/* 日本語: メニューの「ピント」でピンボケ（ことばのせかいだけぼかし、メニューや記号は読めるまま）。 / English: "pinto" blurs the world only. */
#stage.pinboke #world { filter: blur(3px); transition: filter .4s; }
#world { transition: filter .4s; }
.ground { position: absolute; left: 0; width: 780px; height: var(--h); }
.ground.white { top: 0; background: #fff; }
.ground.black { top: var(--h); background: #000; }
#words { position: absolute; inset: 0; mix-blend-mode: difference; }
.word, .item, #entry, #menu button, #sheet, #ending { color: #fff; }
.word { position: absolute; top: 0; left: 0; height: 40px; padding: 0 10px; border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; letter-spacing: 0; white-space: nowrap; will-change: transform; }
/* 日本語: ホール・あなは地面に開いた穴。地面の層（#holes）に黒い縦穴を下の黒い世界まで描く。
            ことばは difference で重なるので、穴の上の枠・文字・中に落ちたことばは白く見える。
   English: Holes are black shafts drawn in the ground layer down to the black world; difference-blended words read white over them. */
#holes { position: absolute; inset: 0; }
#holes div { position: absolute; top: 0; left: 0; background: #000; }
.word.tall { writing-mode: vertical-rl; text-orientation: upright; padding: 10px 0; letter-spacing: 1px; }
.word.shake { animation: shake .35s; }
.word.flash { animation: flash .5s; }
.fx { position: absolute; top: 0; left: 0; font-size: 11px; color: #fff; white-space: nowrap; opacity: .75; pointer-events: none; animation: jitter .5s steps(2) infinite; }
.fx.drum { font-size: 13px; animation: drum .5s infinite; }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
@keyframes flash { 0% { outline: 6px solid rgba(255,255,255,.6); } 100% { outline: 0 solid rgba(255,255,255,0); } }
@keyframes jitter { 50% { translate: 0 -2px; } }
@keyframes drum { 0%, 100% { opacity: .95; } 50% { opacity: .25; } }

/* 日本語: 吹き出し。枠の中にさらに四角いオノマトペが入る。 / English: Speech bubble holding boxed onomatopoeia. */
#bubble { position: absolute; z-index: 5; padding: 10px; border: 1.5px solid #fff; border-radius: 12px; display: flex; gap: 8px; mix-blend-mode: difference; }
/* 日本語: 画面の下に「゛」「゜」だけを置く。 / English: The dakuten and handakuten sit along the bottom. */
#tray { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 4; display: flex; justify-content: center; gap: 12px; mix-blend-mode: difference; pointer-events: none; }
#tray .item { pointer-events: auto; }
#stage.ended #tray { display: none; }
/* 日本語: 何かを入れられることばの空の吹き出し。 / English: Empty bubble for words that can receive something. */
#bubble.empty { width: 72px; height: 58px; }
#bubble::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -11px; width: 14px; height: 14px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateX(-50%) rotate(45deg); background: transparent; }
.item { height: 36px; padding: 0 10px; border: 1.5px solid #fff; display: inline-flex; align-items: center; font-size: 16px; white-space: nowrap; touch-action: none; }
.item.small { font-size: 20px; padding: 0 12px; }

.ghost { position: absolute; z-index: 20; pointer-events: none; mix-blend-mode: difference; opacity: .9; }
.ghost.miss { transition: transform .25s, opacity .25s; opacity: 0; }

/* 日本語: 右上の入口1つ。音・ヒント・説明をまとめる。 / English: The single top-right entry for sound, hint and help. */
#entry { position: absolute; top: 14px; right: 14px; z-index: 10; width: 44px; height: 36px; padding: 0; border: 1.5px solid #fff; background: transparent; font-size: 12px; letter-spacing: -1px; mix-blend-mode: difference; touch-action: manipulation; }
#menu { position: absolute; top: 58px; right: 14px; z-index: 9; display: flex; flex-direction: column; gap: 8px; mix-blend-mode: difference; }
#menu button { height: 38px; padding: 0 14px; border: 1.5px solid #fff; background: transparent; font-size: 15px; text-align: left; font-family: inherit; }
#sheet { position: absolute; left: 24px; right: 24px; top: 120px; z-index: 8; padding: 18px; border: 1.5px solid #fff; mix-blend-mode: difference; font-size: 15px; line-height: 1.8; }
#sheet .row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
#sheet .item { height: 32px; font-size: 14px; }
#sheet button { margin-top: 12px; height: 36px; padding: 0 14px; border: 1.5px solid #fff; background: transparent; color: #fff; font: inherit; }
/* 日本語: エンド表示は、ことばの段（中央）に重ならないよう上側に出す。 / English: Ending card sits above the word line. */
#ending { position: absolute; left: 0; right: 0; top: 190px; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 18px; mix-blend-mode: difference; }

#ending .word { position: static; }
#ending .word.round { border-radius: 999px; padding: 0 22px; }
#ending button { height: 40px; padding: 0 16px; border: 1.5px solid #fff; background: transparent; color: #fff; font: inherit; font-size: 16px; }
[hidden] { display: none !important; }

/* 日本語: 最初の説明。ことばの枠だけで並べる。 / English: Opening how-to, built only from boxed words. */
#intro { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: #fff; color: #000; }
#intro .step { display: flex; align-items: center; gap: 10px; font-size: 15px; }
#intro .box { height: 36px; padding: 0 10px; border: 1.5px solid #000; display: inline-flex; align-items: center; font-size: 16px; white-space: nowrap; }
#intro .arrow { font-size: 14px; }
#intro .step.start { margin-top: 18px; gap: 24px; }
#intro .step.start .box { height: 42px; font-size: 18px; padding: 0 14px; touch-action: none; }
#intro button { margin-top: 10px; height: 42px; padding: 0 20px; border: 1.5px solid #000; background: transparent; color: #000; font: inherit; font-size: 17px; }

/* 日本語: 説明の文の中のことばは、そのまま触れる。プルプルは小さく、ブルブルは大きく震える。
   English: Boxed words inside the how-to are interactive; buru-buru shakes harder than puru-puru. */
#intro .box { position: relative; touch-action: none; background: #fff; }
#intro .box.carry { z-index: 20; transition: none; }
#intro .box:not(.carry) { transition: transform .2s; }
#intro .box.puru { animation: puru .28s ease-in-out infinite; }
#intro .box.buru { animation: buru .09s linear infinite; }
#intro .ibubble { position: absolute; z-index: 18; display: flex; gap: 8px; padding: 8px; border: 1.5px solid #000; border-radius: 12px; background: #fff; white-space: nowrap; }
#intro .ibubble.empty { width: 64px; height: 52px; }
#intro .ibubble::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -9px; width: 12px; height: 12px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; background: #fff; transform: translateX(-50%) rotate(45deg); }
@keyframes puru { 0%, 100% { translate: 0 0; } 50% { translate: 1.5px 0; } }
@keyframes buru { 0% { translate: -4px 1px; } 25% { translate: 4px -1px; } 50% { translate: -3px -2px; } 75% { translate: 3px 2px; } 100% { translate: -4px 1px; } }