:root {
  color-scheme: only light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --accent:#ef4f83; --accent-dark:#b9275d; --secondary:#57a765;
  --secondary-dark:#397b46; --home:#8d1209; --home-dark:#5e0905; --ink:#6a321b; --paper:rgba(255,248,218,.96);
}
* { box-sizing:border-box; }
html, body { position:fixed; inset:0; width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { display:grid; place-items:center; background:#2e2435; }
#game-shell {
  position:relative; width:min(100vw, calc(100svh * .45)); height:min(100svh, calc(100vw / .45));
  overflow:hidden; isolation:isolate; background:#f8d9c8; box-shadow:0 0 45px #0007;
}
.flow-screen {
  position:absolute; inset:0; z-index:5; display:none; place-items:center; overflow:hidden;
  padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.flow-screen.visible { display:grid; }
#start-screen { background-image:linear-gradient(#23102433,#23102477),url("assets/room-bg.webp"); }
#end-screen { background-image:linear-gradient(#23102433,#23102477),url("assets/room-bg.webp"); }
.screen-card {
  width:min(92%,470px); max-height:96%; overflow-x:hidden; overflow-y:auto; padding:clamp(15px,4.2cqw,23px);
  scrollbar-width:none; -ms-overflow-style:none;
  border:clamp(3px,.9cqw,5px) solid var(--accent); border-radius:clamp(24px,7cqw,38px);
  background:rgba(255,248,218,.94); color:var(--ink); text-align:center;
  box-shadow:0 clamp(7px,1.8cqw,10px) 0 color-mix(in srgb,var(--accent-dark) 75%,#551c2e),0 18px 44px #24142455;
}
.screen-card::-webkit-scrollbar { display:none; width:0; height:0; }
.start-card { padding-top:clamp(13px,3.7cqw,20px); padding-bottom:clamp(13px,3.7cqw,20px); }
.eyebrow { margin:0; color:var(--accent-dark); font-size:clamp(11px,2.9cqw,14px); font-weight:900; letter-spacing:.09em; }
h1 { margin:clamp(4px,1.2cqw,7px) 0; color:var(--accent); font-size:clamp(34px,9cqw,48px); line-height:1; letter-spacing:-.035em; }
.intro-copy { max-width:34ch; margin:0 auto 5px; font-size:clamp(13px,3.4cqw,16px); font-weight:700; line-height:1.28; }
.start-character { display:block; width:min(31%,130px); max-height:20svh; object-fit:contain; margin:3px auto; }
.name-fields { display:grid; gap:clamp(5px,1.3cqw,8px); text-align:left; }
label span, legend { display:block; margin:0 0 3px; font-size:clamp(12px,3.2cqw,15px); font-weight:900; }
input { width:100%; height:clamp(38px,10cqw,46px); padding:0 13px; border:2px solid var(--accent); border-radius:14px; background:#fffdf6; color:var(--ink); font:700 clamp(14px,3.5cqw,16px) inherit; outline:none; }
input:focus { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.language-field { margin:clamp(6px,1.6cqw,10px) 0; padding:0; border:0; text-align:left; }
#language-select { width:100%; min-height:clamp(40px,10.5cqw,48px); padding:0 42px 0 13px; border:2px solid var(--accent); border-radius:14px; background:#fffdf6; color:var(--ink); font:800 clamp(13px,3.4cqw,16px) inherit; }
.primary-button,.secondary-button,.home-row-button,.site-button { display:grid; width:100%; min-height:clamp(37px,9.5cqw,44px); padding:0 18px; place-items:center; border:0; border-radius:999px; color:#fff; text-decoration:none; font:900 clamp(14px,3.7cqw,17px)/1.1 inherit; cursor:pointer; }
.primary-button { background:var(--accent); box-shadow:0 4px 0 var(--accent-dark); }
.secondary-button { margin-top:14px; background:var(--secondary); box-shadow:0 4px 0 var(--secondary-dark); }
.home-row-button { margin-top:14px; background:var(--home); box-shadow:0 4px 0 var(--home-dark); }
.start-card .secondary-button,.start-card .home-row-button { margin-top:14px; }
.site-button { margin-top:10px; background:var(--secondary); box-shadow:0 7px 0 var(--secondary-dark); }
.primary-button:active,.secondary-button:active,.home-row-button:active,.site-button:active { transform:translateY(2px); box-shadow:0 2px 0 var(--accent-dark); }
.small-note { margin:clamp(10px,2.5cqw,14px) 0 0; font-size:clamp(10px,2.6cqw,12px); line-height:1.25; }
.end-character { display:block; width:min(46%,205px); max-height:25svh; object-fit:contain; margin:4px auto; }
.end-title-image { display:block; width:min(84%,360px); max-height:12svh; object-fit:contain; margin:3px auto; }
.end-message-image { display:block; width:min(88%,390px); max-height:14svh; object-fit:contain; margin:6px auto; }
.end-title-image[hidden],.end-message-image[hidden] { display:none; }
.end-card h2 { margin:4px auto; color:var(--accent); font-size:clamp(20px,5.7cqw,28px); line-height:1.08; }
#end-message { max-width:35ch; margin:6px auto; font-size:clamp(14px,3.7cqw,18px); font-weight:800; line-height:1.3; }
.end-card .secondary-button,.end-card .home-row-button { margin-top:14px; }
.end-from { margin:5px auto 10px; font-size:clamp(12px,3.2cqw,15px); font-weight:900; }
.game-placeholder { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:24px; padding:24px; color:#fff; text-align:center; background:linear-gradient(#5482b4,#f4c887); }
.game-placeholder div { display:grid; gap:6px; }
.game-placeholder button { padding:12px 18px; border:0; border-radius:999px; font-weight:900; }
@media (max-width:699px) { #game-shell { width:100vw; height:100svh; } }
@media (max-height:650px) {
  .screen-card { max-height:98%; padding:12px 16px; }
  .start-character { max-height:15svh; }
  .end-character { max-height:22svh; }
  .small-note { margin-top:7px; }
}