:root { color-scheme: only light; font-family: "Trebuchet MS", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:#163b47; display:grid; place-items:center; touch-action:none; }
.game { position:relative; width:100vw; height:100vh; overflow:hidden; background:url("images/backgrounds/monster-room.png") center/cover no-repeat; isolation:isolate; }
.game::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,36,54,.16),transparent 28%,transparent 75%,rgba(3,48,34,.12)); z-index:-1; }
.hud,.instruction { position:absolute; top:clamp(10px,2vh,22px); z-index:10; color:#15344c; border:3px solid rgba(255,255,255,.9); background:rgba(255,255,255,.88); box-shadow:0 7px 0 rgba(29,73,102,.25),0 9px 24px rgba(15,45,55,.18); backdrop-filter:blur(5px); }
.hud { border-radius:22px; padding:10px 18px; min-height:70px; }
.lives-panel { left:clamp(10px,2vw,28px); }
.score-panel { right:clamp(10px,2vw,28px); display:grid; text-align:center; font-size:clamp(18px,2vw,27px); }
.score-panel strong { color:#7650c7; }
.hud-label { display:block; text-align:center; font-weight:900; font-size:clamp(15px,1.5vw,20px); }
.hearts { display:flex; gap:4px; }
.heart { width:clamp(24px,3vw,39px); filter:drop-shadow(0 2px 1px #a42b58); transition:.25s; }
.heart.lost { opacity:.18; transform:scale(.55); filter:grayscale(1); }
.instruction { left:50%; transform:translateX(-50%); width:min(45vw,590px); text-align:center; border-radius:24px; padding:8px 18px; }
.instruction h1 { margin:0; color:#643ab1; font-size:clamp(20px,2.5vw,38px); line-height:1.05; }
.instruction p { margin:4px 0 0; font-weight:800; font-size:clamp(13px,1.35vw,20px); }
.word-layer { position:absolute; inset:0; }
.word-card { --card:#76d7f2; position:absolute; left:var(--left); top:var(--top); width:clamp(105px,10.5vw,168px); height:clamp(58px,7.2vh,82px); transform:translate(-50%,-50%) rotate(var(--tilt)); border:4px solid white; border-radius:50% 45% 48% 44%; background:linear-gradient(155deg,rgba(255,255,255,.78) 0 15%,var(--card) 30% 74%,rgba(23,74,114,.2) 100%); box-shadow:inset 0 -8px 0 rgba(31,69,108,.16),inset 0 4px 5px rgba(255,255,255,.7),0 7px 0 rgba(25,65,84,.28),0 10px 17px rgba(17,54,61,.22); color:#163b57; font:900 clamp(25px,3vw,43px)/1 "Trebuchet MS",sans-serif; cursor:grab; user-select:none; touch-action:none; z-index:3; }
.word-card.dragging { cursor:grabbing; z-index:50; transform:translate(-50%,-50%) scale(1.1); filter:drop-shadow(0 0 12px white); transition:none; }
.word-card.returning { transition:left .55s cubic-bezier(.2,.8,.3,1),top .55s cubic-bezier(.2,.8,.3,1),transform .55s; }
.word-card.correct { animation:eaten .48s ease-in forwards; background:#77e397; box-shadow:0 0 25px #42ff79; }
.word-card.wrong { animation:shake .45s; background:#ff7883; box-shadow:0 0 24px #ff3148; }
#monster-mouth-zone { position:absolute; left:43%; top:39%; width:20%; height:24%; pointer-events:none; border-radius:45%; z-index:2; }
.game.debug-mouth #monster-mouth-zone { outline:4px dashed #ff2e61; background:rgba(255,30,80,.22); }
.overlay { position:absolute; inset:0; z-index:100; display:grid; place-items:center; background:rgba(9,24,45,.68); backdrop-filter:blur(4px); }
.overlay[hidden] { display:none; }
.result-card { width:min(680px,88vw); min-height:55vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px; border:7px solid white; border-radius:42px; color:#173b5c; background:linear-gradient(145deg,#fff,#dff8ff); box-shadow:0 18px 0 rgba(15,44,69,.3),0 24px 60px #10213d; }
.star { color:#ffc92f; font-size:clamp(55px,9vw,100px); filter:drop-shadow(0 5px #e98b24); }
.result-card h2 { margin:4px 0; color:#7145c6; font-size:clamp(38px,6vw,70px); }
.result-card p,.result-card strong { font-size:clamp(20px,2.5vw,32px); }
.result-card button { margin-top:24px; padding:15px 38px; border:4px solid white; border-radius:999px; background:linear-gradient(#8ee567,#42b94b); box-shadow:0 7px 0 #238536; color:white; font:900 clamp(22px,2.5vw,32px) inherit; cursor:pointer; }
@keyframes eaten { to { left:53%; top:51%; transform:translate(-50%,-50%) scale(.05) rotate(25deg); opacity:0; } }
@keyframes shake { 0%,100%{transform:translate(-50%,-50%)} 25%{transform:translate(calc(-50% - 12px),-50%)} 75%{transform:translate(calc(-50% + 12px),-50%)} }
@media (max-width:700px),(max-height:600px) { .hud{padding:5px 9px;min-height:50px}.instruction{top:8px;width:48vw;padding:6px}.instruction p{display:none}.word-card{width:clamp(86px,13vw,120px);height:clamp(48px,8vh,64px)} }
@media (orientation:portrait) { .game{background-position:center}.instruction{top:90px;width:80vw}.word-card{width:26vw}.score-panel,.lives-panel{top:12px} }