/* ---------- floor 3: Hogwarts (Great Hall, letters, Sorting Hat) ---------- */
:root {
  --f3-parch-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .2  0 0 0 0 .07  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --f3-ink: #2b1a0e;
}
.f3-bubble {
  position: absolute; left: 9cqw; right: 9cqw; top: 46.5cqh;
  padding: 1.1cqh 4cqw 1.3cqh; text-align: center;
  color: var(--f3-ink);
  background:
    var(--f3-parch-noise),
    radial-gradient(ellipse at 50% 40%, #f6ead0 0 45%, #e7d2a6 75%, #c9a76c 100%);
  border-radius: .6cqh;
  box-shadow: inset 0 0 2.2cqh rgba(120, 72, 20, .55), 0 .8cqh 2cqh rgba(0,0,0,.6);
  font-family: var(--f-hp); font-style: italic; font-size: 2.35cqh; line-height: 1.22; text-wrap: balance;
  opacity: 0; pointer-events: none; z-index: 2;
}
.f3-bubble::before {
  content: ''; position: absolute; left: 50%; top: -1.4cqh; margin-left: -1.4cqh;
  border: 1.4cqh solid transparent; border-top: 0; border-bottom-color: #ecdcb6;
}
.f3-speaker {
  display: block; font-family: var(--f-hp-sc); font-style: normal; font-size: 1.5cqh;
  letter-spacing: .12em; color: #7a1d14; margin-bottom: .2cqh;
}
.f3-bubble.show { animation: f3Pop .3s ease-out forwards; }
@keyframes f3Pop { from { opacity: 0; transform: translateY(1cqh) scale(.92); } to { opacity: 1; transform: none; } }

.f3-panel {
  position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 1.6cqh; top: 61cqh;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .6s ease-in, opacity .6s ease-in;
}
.f3-panel.gone { transform: translateY(60cqh) rotate(6deg); opacity: 0; pointer-events: none; }
.f3-letter {
  position: relative;
  padding: 1.8cqh 5cqw 1.8cqh;
  color: var(--f3-ink);
  background:
    var(--f3-parch-noise),
    linear-gradient(100deg, rgba(120, 70, 20, .18), transparent 18% 82%, rgba(120, 70, 20, .22)),
    radial-gradient(ellipse at 50% 35%, #f8eed6 0 40%, #ecdcb4 70%, #d4b47a 100%);
  border-radius: .4cqh;
  box-shadow:
    inset 0 0 3cqh rgba(110, 62, 16, .55),
    inset 0 0 .6cqh rgba(80, 40, 8, .6),
    0 1.2cqh 3cqh rgba(0, 0, 0, .7);
  animation: f3Letter .55s cubic-bezier(.2, 1.2, .4, 1);
  transform: rotate(-.6deg);
}
@keyframes f3Letter {
  from { transform: translateY(40cqh) rotate(8deg) scale(.9); opacity: 0; }
  to { transform: rotate(-.6deg); opacity: 1; }
}
.f3-letter-head {
  display: flex; flex-direction: column; align-items: center; gap: .2cqh;
  padding-bottom: .6cqh; margin: 0 6cqw .8cqh;
  border-bottom: 1px solid rgba(80, 40, 10, .45);
}
.f3-school { font-family: var(--f-hp-sc); font-size: 1.55cqh; letter-spacing: .08em; color: #5a2a12; text-align: center; }
.f3-progress { font-family: var(--f-hp); font-style: italic; font-size: 1.5cqh; color: #7a1d14; }
.f3-question {
  font-family: var(--f-hp); font-size: 2.85cqh; line-height: 1.15; text-align: center;
  margin: 0 2cqw 1cqh; color: #24140a; text-wrap: balance;
}
.f3-question::first-letter { font-family: var(--f-hp-sc); font-size: 1.25em; color: #7a1d14; }
.f3-answers { display: grid; gap: .8cqh; }
.f3-answer {
  display: flex; align-items: baseline; gap: 2cqw;
  min-height: 5.2cqh; padding: .95cqh 3cqw .65cqh; cursor: pointer; text-align: left;
  font-family: var(--f-hp); font-size: 2.3cqh; line-height: 1.15; color: var(--f3-ink);
  background:
    var(--f3-parch-noise),
    linear-gradient(#f3e6c6, #e2cc9c);
  border: 0; border-radius: .3cqh;
  box-shadow: inset 0 0 1.2cqh rgba(120, 72, 20, .45), 0 .25cqh 0 rgba(90, 50, 15, .55), 0 .6cqh 1cqh rgba(0,0,0,.25);
  touch-action: manipulation; transition: transform .12s, box-shadow .12s;
}
.f3-opt { font-family: var(--f-hp-sc); color: #7a1d14; font-size: 2.2cqh; flex: none; }
.f3-opt-text { flex: 1; }
.f3-answer:hover:not(:disabled), .f3-answer:focus-visible {
  outline: none; transform: translateX(.8cqw);
  box-shadow: inset 0 0 1.2cqh rgba(120, 72, 20, .45), 0 0 0 .3cqh rgba(122, 29, 20, .7), 0 .6cqh 1.4cqh rgba(0,0,0,.35);
}
.f3-answer:disabled { opacity: .5; cursor: default; }
.f3-answer.picked {
  opacity: 1; color: #fff3dc;
  background: var(--f3-parch-noise), linear-gradient(#a3241c, #6e1210);
  box-shadow: inset 0 0 1.2cqh rgba(0,0,0,.5), 0 0 2cqh rgba(255, 190, 90, .55);
}
.f3-answer.picked .f3-opt { color: #ffd98a; }
.f3-sign {
  font-family: var(--f-hp); font-style: italic; font-size: 1.45cqh; text-align: right;
  color: #5a2a12; margin-top: .9cqh; opacity: .85;
}
.f3-seal {
  position: absolute; right: -1.5cqw; top: -2.6cqh; width: 9cqh; height: 9cqh;
  transform: rotate(12deg); filter: drop-shadow(0 .4cqh .4cqh rgba(0,0,0,.55));
  pointer-events: none;
}
.f3-seal svg { width: 100%; height: 100%; display: block; }

.f3-shout {
  position: absolute; left: 0; right: 0; top: 60cqh; text-align: center; pointer-events: none;
  font-family: var(--f-hp-sc); font-size: 5.6cqh; color: #ffe08a; letter-spacing: 0; white-space: nowrap;
  text-shadow: 0 0 2cqh rgba(255, 190, 60, .9), 0 .4cqh 0 #4a2a06, 0 0 5cqh rgba(76, 175, 52, .8);
  animation: f3Shout 1.5s ease-out forwards;
}
@keyframes f3Shout {
  0% { transform: scale(2.6); opacity: 0; }
  14% { transform: scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: scale(1.08); opacity: 0; }
}
.f3-crest {
  position: absolute; left: 0; right: 0; top: 46cqh; bottom: 2cqh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh;
  animation: f3Slam .6s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes f3Slam { from { transform: scale(2.4) rotate(-8deg); opacity: 0; } }
.f3-shield { height: 30cqh; width: auto; filter: drop-shadow(0 0 3cqh rgba(255, 200, 80, .55)) drop-shadow(0 1cqh 1cqh rgba(0,0,0,.6)); }
.f3-motto {
  font-family: var(--f-hp); font-style: italic; font-size: 2.6cqh; color: #2b1a0e;
  background: var(--f3-parch-noise), linear-gradient(#f6e9c9, #dcc08a);
  padding: .5cqh 6cqw; border-radius: .3cqh;
  box-shadow: inset 0 0 1cqh rgba(120, 72, 20, .5), 0 .5cqh 1cqh rgba(0,0,0,.5);
  transform: rotate(-1.5deg);
}
.f3-house-sub { font-family: var(--f-hp-sc); font-size: 2cqh; color: #ffe08a; text-shadow: 0 .2cqh .4cqh #000; letter-spacing: .06em; }
.f3-continue {
  margin-top: .6cqh; cursor: pointer; touch-action: manipulation;
  font-family: var(--f-hp-sc); font-size: 2.6cqh; letter-spacing: .08em; color: #fff3dc;
  padding: 1.2cqh 8cqw; border: 0; border-radius: 3cqh;
  background: radial-gradient(ellipse at 40% 30%, #d8423a, #9e1c1a 60%, #5e0b0c);
  box-shadow: inset 0 0 0 .3cqh rgba(255, 160, 140, .35), 0 .6cqh 0 #3d0607, 0 1cqh 2cqh rgba(0,0,0,.6);
  animation: f3Glow 1.4s ease-in-out infinite;
}
.f3-continue:active { transform: translateY(.4cqh); box-shadow: inset 0 0 0 .3cqh rgba(255,160,140,.35), 0 .2cqh 0 #3d0607; }
@keyframes f3Glow { 50% { filter: brightness(1.18); } }

/* ---------- floor 4: RE4 merchant menu, attaché case, Krauser QTE ---------- */
:root {
  --f4-ui: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --f4-amber: #e2c27a;
  --f4-line: rgba(196, 184, 150, .38);
  --f4-text: #ece7da;
}
.f4-line {
  position: absolute; left: 4cqw; right: 4cqw; top: 30.6cqh; z-index: 2;
  text-align: center; pointer-events: none; text-wrap: balance;
  font-family: var(--f4-ui); font-stretch: condensed; font-weight: 700; font-size: 2.35cqh; line-height: 1.2;
  color: #fff; text-shadow: 0 0 .3cqh #000, .2cqh .2cqh 0 #000, -.2cqh -.2cqh 0 #000, .2cqh -.2cqh 0 #000, -.2cqh .2cqh 0 #000;
}
.f4-line.pop { animation: f4Sub .25s ease-out; }
@keyframes f4Sub { from { opacity: 0; transform: translateY(.6cqh); } }

.f4-shop {
  position: absolute; left: 2.5cqw; right: 2.5cqw; top: 36.6cqh; bottom: 1.2cqh;
  display: flex; flex-direction: column; gap: .6cqh; padding: 1cqh 2.4cqw 1.1cqh;
  color: var(--f4-text); font-family: var(--f4-ui); font-stretch: condensed;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, rgba(20, 22, 26, .97), rgba(8, 9, 11, .98));
  border: 1px solid var(--f4-line);
  box-shadow: inset 0 0 0 .35cqh rgba(0,0,0,.9), inset 0 0 0 calc(.35cqh + 1px) rgba(196,184,150,.18), 0 0 4cqh rgba(0,0,0,.8);
  animation: f4Open .35s ease-out;
}
@keyframes f4Open { from { opacity: 0; transform: scaleY(.85); } }
.f4-shop.closing { animation: f4Close .5s ease-in .9s forwards; }
@keyframes f4Close { to { opacity: 0; transform: scaleY(.9); } }

.f4-tabs { flex: none; display: flex; gap: 1cqw; border-bottom: 1px solid var(--f4-line); padding-bottom: .5cqh; }
.f4-tab {
  flex: 1; height: 3.9cqh; cursor: pointer; touch-action: manipulation;
  font-family: var(--f-trajan); font-weight: 700; font-size: 1.9cqh; letter-spacing: .12em;
  color: #8d877a; background: linear-gradient(#1a1c20, #101114);
  border: 1px solid rgba(196,184,150,.2); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.f4-tab.on { color: #fff3d0; background: linear-gradient(#5a4520, #2a2010); border-color: var(--f4-amber); text-shadow: 0 0 1cqh rgba(255, 200, 100, .6); }
.f4-tab:hover:not(.on):not(:disabled) { color: var(--f4-text); }

.f4-body { flex: 1; display: grid; grid-template-columns: 1fr 1.16fr; gap: 2cqw; min-height: 0; }
.f4-body:has(.f4-empty) { grid-template-columns: 1fr; }
.f4-body:has(.f4-empty) .f4-list { display: none; }
.f4-list { display: flex; flex-direction: column; gap: .5cqh; min-height: 0; }
.f4-item {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1cqw;
  flex: 1; min-height: 0; max-height: 6.2cqh; padding: 0 1.6cqw 0 3.4cqw; cursor: pointer; touch-action: manipulation; text-align: left;
  font-family: var(--f4-ui); font-stretch: condensed; font-weight: 700; font-size: 1.95cqh; color: var(--f4-text);
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(196,184,150,.14);
}
.f4-item.sel {
  background: linear-gradient(90deg, rgba(214, 166, 70, .42), rgba(214, 166, 70, .06));
  border-color: var(--f4-amber); color: #fff;
}
.f4-item.sel::before {
  content: ''; position: absolute; left: 1cqw; top: 50%; margin-top: -.8cqh;
  border: .8cqh solid transparent; border-left: 1.1cqh solid var(--f4-amber); border-right: 0;
  animation: f4Blink .8s steps(2) infinite;
}
@keyframes f4Blink { 50% { opacity: .2; } }
.f4-item.sold { color: #6d6a62; }
.f4-item.sold .f4-name { text-decoration: line-through; }
.f4-item.nope, .f4-preview.nope { animation: shake .3s, f4Nope .9s ease-out; }
@keyframes f4Nope { 0%, 45% { border-color: #e0261a; box-shadow: 0 0 1.2cqh rgba(224, 38, 26, .55); } }
.f4-name { overflow: hidden; min-width: 0; line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.f4-price { flex: none; color: var(--f4-amber); font-size: 1.9cqh; }
.f4-price b { font-size: 2.1cqh; }
.f4-price small { font-size: 1.3cqh; letter-spacing: .05em; }
.f4-item.sold .f4-price { color: #8a3a30; font-size: 1.5cqh; letter-spacing: .1em; }

.f4-preview {
  display: flex; flex-direction: column; align-items: center; gap: .45cqh; min-height: 0; padding: .7cqh 1.6cqw .8cqh;
  background: radial-gradient(ellipse at 50% 30%, rgba(80, 100, 120, .35), transparent 70%), #0a0c0f;
  border: 1px solid var(--f4-line);
}
.f4-model {
  flex: 1; min-height: 5cqh; width: 100%; display: grid; place-items: center; perspective: 40cqh; overflow: hidden;
  background:
    linear-gradient(transparent 70%, rgba(120, 150, 170, .12) 70%),
    repeating-linear-gradient(90deg, rgba(150, 170, 190, .08) 0 1px, transparent 1px 3cqw);
}
.f4-model-art {
  max-width: 92%; max-height: min(10cqh, 100%); min-height: 0; width: auto; height: auto;
  filter: drop-shadow(0 .6cqh .5cqh rgba(0,0,0,.8));
  animation: f4Turn 5s ease-in-out infinite;
}
@keyframes f4Turn { 0%, 100% { transform: rotateY(-28deg) rotateX(6deg); } 50% { transform: rotateY(28deg) rotateX(-4deg); } }
.f4-pname { font-family: var(--f-trajan); font-weight: 700; font-size: 1.95cqh; color: #fff3d0; text-align: center; line-height: 1.05; text-wrap: balance; }
.f4-desc { font-size: 2cqh; line-height: 1.12; color: #d4cebf; text-align: center; text-wrap: balance; }
.f4-examine {
  width: 100%; padding-top: .45cqh; border-top: 1px solid rgba(196,184,150,.22);
  font-size: 1.85cqh; line-height: 1.14; font-style: italic; color: #aaa497; text-align: center; text-wrap: balance;
}
.f4-buy {
  flex: none; margin-top: .15cqh; width: 100%; height: 4cqh; cursor: pointer; touch-action: manipulation;
  font-family: var(--f-trajan); font-weight: 900; font-size: 1.8cqh; letter-spacing: .14em; color: #1a1408;
  background: linear-gradient(#f2d892, #b8913e); border: 1px solid #fff0c0;
  box-shadow: 0 0 1.4cqh rgba(226, 194, 122, .45);
}
.f4-buy:active:not(:disabled) { transform: translateY(1px); filter: brightness(.9); }
.f4-buy:disabled { cursor: default; color: #8a8478; background: #22242a; border-color: #44464c; box-shadow: none; }
.f4-empty { margin: auto; padding: 0 6cqw; text-align: center; font-size: 2.2cqh; line-height: 1.25; color: #d4cebf; }

.f4-case-wrap {
  position: relative; flex: none; padding: .95cqh 1.4cqw .85cqh;
  background: linear-gradient(#5b3b22, #34200f);
  border-radius: .8cqh;
  box-shadow: inset 0 .25cqh 0 rgba(255, 210, 160, .25), inset 0 -.3cqh 0 rgba(0,0,0,.5), 0 .4cqh 1cqh rgba(0,0,0,.6);
}
.f4-case-wrap::before, .f4-case-wrap::after {
  content: ''; position: absolute; top: -.5cqh; width: 5cqw; height: 1.2cqh; border-radius: .3cqh;
  background: linear-gradient(#d9d9d9, #7a7a7a); box-shadow: 0 .2cqh .3cqh rgba(0,0,0,.6);
}
.f4-case-wrap::before { left: 14%; }
.f4-case-wrap::after { right: 14%; }
.f4-case-label {
  position: absolute; left: 50%; top: -.2cqh; transform: translate(-50%, -50%);
  font-family: var(--f-trajan); font-weight: 700; font-size: 1.3cqh; letter-spacing: .18em; color: var(--f4-amber);
  background: #0b0c0e; padding: .1cqh 1.4cqw; border: 1px solid var(--f4-line);
}
.f4-case {
  position: relative; aspect-ratio: 12 / 4; width: 100%;
  background-color: #18232a;
  background-image:
    linear-gradient(rgba(170, 200, 210, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 200, 210, .22) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 40%, #24343d, #121a20);
  background-size: calc(100% / 12) calc(100% / 4), calc(100% / 12) calc(100% / 4), 100% 100%;
  box-shadow: inset 0 0 1.4cqh rgba(0,0,0,.8);
  border: 1px solid #0a0f12;
}
.f4-tile {
  position: absolute; display: grid; place-items: center; padding: 2px;
  background: rgba(120, 160, 180, .16); outline: 1px solid rgba(210, 230, 240, .45); outline-offset: -1px;
}
.f4-tile-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .3cqh .2cqh rgba(0,0,0,.7)); }
.f4-tile.fresh { animation: f4Drop .5s cubic-bezier(.2, 1.5, .4, 1), f4Hi 1.6s ease-out; }
@keyframes f4Drop { from { transform: translateY(-6cqh) scale(1.3); opacity: 0; } }
@keyframes f4Hi { 0%, 40% { background: rgba(226, 194, 122, .45); outline-color: #fff0c0; } }

.f4-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; height: 4.4cqh; }
.f4-purse {
  display: flex; align-items: center; gap: 1.6cqw; height: 100%; padding: 0 2.4cqw;
  background: #050607; border: 1px solid var(--f4-line);
}
.f4-ptas { font-family: var(--f-trajan); font-weight: 700; font-size: 1.5cqh; letter-spacing: .12em; color: var(--f4-amber); }
.f4-money { font-family: var(--f4-ui); font-weight: 700; font-size: 2.8cqh; color: #fff; min-width: 6cqw; text-align: right; }
.f4-exit {
  height: 100%; padding: 0 6cqw; cursor: pointer; touch-action: manipulation;
  font-family: var(--f-trajan); font-weight: 700; font-size: 1.8cqh; letter-spacing: .16em; color: var(--f4-text);
  background: linear-gradient(#2a2c31, #141518); border: 1px solid var(--f4-line);
}
.f4-exit:hover:not(:disabled) { color: #fff3d0; border-color: var(--f4-amber); }
.f4-shop button:focus-visible { outline: 2px solid #fff0c0; outline-offset: 1px; }

/* QTE touch keys: RE4 PC key caps living in the bottom letterbox */
.f4-pad {
  position: absolute; left: 8cqw; right: 8cqw; bottom: 2.2cqh; height: 19cqh;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 1.4cqh 4cqw;
}
.f4-key {
  position: relative; padding: 0; cursor: pointer; border: 0; border-radius: 1.4cqh;
  background: #18181a; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.f4-key.wide { grid-column: 1 / -1; }
.f4-cap {
  position: absolute; inset: 0 0 .9cqh 0; display: grid; place-items: center; border-radius: 1.4cqh;
  font-family: var(--f-trajan); font-weight: 900; font-size: 3.6cqh; color: #141414;
  background: linear-gradient(#ffffff, #d9dce0 70%, #b9bcc1);
  box-shadow: inset 0 -.4cqh 0 rgba(0,0,0,.12);
}
.f4-key.wide .f4-cap { font-size: 2.4cqh; letter-spacing: .14em; }
.f4-key.tap .f4-cap { animation: f4Tap .18s ease-out; }
@keyframes f4Tap { 50% { transform: translateY(.7cqh); background: linear-gradient(#ffe7a8, #e2c27a); } }