/* =========================================================================
   CĂN HỘ 13 — giao diện
   Bảng màu: đêm xanh, giấy cũ, đèn vàng, gạch terracotta.
   ========================================================================= */

:root{
  --ink:#241d1a;
  --ink-soft:#4b3b33;
  --ink-mute:#816b5c;
  --paper:#fbf1df;
  --paper-2:#f4e4cc;
  --paper-hi:#fff9ed;
  --paper-line:#d8c1a2;
  --night:#0e171c;
  --night-2:#16242a;
  --night-3:#22343b;
  --cream:#f7ead4;
  --amber:#f4b860;
  --amber-hi:#ffd58a;
  --terracotta:#c96f4a;
  --terracotta-deep:#8f4a2f;
  --rose:#d98b8b;
  --sage:#8bb79b;
  --red:#c8564a;
  --green:#79b88c;
  --shadow-card:0 30px 80px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.35) inset;
  --display:"Lora",Georgia,"Times New Roman",serif;
  --body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
}

*{box-sizing:border-box;}
html,body{height:100%;height:100dvh;}
body{
  margin:0;
  background:var(--night);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;}
input{font-family:inherit;}
.hidden{display:none !important;}
.screen{min-height:100%;min-height:100dvh;}

/* ------------------------------- nền hành lang ------------------------------- */
.hall-bg{
  position:fixed;inset:0;z-index:0;
  background:#080d10;
  pointer-events:none;
}
.hall-bg svg{width:100%;height:100%;display:block;}

/* ---------------------------------- màn chủ --------------------------------- */
#screenHome{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;
  height:100%;height:100dvh;overflow-y:auto;
  padding:clamp(14px,2.6dvh,28px) clamp(16px,4vw,24px);
}
.home-wrap{width:min(520px,100%);margin:auto;}

.brand{text-align:center;color:var(--cream);margin:0 0 clamp(6px,1.4dvh,14px);position:relative;}
.brand-kicker{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:.28em;
  color:var(--amber);opacity:.9;padding:.28em .75em;border:1px solid rgba(244,184,96,.35);
  border-radius:2px;background:rgba(244,184,96,.06);
}
.logo{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,5.4dvh,64px);line-height:.95;letter-spacing:-.035em;
  margin:.1em 0 .05em;color:#fff6e6;
  text-shadow:0 4px 0 rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.55);
}
.logo em{font-style:normal;color:var(--amber);text-shadow:0 4px 0 rgba(0,0,0,.2), 0 0 44px rgba(244,184,96,.32);}
.tagline{
  margin:.1em 0 0;font-family:var(--hand);font-size:clamp(15px,2dvh,21px);
  color:#e9d8bf;opacity:.9;transform:rotate(-1deg);
}

.paper{
  position:relative;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.55),transparent 46%),
    radial-gradient(100% 90% at 100% 100%,rgba(201,111,74,.08),transparent 50%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(120,90,60,.035) 27px 28px),
    var(--paper);
  border:1px solid rgba(90,60,40,.28);
  border-radius:5px;
  box-shadow:var(--shadow-card);
  color:var(--ink);
}
.paper::after{
  content:"";position:absolute;inset:8px;border:1px dashed rgba(120,90,60,.2);
  border-radius:2px;pointer-events:none;
}
.paper > *{position:relative;z-index:1;}

