*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Georgia,"Times New Roman",serif;background:#100812;color:#eee}
body{overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(10,3,14,.32),rgba(10,3,14,.62)),url("assets/room.png") center/cover fixed no-repeat;z-index:-2}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 42%,transparent 25%,rgba(9,2,12,.62) 100%);z-index:-1;pointer-events:none}
.screen{min-height:100vh;position:relative;padding:28px 32px 42px}
.hidden{display:none!important}
.title-panel,.card{background:rgba(13,7,14,.84);border:2px solid #79562e;box-shadow:0 8px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(214,176,95,.15);border-radius:12px}
.title-panel{text-align:center;max-width:720px;margin:0 auto;padding:16px 28px}
.title-panel h1{margin:0;color:#f4e6b2;font-size:44px;letter-spacing:4px}
.title-panel p{margin:6px 0 0;color:#d6c18b;font-size:20px}
.hud{display:grid;grid-template-columns:minmax(220px,300px) minmax(300px,430px);gap:16px;max-width:980px;margin:24px auto 0;align-items:start}
.card{padding:16px}
.card h2{margin:0 0 12px;color:#e8d39b;font-size:20px;letter-spacing:1px}
.name-card{display:flex;flex-direction:column;gap:9px}
.name-card label{text-transform:uppercase;color:#e0c47f;letter-spacing:2px}
input{background:#21151f;color:#fff;border:1px solid #9b7340;border-radius:7px;padding:12px;font:inherit}
button{cursor:pointer;border:1px solid #a77c44;background:linear-gradient(#4a254b,#28142c);color:#f5e6b2;border-radius:8px;padding:11px 18px;font:bold 15px Georgia;letter-spacing:1px}
button:hover{filter:brightness(1.2)}
.start{display:block;margin:20px auto 10px;background:linear-gradient(#526e34,#293b1d);border-color:#9cae64;font-size:19px}
.back{display:block;margin:10px auto;background:linear-gradient(#4a254b,#28142c)}
.danger{background:linear-gradient(#572d32,#2c1116);border-color:#a85e63}
.records ol{margin:0 0 12px;padding-left:28px}
.records li{padding:5px 0;border-bottom:1px solid rgba(180,140,90,.15)}
.history{grid-column:2}
#historyList{max-height:180px;overflow:auto;font-size:14px}
.history-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:5px 0;border-bottom:1px solid rgba(180,140,90,.14)}
.creature-showcase{position:absolute;left:50%;top:220px;transform:translateX(-50%);width:min(760px,65vw);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.creature-showcase img{width:29%;height:150px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.75))}
.net-preview{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);pointer-events:none}
.net-preview img{width:230px;height:280px;object-fit:contain}
.tip{position:absolute;left:32px;bottom:30px;max-width:290px;background:rgba(13,7,14,.88);border:2px solid #79562e;padding:13px 16px;border-radius:10px;color:#dfd1a8;line-height:1.45}
.game-top{display:grid;grid-template-columns:190px 1fr 190px;gap:18px;align-items:start}
.compact{max-width:650px}
.compact h1{font-size:38px}
.timer-card,.score-card{display:flex;flex-direction:column;align-items:center;gap:6px}
.timer-card span,.score-card span{color:#d8be7b;letter-spacing:2px}
.timer-card strong,.score-card strong{font-size:35px;color:#fff}
.capture-card{position:absolute;right:30px;top:150px;width:245px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.capture-card div img{width:58px;height:58px;object-fit:contain}
.capture-card div span{display:block;font-size:20px;color:#f5dfaa}
.capture-card>b{grid-column:1/-1;border-top:1px solid #72542e;padding-top:8px}
#playfield{position:absolute;left:6%;right:6%;top:155px;bottom:95px;overflow:hidden}
#net{position:fixed;width:240px;height:285px;object-fit:contain;pointer-events:none;z-index:20;transform:translate(-48px,-62px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.8))}
.bug{position:absolute;width:135px;height:135px;object-fit:contain;cursor:none;user-select:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.7));transition:opacity .35s,transform .35s}
.bug.fading{opacity:0;transform:scale(.65) rotate(12deg)}
.game-tip{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 18px;color:#d8c99d}
.result-card{max-width:620px;margin:70px auto;text-align:center}
#finalScore{font-size:46px;color:#f3d994;margin-bottom:12px}
#finalBreakdown{line-height:1.8;color:#ddd0ae}
#resultMessage{margin:20px 0;font-size:18px;color:#dcbf82}
@media(max-width:800px){.screen{padding:18px}.hud{grid-template-columns:1fr}.history{grid-column:1}.creature-showcase{top:360px;width:92vw}.net-preview{bottom:0}.game-top{grid-template-columns:1fr 1fr}.game-top .title-panel{grid-column:1/-1;grid-row:1}.capture-card{top:130px;right:12px}.tip{display:none}}

.move-arrow{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:25;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-width:330px;
  padding:8px 22px 6px;
  color:#f7df91;
  text-shadow:0 2px 5px #000,0 0 12px rgba(255,223,120,.55);
  pointer-events:none;
}
.move-arrow span{
  font-family:Arial,sans-serif;
  font-size:72px;
  line-height:.7;
  font-weight:300;
}
.move-arrow b{
  font-size:14px;
  letter-spacing:2px;
  color:#e7d49a;
}

.tip strong{
  color:#f2d88f;
  letter-spacing:.5px;
}

#net::after{content:"";}
.aim-dot{
  position:fixed;
  width:12px;height:12px;
  border:2px solid #f4df9c;
  border-radius:50%;
  transform:translate(-6px,-6px);
  pointer-events:none;
  z-index:21;
  box-shadow:0 0 8px rgba(255,225,140,.9);
}