.home-card{padding:clamp(14px,2.3dvh,26px) clamp(16px,3vw,28px);}
.paperclip{
  position:absolute;top:-14px;right:30px;width:18px;height:46px;
  border:3px solid #b8a48a;border-radius:12px;transform:rotate(9deg);
  box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25);
  z-index:2;
}
.paperclip::after{content:"";position:absolute;left:4px;right:4px;top:7px;bottom:7px;border:2px solid #b8a48a;border-radius:8px;}

.case-line{
  margin:0 0 clamp(6px,1.1dvh,12px);font-size:9px;font-weight:700;letter-spacing:.2em;
  color:#96745b;text-transform:uppercase;
}
.intro{
  margin:0 0 clamp(8px,1.4dvh,14px);font-size:clamp(11.5px,1.45dvh,13.5px);line-height:1.48;color:#4d3b31;
}
.intro b{color:var(--terracotta-deep);}

.field{display:flex;flex-direction:column;gap:4px;margin-bottom:clamp(8px,1.4dvh,13px);}
.field > span{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8b6a52;
}
.field input,.code-input{
  width:100%;padding:clamp(8px,1.1dvh,10px) 12px;border:1.5px solid #cdb493;border-radius:3px;
  background:var(--paper-hi);color:var(--ink);font-size:14px;font-weight:600;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.code-input::placeholder{color:#b39b82;font-weight:500;}
.field input:focus,.code-input:focus{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(201,111,74,.16);}

.room-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.room-tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:clamp(7px,1.1dvh,10px);border:1.5px solid #d6bea0;border-radius:4px;background:var(--paper-hi);
  cursor:pointer;text-align:left;color:var(--ink);position:relative;
  transition:border-color .15s,background .15s,transform .1s;
}
.room-tile:hover{border-color:#b9926d;transform:translateY(-1px);}
.room-tile.selected{border-color:var(--terracotta);background:#fff6e6;box-shadow:0 0 0 2px rgba(201,111,74,.14) inset;}
.room-tile.selected::after{
  content:"✓";position:absolute;top:7px;right:8px;width:17px;height:17px;
  display:grid;place-items:center;border-radius:50%;background:var(--terracotta);color:#fff;
  font-size:10px;font-weight:800;
}
.room-art{width:clamp(36px,4.8dvh,54px);height:clamp(28px,3.8dvh,42px);display:block;margin-bottom:2px;}
.room-art svg{width:100%;height:100%;display:block;}
.room-tile strong{font-family:var(--display);font-size:clamp(13.5px,1.8dvh,16px);line-height:1.1;}
.room-tile small{font-size:10px;line-height:1.25;color:#8b735f;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border:1.5px solid transparent;border-radius:3px;cursor:pointer;
  font-weight:700;font-size:13.5px;letter-spacing:.01em;
  padding:10px 16px;transition:transform .1s,box-shadow .1s,background .15s,color .15s;
}
.btn:focus-visible{outline:3px solid rgba(244,184,96,.9);outline-offset:2px;}
.btn-primary{
  background:linear-gradient(180deg,#d67e57,#c96f4a 55%,#b85f3c);
  color:#fff6e8;border-color:#8f4a2f;
  box-shadow:0 4px 0 #7d3d26,0 10px 22px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(80,30,15,.35);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 #7d3d26,0 14px 26px rgba(0,0,0,.32);}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #7d3d26;}
.btn-ghost{
  background:var(--paper-hi);color:#5b4436;border-color:#cdb493;
  box-shadow:0 2px 0 #d8c1a2;
}
.btn-ghost:hover{background:#fffdf7;border-color:#b9926d;transform:translateY(-1px);}
.btn-ghost:active{transform:translateY(1px);box-shadow:0 1px 0 #d8c1a2;}
.btn-small{padding:7px 12px;font-size:12px;}
.btn-create{width:100%;padding:clamp(9px,1.4dvh,12px) 16px;font-size:14.5px;margin-top:2px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important;}

.or{display:flex;align-items:center;gap:12px;margin:clamp(8px,1.3dvh,13px) 0 clamp(6px,1dvh,9px);color:#a38a73;font-size:9px;letter-spacing:.1em;text-transform:uppercase;}
.or::before,.or::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#d8c1a2,transparent);}
.join-row{display:flex;gap:8px;}
.code-input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.22em;font-weight:800;text-align:center;font-size:14.5px;}
.mini-note{margin:clamp(6px,1dvh,9px) 0 2px;font-size:10px;line-height:1.4;color:#8d725c;}
.mini-note.ok{color:#4f7a5c;}
.mini-note.bad{color:#a34b3c;}
.link-btn{
  display:block;width:100%;border:0;background:none;color:#8f5b41;text-align:center;
  font-size:11px;font-weight:600;text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:4px 0;line-height:1.4;
}
.link-btn:hover{color:var(--terracotta-deep);}
.link-btn.danger{color:#a34b3c;}
.footnote{margin:4px 0 0;text-align:center;font-size:9px;letter-spacing:.05em;color:#a0866f;}

/* --------------------------------- phòng chờ -------------------------------- */
#screenLobby{
  position:relative;z-index:2;height:100%;height:100dvh;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3dvh,36px) clamp(16px,4vw,24px);
}
.lobby-card{width:min(720px,100%);margin:auto;padding:clamp(18px,3dvh,34px) clamp(16px,3vw,34px);}
.lobby-head{text-align:center;max-width:520px;margin:0 auto clamp(12px,2dvh,20px);}
.lobby-head h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,3.2vw,34px);line-height:1.1;margin:.1em 0 .25em;}
.muted{color:#7a6251;font-size:12.5px;line-height:1.5;margin:0;}
.code-box{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:clamp(10px,1.8dvh,16px);border:1.5px dashed #c7ac8c;border-radius:4px;background:rgba(255,249,237,.65);
  margin:0 0 clamp(14px,2.2dvh,22px);
}
.code-label{font-size:8px;font-weight:800;letter-spacing:.18em;color:#96745b;white-space:nowrap;}
.code-display{
  font-family:var(--display);font-weight:600;font-size:clamp(28px,5vw,48px);
  letter-spacing:.2em;color:var(--terracotta-deep);line-height:1;
}
.code-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;}
.players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:clamp(14px,2.2dvh,22px);}
.player-card{
  border:1.5px solid #d6bea0;border-radius:4px;background:var(--paper-hi);
  padding:12px;display:flex;gap:10px;align-items:center;min-height:72px;position:relative;
}
.player-card.me{border-color:#b9926d;background:#fff7e8;}
.player-card.empty{border-style:dashed;background:transparent;color:#a38a73;}
.player-avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:#e8d3b6;border:1.5px solid #c7ac8c;
}
.player-avatar svg{width:28px;height:28px;}
.player-info{min-width:0;}
.player-info strong{display:block;font-family:var(--display);font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;}
.player-info small{display:block;font-size:10px;color:#8b735f;margin-top:2px;}
.player-tag{
  position:absolute;top:7px;right:7px;font-size:8px;font-weight:800;letter-spacing:.12em;
  color:#8f5b41;background:#f1dcc0;border-radius:2px;padding:2px 5px;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#b8a48a;display:inline-block;margin-right:5px;}
.status-dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(121,184,140,.16);}
.status-dot.off{background:#b06a5c;}
.lobby-actions{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
.lobby-actions .btn{min-width:190px;}
.waiting{font-size:12px;color:#8b735f;margin:4px 0;}
.lobby-card .footnote{margin-top:12px;}

/* ---------------------------------- game ----------------------------------- */
#screenGame{position:fixed;inset:0;height:100dvh;z-index:3;background:#080d10;color:var(--cream);overflow:hidden;}
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:8;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(10px,env(safe-area-inset-top)) clamp(14px,2.2vw,28px) 10px;
  background:linear-gradient(180deg,rgba(8,13,16,.94) 0%,rgba(8,13,16,.7) 62%,rgba(8,13,16,0) 100%);
}
.tb-left,.tb-center,.tb-right{display:flex;align-items:center;gap:10px;min-width:0;}
.tb-center{position:absolute;left:50%;transform:translateX(-50%);flex-direction:column;gap:2px;align-items:center;pointer-events:none;}
.room-badge{display:flex;align-items:center;gap:9px;min-width:0;}
.room-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(244,184,96,.12);border:1px solid rgba(244,184,96,.28);}
.room-icon svg{width:23px;height:23px;}
.room-text{display:flex;flex-direction:column;line-height:1.1;}
.room-text small{font-size:8px;letter-spacing:.18em;color:#a9947e;font-weight:700;}
.room-text strong{font-family:var(--display);font-size:16px;font-weight:600;color:var(--cream);white-space:nowrap;}
.objective{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.04em;color:#e7d6bd;background:rgba(10,17,21,.65);border:1px solid rgba(247,234,212,.12);padding:4px 10px;border-radius:20px;backdrop-filter:blur(6px);}
.obj-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(244,184,96,.16);}
.timer{font-size:10px;letter-spacing:.16em;color:#a9947e;font-variant-numeric:tabular-nums;}

.icon-btn{
  width:38px;height:38px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid rgba(247,234,212,.16);border-radius:5px;background:rgba(10,17,21,.55);
  color:#e7d6bd;cursor:pointer;position:relative;backdrop-filter:blur(6px);
  transition:background .15s,border-color .15s,transform .1s;
}
.icon-btn:hover{background:rgba(244,184,96,.14);border-color:rgba(244,184,96,.4);color:var(--amber-hi);}
.icon-btn:active{transform:translateY(1px);}
.icon-btn svg{width:18px;height:18px;display:block;}
.icon-btn.wide{width:auto;padding:0 10px;font-size:10px;font-weight:700;letter-spacing:.04em;}
.icon-btn[disabled]{opacity:.35;cursor:not-allowed;}
.icon-btn.off{opacity:.45;}
.badge{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:10px;background:var(--amber);color:#2a1c12;
  font-size:9px;font-style:normal;font-weight:800;line-height:1;border:1.5px solid #0c1216;
}
.badge.hidden{display:none !important;}
.partner{display:flex;align-items:center;gap:7px;padding:4px 10px;border-radius:5px;background:rgba(10,17,21,.45);border:1px solid rgba(247,234,212,.1);}
.online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(121,184,140,.15);flex:0 0 auto;}
.online-dot.off{background:#b06a5c;box-shadow:0 0 0 3px rgba(176,106,92,.15);}
.partner div{display:flex;flex-direction:column;line-height:1.1;}
.partner strong{font-size:10.5px;color:#e7d6bd;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.partner small{font-size:8.5px;color:#a9947e;}

#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(120% 100% at 50% 40%,#1a2a30 0%,#0b1216 70%);}
#scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
#scene > svg{width:100%;height:100%;display:block;}
#scene svg text{user-select:none;}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(2,5,7,.55) 100%);}
.hover-label{
  position:absolute;z-index:12;pointer-events:none;
  background:rgba(8,13,16,.92);border:1px solid rgba(244,184,96,.35);color:var(--amber-hi);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:5px 9px;border-radius:3px;
  transform:translate(-50%,-140%);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.toasts{
  position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:70;
  display:flex;flex-direction:column;gap:7px;pointer-events:none;width:min(440px,90vw);
}
.toast{
  align-self:center;background:rgba(9,15,19,.96);color:#f2e3cb;border-left:3px solid var(--amber);
  border-radius:3px;padding:9px 14px;font-size:12px;line-height:1.45;
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:toastIn .24s ease both;
  max-width:100%;
}
.toast.warn{border-left-color:var(--red);}
.toast.good{border-left-color:var(--green);}
.toast.out{animation:toastOut .3s ease both;}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}

#bottomBar{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:14px clamp(14px,2.2vw,28px) max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(6,10,13,.96) 0%,rgba(6,10,13,.72) 58%,rgba(6,10,13,0) 100%);
}
.inv-wrap{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.inv-label{font-size:8.5px;font-weight:800;letter-spacing:.2em;color:#a9947e;writing-mode:vertical-rl;transform:rotate(180deg);height:54px;display:flex;align-items:center;}
.inventory{display:flex;gap:8px;}
.inv-slot{
  width:66px;height:60px;border:1.5px dashed rgba(247,234,212,.2);border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#a9947e;background:rgba(10,17,21,.35);transition:border-color .15s,background .15s;
}
.inv-slot.filled{border-style:solid;border-color:rgba(244,184,96,.38);background:rgba(244,184,96,.08);color:var(--cream);}
.inv-slot svg{width:27px;height:27px;display:block;}
.inv-slot span{font-size:8.5px;line-height:1.1;text-align:center;max-width:60px;font-weight:600;}
.inv-slot.empty span{font-size:8px;letter-spacing:.06em;color:#6f5e50;}
.bottom-actions{display:flex;gap:8px;}
#bottomBar .btn-ghost{background:rgba(10,17,21,.6);color:#e7d6bd;border-color:rgba(247,234,212,.18);box-shadow:none;backdrop-filter:blur(6px);}
#bottomBar .btn-ghost:hover{background:rgba(244,184,96,.12);border-color:rgba(244,184,96,.4);}

/* ---------------------------------- sổ tay ---------------------------------- */
.drawer{
  position:absolute;top:0;right:0;bottom:0;z-index:18;width:min(390px,92vw);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.5),transparent 50%),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(120,90,60,.04) 27px 28px),
    var(--paper);
  color:var(--ink);box-shadow:-24px 0 60px rgba(0,0,0,.5);
  padding:22px 22px 18px;display:flex;flex-direction:column;
  animation:drawerIn .24s ease both;
}
@keyframes drawerIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #d8c1a2;padding-bottom:12px;margin-bottom:14px;}
.drawer header h3{font-family:var(--display);font-size:26px;margin:.05em 0 0;font-weight:600;}
.drawer-kicker{font-size:8.5px;letter-spacing:.2em;font-weight:800;color:#96745b;}
.drawer header .icon-btn{color:#5b4436;background:var(--paper-hi);border-color:#cdb493;backdrop-filter:none;font-size:18px;}
.notebook-body{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;}
.note-item{border-bottom:1px dashed #d8c1a2;padding-bottom:10px;}
.note-item:last-child{border-bottom:0;}
.note-item .n-tag{font-size:8px;font-weight:800;letter-spacing:.16em;color:#a38a73;text-transform:uppercase;}
.note-item .n-text{font-family:var(--display);font-size:15px;line-height:1.45;margin-top:2px;color:#3c2d25;}
.note-item .n-sub{font-size:10.5px;color:#8b735f;margin-top:3px;line-height:1.4;}
.note-item.done .n-text{color:#6b8a72;text-decoration:line-through;text-decoration-color:rgba(107,138,114,.5);}
.drawer-hint{font-size:10px;line-height:1.5;color:#a0866f;border-top:1px solid #d8c1a2;padding-top:12px;margin:12px 0 0;font-style:italic;}

/* ---------------------------------- modal ---------------------------------- */
.modal-overlay{
  position:fixed;inset:0;z-index:40;background:rgba(3,7,9,.78);
  backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;
  padding:18px;animation:fadeIn .18s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(720px,100%);max-height:min(90vh,760px);overflow:auto;background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.5),transparent 46%),
    var(--paper);
  color:var(--ink);border:1px solid rgba(90,60,40,.35);border-radius:5px;
  box-shadow:0 40px 100px rgba(0,0,0,.65);position:relative;
  padding:clamp(20px,3.2vw,34px);animation:modalIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border:1px solid #cdb493;
  background:var(--paper-hi);color:#5b4436;border-radius:3px;cursor:pointer;font-size:17px;line-height:1;
}
.modal-close:hover{background:#fff;}
.modal h2{font-family:var(--display);font-size:clamp(24px,3vw,32px);line-height:1.15;margin:.12em 0 .35em;font-weight:600;}
.modal-kicker{font-size:8.5px;font-weight:800;letter-spacing:.2em;color:#96745b;text-transform:uppercase;}
.modal-art{
  height:170px;margin:4px 0 16px;border:1px solid #d8c1a2;border-radius:3px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#2c4148,#152127 80%);
  display:flex;align-items:center;justify-content:center;
}
.modal-art svg{width:100%;height:100%;display:block;}
.modal-body{font-size:13.5px;line-height:1.7;color:#4b3b33;}
.modal-body p{margin:0 0 10px;}
.modal-body .flavor{font-style:italic;color:#7a6251;}
.modal-body .strong{font-weight:700;color:var(--terracotta-deep);}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.modal-actions .btn{flex:1 1 150px;}
.modal-tip{font-size:10.5px;color:#8b735f;font-style:italic;margin-top:12px;line-height:1.5;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px;}
.modal-col h4{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#96745b;margin:0 0 8px;}
.item-row{display:flex;align-items:center;gap:9px;border:1px solid #d8c1a2;border-radius:3px;padding:8px;margin-bottom:7px;background:var(--paper-hi);}
.item-row svg{width:30px;height:30px;flex:0 0 auto;}
.item-row .ir-name{font-size:12px;font-weight:700;line-height:1.2;}
.item-row .ir-sub{font-size:9.5px;color:#8b735f;}
.item-row .btn{margin-left:auto;padding:5px 9px;font-size:10px;box-shadow:none;}
.empty-line{font-size:11px;color:#a0866f;font-style:italic;line-height:1.5;border:1px dashed #d8c1a2;border-radius:3px;padding:12px;text-align:center;}
.status-list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:6px;}
.status-list li{display:flex;align-items:center;gap:10px;border:1px solid #e0cdb3;background:var(--paper-hi);padding:8px 10px;border-radius:3px;}
.status-list .s-dot{width:9px;height:9px;border-radius:50%;background:#c8564a;flex:0 0 auto;box-shadow:0 0 0 3px rgba(200,86,74,.12);}
.status-list li.ok .s-dot{background:var(--green);box-shadow:0 0 0 3px rgba(121,184,140,.14);}
.status-list strong{display:block;font-size:12px;line-height:1.2;}
.status-list small{display:block;font-size:10px;color:#8b735f;line-height:1.4;margin-top:1px;}

/* keypad */
.keypad{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:4px;}
.keypad-display{display:flex;gap:8px;}
.keypad-display span{
  width:46px;height:56px;display:grid;place-items:center;border:1.5px solid #b9926d;
  border-radius:3px;background:var(--paper-hi);font-family:var(--display);font-size:26px;color:var(--terracotta-deep);
}
.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(240px,100%);}
.keypad-grid button{
  height:44px;border:1px solid #c7ac8c;border-radius:3px;background:var(--paper-hi);
  font-size:17px;font-weight:700;color:#4b3b33;cursor:pointer;
}
.keypad-grid button:hover{background:#fff;border-color:#a37e58;}
.keypad-grid button.wide{grid-column:span 1;font-size:11px;letter-spacing:.1em;}
.keypad.deny{animation:shake .32s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* breaker */
.breaker-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px;}
.breaker-unit{
  width:min(280px,100%);border:1.5px solid #b9926d;border-radius:4px;background:#e9d8c2;
  padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.breaker-light{width:10px;height:10px;border-radius:50%;background:#7f3f33;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);transition:background .15s,box-shadow .15s;}
.breaker-light.on{background:#8fe0a4;box-shadow:0 0 14px rgba(143,224,164,.8),inset 0 0 0 2px rgba(0,0,0,.12);}
.breaker-lever{
  width:84px;height:120px;border:1.5px solid #8f6a4a;border-radius:38px;background:#d8c1a2;
  position:relative;cursor:pointer;user-select:none;touch-action:none;
}
.breaker-lever .knob{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,#d67e57,#a85334);
  border:2px solid #7d3d26;box-shadow:0 4px 0 #6d3220;
  transition:bottom .12s ease,box-shadow .12s;
}
.breaker-lever.on .knob{bottom:58px;box-shadow:0 4px 0 #6d3220,0 0 22px rgba(244,184,96,.55);}
.breaker-hint{font-size:10.5px;color:#7a6251;text-align:center;line-height:1.5;}

/* win */
.win-overlay{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:18px;background:radial-gradient(120% 100% at 50% 0%,rgba(36,55,60,.75),rgba(3,7,9,.94) 70%);
  backdrop-filter:blur(6px);animation:fadeIn .3s ease both;overflow:auto;
}
.win-card{
  position:relative;width:min(600px,100%);background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.5),transparent 46%),
    var(--paper);
  border:1px solid rgba(90,60,40,.35);border-radius:5px;padding:clamp(22px,3.6vw,40px);
  text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:hidden;
  animation:modalIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.win-glow{position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:340px;height:260px;background:radial-gradient(circle,rgba(244,184,96,.5),transparent 70%);pointer-events:none;}
.win-art{width:min(320px,90%);height:auto;margin:0 auto 6px;display:block;position:relative;}
.win-card .kicker{font-size:8.5px;font-weight:800;letter-spacing:.24em;color:#96745b;margin:0;}
.win-card h2{font-family:var(--display);font-size:clamp(34px,5vw,46px);margin:.08em 0 .2em;color:var(--terracotta-deep);font-weight:600;}
.win-line{font-family:var(--display);font-size:14px;line-height:1.6;color:#4b3b33;margin:0 auto 16px;max-width:420px;}
.win-stats{display:flex;justify-content:center;gap:10px;margin:0 0 12px;}
.win-stats > div{border:1px solid #d8c1a2;border-radius:3px;background:var(--paper-hi);padding:8px 18px;min-width:110px;}
.win-stats span{display:block;font-family:var(--display);font-size:24px;line-height:1;color:#3c2d25;}
.win-stats small{display:block;font-size:7.5px;letter-spacing:.14em;color:#96745b;margin-top:4px;font-weight:800;}
.win-rank{display:inline-block;font-size:10.5px;font-weight:700;color:#7a5a2e;background:#f5dfae;border:1px solid #d9b96e;border-radius:2px;padding:5px 10px;margin:0 0 16px;}
.win-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.win-actions .btn{min-width:150px;}
.tiny{font-size:9.5px;color:#a0866f;margin:10px 0 0;line-height:1.5;}

/* ---------------------------------- khác ----------------------------------- */
.error-banner{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:99;
  background:#3a1414;color:#ffd9d3;border:1px solid #c8564a;border-radius:4px;
  padding:10px 14px;font:600 12px/1.5 var(--body);white-space:pre-wrap;max-height:38%;overflow:auto;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ------------------------------ hotspots / SVG ------------------------------ */
.hotspot{cursor:pointer;}
.hotspot .hit{fill:transparent;stroke:transparent;stroke-width:2.5;transition:stroke .15s,fill .15s;}
.hotspot:hover .hit,.hotspot:focus-visible .hit{stroke:rgba(255,213,138,.9);fill:rgba(255,213,138,.055);}
.hotspot:focus{outline:none;}
.hotspot.ready .hit{stroke:rgba(255,213,138,.75);animation:readyPulse 1.6s ease-in-out infinite;}
@keyframes readyPulse{0%,100%{stroke-opacity:.3}50%{stroke-opacity:1}}
.hotspot.ready{filter:drop-shadow(0 0 6px rgba(255,213,138,.35));}

/* tv / steam / cat / đèn */
.tv-static{animation:tvFlicker 2.4s steps(2) infinite;}
@keyframes tvFlicker{0%,100%{opacity:.18}50%{opacity:.34}}
.steam path{animation:steamRise 3.4s ease-in-out infinite;transform-origin:center;opacity:.5;}
.steam path:nth-child(2){animation-delay:.9s;}
.steam path:nth-child(3){animation-delay:1.8s;}
@keyframes steamRise{0%{transform:translateY(6px);opacity:0}35%{opacity:.55}100%{transform:translateY(-18px);opacity:0}}
.cat-tail{transform-origin:70% 80%;animation:tailSway 3s ease-in-out infinite;}
@keyframes tailSway{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
.lamp-glow{animation:lampFlicker 5s ease-in-out infinite;}
@keyframes lampFlicker{0%,100%{opacity:.55}48%{opacity:.62}52%{opacity:.5}}
.dust circle{animation:dustFloat 8s linear infinite;}
.dust circle:nth-child(2){animation-delay:2s;}
.dust circle:nth-child(3){animation-delay:4s;}
.dust circle:nth-child(4){animation-delay:6s;}
@keyframes dustFloat{0%{transform:translate(0,0);opacity:0}20%{opacity:.5}80%{opacity:.3}100%{transform:translate(14px,-30px);opacity:0}}
.door-light{transition:fill .2s,filter .2s;}
.door-light.red{fill:#c8564a;filter:drop-shadow(0 0 5px rgba(200,86,74,.8));}
.door-light.amber{fill:#f4b860;filter:drop-shadow(0 0 6px rgba(244,184,96,.8));}
.door-light.green{fill:#8fe0a4;filter:drop-shadow(0 0 8px rgba(143,224,164,.9));}

.inv-slot.filled{cursor:pointer;}
.inv-slot.filled:hover{transform:translateY(-2px);border-color:var(--amber);box-shadow:0 4px 14px rgba(244,184,96,.35);}
.toast.radio{border-color:var(--amber);background:rgba(24,18,15,.94);color:#fff1dc;box-shadow:0 8px 30px rgba(0,0,0,.65), 0 0 16px rgba(244,184,96,.3);}
.toast.radio strong{color:var(--amber);margin-right:6px;}

/* Bộ đàm modal */
.radio-box{display:flex;flex-direction:column;gap:12px;margin:10px 0;}
.radio-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.radio-btn{
  padding:10px 12px;font-size:12px;font-weight:600;text-align:left;
  border-radius:4px;border:1px solid rgba(120,90,60,.3);background:rgba(255,255,255,.65);
  color:var(--ink);cursor:pointer;transition:all .15s ease;
}
.radio-btn:hover{background:#fff;border-color:var(--terracotta);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.radio-custom-row{display:flex;gap:8px;}
.radio-input{
  flex:1;padding:8px 12px;border:1px solid rgba(90,60,40,.3);border-radius:4px;
  background:#fff;font-size:13px;color:var(--ink);
}
.radio-input:focus{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 2px rgba(201,111,74,.2);}

/* Interactive Puzzle Panels: Đồng hồ, Radio FM, Két sắt */
.puzzle-panel{
  background:rgba(255,249,237,.65);border:1.5px dashed #c7ac8c;border-radius:6px;
  padding:14px;margin:12px 0;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.clock-readout{
  font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:.12em;
  color:var(--terracotta-deep);background:#fff;padding:6px 18px;border-radius:4px;
  border:1px solid #d8c1a2;box-shadow:inset 0 2px 5px rgba(0,0,0,.06);
}
.clock-readout.danger{color:var(--red);border-color:rgba(200,86,74,.5);background:#fff4f3;}
.clock-readout.ok{color:#2e6f40;border-color:rgba(121,184,140,.6);background:#f3fbf5;}
.clock-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.fm-readout{
  font-family:var(--display);font-size:28px;font-weight:700;color:#274046;
  background:#e9f4f2;padding:6px 16px;border-radius:4px;border:1.5px solid #8bb79b;
  letter-spacing:.08em;
}
.fm-slider{width:100%;accent-color:var(--terracotta);cursor:pointer;}
.fm-msg{
  font-size:12px;padding:10px 12px;border-radius:4px;background:#fff;border:1px solid #d8c1a2;
  color:var(--ink-soft);width:100%;text-align:center;min-height:42px;display:flex;align-items:center;justify-content:center;
}
.fm-msg.tuned{background:#eef8f0;border-color:#79b88c;color:#214a2c;font-weight:600;}
.safe-dials{display:flex;gap:12px;justify-content:center;align-items:center;}
.safe-dial{display:flex;flex-direction:column;align-items:center;gap:4px;}
.safe-dial-val{
  font-family:var(--display);font-size:28px;font-weight:700;width:46px;height:52px;
  display:flex;align-items:center;justify-content:center;background:#14262b;color:#f4b860;
  border-radius:4px;border:2px solid #3d5c5a;
}
.safe-step-btn{
  width:46px;height:26px;border-radius:3px;border:1px solid #8a6a4f;background:#f4e4cc;
  color:var(--ink);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.safe-step-btn:hover{background:#fff;border-color:var(--terracotta);}
.inventory{overflow-x:auto;scrollbar-width:none;}
.inventory::-webkit-scrollbar{display:none;}
.inv-slot{flex:0 0 auto;}

@media (max-width:1100px){
  .tb-center{position:static;transform:none;flex-direction:row;gap:8px;margin-left:auto;}
  .objective{display:none;}
  .partner div{display:none;}
  .partner{padding:7px;}
  .inv-slot{width:58px;height:54px;}
}
@media (max-width:760px){
  #topbar{gap:5px;padding:max(8px,env(safe-area-inset-top)) 10px 8px;}
  .tb-left,.tb-right{gap:5px;}
  .room-text small{display:none;}
  .room-text strong{font-size:12.5px;}
  .room-icon{width:26px;height:26px;}
  .icon-btn{width:32px;height:32px;}
  .icon-btn.wide span{display:none;}
  .icon-btn.wide{padding:0 7px;}
  .timer{font-size:9px;}
  .players{grid-template-columns:1fr;gap:8px;margin-bottom:14px;}
  .player-card{padding:10px;min-height:62px;}
  .code-box{gap:8px;padding:12px;flex-wrap:wrap;margin-bottom:14px;}
  .code-label{transform:none;}
  .code-display{font-size:30px;letter-spacing:.16em;}
  #bottomBar{padding:10px 12px max(12px,env(safe-area-inset-bottom));gap:8px;}
  .inv-label{display:none;}
  .inv-slot{width:52px;height:50px;}
  .bottom-actions .btn{padding:6px 10px;font-size:10.5px;}
  #btnRadio2,#btnHatch2{display:none;}
  .toasts{top:56px;}
  .modal-grid{grid-template-columns:1fr;}
  .radio-presets{grid-template-columns:1fr;}
  .win-stats{gap:6px;}
  .win-stats > div{min-width:92px;padding:7px 10px;}
}
@media (max-width:400px){
  .partner{display:none;}
  .timer{display:none;}
  .room-tile small{display:none;}
}
@media (max-height:680px){
  .brand{margin-bottom:6px;}
  .logo{font-size:clamp(32px,5dvh,46px);}
  .tagline{font-size:14.5px;}
  .intro{font-size:11.5px;line-height:1.4;margin-bottom:8px;}
  .home-card{padding:14px 16px;}
  .paperclip{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}