*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#1e1518;
  --wall:#2a1c1f;
  --card-bg:#fff;
  --black:#222;
  --red:#d44;
  --dark:#333;
  --cork:#a08060;
}
body{
  background:var(--bg);
  font-family:'Nunito',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  color:#eee;
}

/* ══════ LANGUAGE SETTINGS ══════ */
.lang-settings{
  position:fixed;top:12px;right:12px;z-index:200;
}
.lang-btn{
  width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.15);
  background:rgba(0,0,0,0.3);cursor:pointer;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;backdrop-filter:blur(4px);
}
.lang-btn:hover{background:rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.3)}
.lang-dropdown{
  display:none;position:absolute;top:48px;right:0;
  background:#fff;border-radius:10px;padding:6px;min-width:160px;
  box-shadow:0 8px 30px rgba(0,0,0,0.2);
}
.lang-dropdown.show{display:block}
.lang-option{
  display:block;width:100%;text-align:left;padding:8px 14px;
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;
  border:none;background:none;cursor:pointer;border-radius:6px;
  color:#333;transition:background 0.1s;
}
.lang-option:hover{background:#f0f0f0}
.lang-option.active{background:#eef4fb;color:#2a6;font-weight:800}

/* ══════ TITLE ══════ */
#title-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:30px;text-align:center;
  overflow-x:hidden;word-break:break-word;
  background:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(255,210,140,0.18) 0%, transparent 100%),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0,0,0,0.06) 60px, rgba(0,0,0,0.06) 62px),
    linear-gradient(180deg, #2a1c1f 0%, #1a1015 100%);
}
#title-screen h1{
  font-family:'Playfair Display',serif;font-size:clamp(48px,10vw,80px);
  color:#f0e0c0;letter-spacing:6px;margin-bottom:4px;
  text-shadow:3px 3px 0 rgba(0,0,0,0.3);
}
.title-logo{
  width:clamp(200px,85vw,520px);margin-bottom:8px;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}
.logo-svg{width:100%;height:auto}
#title-screen .subtitle{
  font-family:'Caveat',cursive;font-size:clamp(18px,3vw,26px);
  color:#f4c87a;margin-bottom:50px;letter-spacing:2px;
}
.diff-section{margin-bottom:30px}
.diff-section h2{
  font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:4px;
  text-transform:uppercase;margin-bottom:20px;font-weight:600;
}
.diff-cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.diff-card{
  background:#fff;border-radius:12px;padding:24px 32px;cursor:pointer;
  transition:all 0.25s;border:3px solid transparent;text-align:center;
  min-width:120px;max-width:200px;flex:1;
}
.diff-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.3)}
.diff-card.c1{border-color:#8ec6a5}
.diff-card.c1:hover{background:#f0faf4}
.diff-card.c2{border-color:#f4c87a}
.diff-card.c2:hover{background:#fffcf0}
.diff-card.c3{border-color:#d44}
.diff-card.c3:hover{background:#fff5f5}
.diff-card.c4{border-color:#a855f7}
.diff-card.c4:hover{background:#faf5ff}
.diff-card.c5{border-color:#333}
.diff-card.c5:hover{background:#f5f5f5}
.diff-card .diff-icon{font-size:32px;margin-bottom:8px}
.diff-card .diff-name{
  font-family:'Playfair Display',serif;font-size:18px;
  color:var(--black);font-weight:700;white-space:nowrap;
}
.diff-card .diff-desc{font-size:12px;color:#888;margin-top:6px;white-space:nowrap}
.how-to{
  color:rgba(255,255,255,0.4);font-size:11px;line-height:2;margin-top:30px;
  max-width:420px;
}

/* ══════ GAME ══════ */
#game-screen{
  display:none;padding:16px;max-width:1400px;margin:0 auto;
  min-height:100vh;
  background:
    radial-gradient(ellipse 70% 35% at 40% -2%, rgba(255,210,140,0.12) 0%, transparent 100%),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(0,0,0,0.04) 80px, rgba(0,0,0,0.04) 82px),
    linear-gradient(180deg, var(--wall) 0%, var(--bg) 100%);
}
.game-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;
}
.game-top h1{
  font-family:'Playfair Display',serif;font-size:28px;color:#f0e8dc;
  text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
.game-logo{
  width:clamp(100px,25vw,160px);height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.case-label{
  font-family:'Caveat',cursive;font-size:18px;color:#c8b8a0;opacity:0.8;
  margin-left:12px;
}
.game-timer{
  font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;
  color:#f0e8dc;background:rgba(0,0,0,0.35);border-radius:20px;padding:6px 18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);
}
.top-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn{
  font-family:'Nunito',sans-serif;font-weight:700;font-size:11px;
  padding:8px 12px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);color:#ddd;cursor:pointer;transition:all 0.15s;
  backdrop-filter:blur(2px);
}
.btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);transform:translateY(-1px)}
.btn-danger{border-color:rgba(200,60,60,0.5);color:#e88}
.btn-danger:hover{background:rgba(200,60,60,0.15)}
.btn.eraser-active{
  background:rgba(200,60,60,0.2);border-color:#d44;color:#f88;
}
.btn.xmark-active{
  background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);color:#fff;
}

.game-body{
  display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;
}
@media(max-width:860px){.game-body{grid-template-columns:1fr}}

/* ── Phones ── */
@media(max-width:480px){
  #title-screen{padding:20px 12px}
  .title-logo{width:clamp(180px,85vw,400px)}
  .diff-cards{gap:8px;flex-direction:column;align-items:center}
  .diff-card{padding:12px 20px;min-width:0;max-width:260px;width:100%;
    display:flex;align-items:center;gap:12px;text-align:left}
  .diff-card .diff-icon{font-size:24px;margin-bottom:0;flex-shrink:0}
  .diff-card .diff-name{font-size:14px}
  .diff-card .diff-desc{font-size:9px}
  .how-to{font-size:10px;max-width:100%}
  #game-screen{padding:8px}
  .game-top{gap:4px;justify-content:center}
  .game-top>*{width:100%;text-align:center}
  .game-top>div:first-child{display:flex;align-items:center;justify-content:center;gap:6px}
  .game-timer{font-size:13px;padding:4px 12px;display:inline-block}
  .top-btns{justify-content:center}
  .game-logo{width:clamp(80px,22vw,120px)}
  .case-label{font-size:12px;margin-left:4px}
  .top-btns{gap:4px}
  .btn{font-size:10px;padding:8px 8px}
  .map-wrap{padding:8px}
  .panel{padding:10px}
  .panel-head{font-size:12px;word-break:break-word}
  .sus-clue{font-size:10px}
  .accuse-panel p{font-size:10px;line-height:1.5}
  .room-badge{font-size:clamp(3px,1vw,5px);padding:0 2px}
  .cell-notes{font-size:clamp(8px,2.5vw,14px)}
  #compass svg{width:30px;height:30px}
  .modal-box{padding:20px;max-width:100%}
  .modal-box h2{font-size:20px}
  .modal-box .reveal-name{font-size:26px}
  .modal-btns{flex-wrap:wrap}
  .lang-dropdown{min-width:140px}
  .sticky{transform:none}
  .sticky p{font-size:13px}
}

/* ── Very small phones ── */
@media(max-width:360px){
  .title-logo{width:clamp(160px,90vw,300px)}
  .diff-card{padding:10px 16px}
  .diff-card .diff-name{font-size:12px}
  .diff-card .diff-icon{font-size:20px}
  .game-logo{width:clamp(70px,20vw,100px)}
  .case-label{font-size:11px}
  .btn{font-size:9px;padding:7px 6px}
  .game-timer{font-size:12px;padding:3px 10px}
  #compass svg{width:24px;height:24px}
  .room-badge{font-size:3px}
}

/* ══════ MAP ══════ */
.map-wrap{
  background:#b8956c;
  border-radius:6px;padding:16px;
  box-shadow:0 6px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
  border:4px solid #6b4a2a;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:6px 6px, 8px 8px;
  background-position:0 0, 3px 3px;
}
#compass{
  position:absolute;top:8px;right:8px;z-index:10;
  opacity:0.85;pointer-events:none;
  filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.15));
}
.scene-name{
  font-family:'Caveat',cursive;font-size:22px;color:#3a2a18;
  text-align:center;margin-bottom:12px;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
}
#map-grid{
  display:grid;gap:0;margin:0 auto;
  border:4px solid var(--black);border-radius:4px;overflow:hidden;
  position:relative;background:#fff;
}
.cell{
  position:relative;cursor:pointer;transition:all 0.12s;
  display:flex;align-items:center;justify-content:center;
  min-width:0;aspect-ratio:1;overflow:visible;
}
.cell:hover{filter:brightness(1.1);z-index:2}
.cell.highlight{outline:3px solid #f4c87a;outline-offset:-3px;z-index:3}
/* Thick room borders */
.cell.bt{border-top:3.5px solid var(--black)!important}
.cell.bb{border-bottom:3.5px solid var(--black)!important}
.cell.bl{border-left:3.5px solid var(--black)!important}
.cell.br{border-right:3.5px solid var(--black)!important}
/* Subtle inner grid */
.cell{border:0.5px solid rgba(0,0,0,0.08)}

/* ── Floor tile textures ── */
.cell.floor-wood{
  background-image:repeating-linear-gradient(
    90deg,transparent,transparent 40%,
    rgba(120,80,30,0.07) 40%,rgba(120,80,30,0.07) 42%,
    transparent 42%,transparent 100%
  );
}
.cell.floor-tile{
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.06) 1px,transparent 1px);
  background-size:10px 10px;
}
.cell.floor-grass{
  background-image:
    radial-gradient(circle,rgba(30,100,20,0.12) 1px,transparent 1px),
    radial-gradient(circle,rgba(50,120,30,0.08) 1px,transparent 1px);
  background-size:7px 7px,5px 5px;
  background-position:0 0,3px 3px;
}
.cell.floor-stone{
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(0,0,0,0.06) 1.5px,transparent 1.5px);
  background-size:18px 18px;
}
.cell.floor-carpet{
  background-image:
    radial-gradient(circle,rgba(80,40,80,0.06) 0.5px,transparent 0.5px);
  background-size:4px 4px;
}
.cell.floor-concrete{
  background-image:
    radial-gradient(circle,rgba(0,0,0,0.03) 1px,transparent 1px);
  background-size:8px 8px;
}

/* Non-standable furniture overlay */
.cell.non-standable{cursor:not-allowed}
.cell.non-standable::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,0.04) 4px,rgba(0,0,0,0.04) 5px);
  pointer-events:none;z-index:2;
}

/* Room label badge */
.room-badge{
  position:absolute;bottom:1px;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,0.75);color:var(--black);
  font-size:clamp(4px,1.2vw,7px);font-weight:800;
  padding:0px 3px;border-radius:2px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:0.3px;z-index:4;
  border:1px solid rgba(0,0,0,0.3);pointer-events:none;
  max-width:95%;overflow:hidden;text-overflow:ellipsis;
}

/* Furniture SVG */
.cell .furn{
  position:absolute;width:72%;height:72%;
  pointer-events:none;z-index:1;
  filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.15));
}

/* ── X marks (blocked and manual — same style) ── */
.cell .block-x,
.cell .manual-x{
  position:absolute;z-index:3;pointer-events:none;
  width:44%;height:44%;opacity:0.6;
}

/* ── Placed character (portrait + initial) ── */
.cell .avatar{
  width:70%;height:70%;position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.15s;
}
.cell .avatar:hover{transform:scale(1.12)}
.cell .avatar svg{width:100%;height:100%}
.cell .avatar .av-letter{
  position:absolute;bottom:0;right:0;
  font-family:'Playfair Display',serif;font-size:clamp(8px,1.4vw,12px);
  color:#fff;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.45);border-radius:50%;
  width:clamp(14px,2vw,20px);height:clamp(14px,2vw,20px);
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}

/* Victim marker (portrait + initial) */
.cell .victim-marker{
  width:70%;height:70%;position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  border:2px dashed #d44;border-radius:6px;
  background:rgba(200,50,50,0.12);
}
.cell .victim-marker svg{width:100%;height:100%}
.cell .victim-marker .av-letter{
  position:absolute;bottom:0;right:0;
  font-family:'Playfair Display',serif;font-size:clamp(8px,1.4vw,12px);
  color:#fff;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,0.6);
  background:rgba(200,50,50,0.7);border-radius:50%;
  width:clamp(14px,2vw,20px);height:clamp(14px,2vw,20px);
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.cell .victim-x{
  position:absolute;width:44%;height:44%;z-index:6;pointer-events:none;
}

/* Notes in cell corner */
.cell .cell-notes{
  position:absolute;bottom:1px;right:2px;z-index:4;
  font-family:'Nunito',sans-serif;font-size:clamp(8px,2.5vw,14px);font-weight:900;
  color:#000;line-height:1.1;text-align:right;
  pointer-events:none;max-width:60%;word-break:break-all;
}

/* ══════ SIDEBAR ══════ */
.sidebar{display:flex;flex-direction:column;gap:16px}
#susList{max-height:60vh;overflow-y:auto}

.panel{
  background:#f5f0e8;border-radius:4px;padding:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), 1px 2px 4px rgba(0,0,0,0.2);
  border:1px solid #d0c4b0;
  position:relative;
}
.panel::before{
  content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle, #e44 30%, #b22 70%);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);z-index:1;
}
.panel-head{
  font-family:'Playfair Display',serif;font-size:14px;color:#3a2a18;
  margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #d4c8b4;
}

/* Polaroid suspect card */
.sus-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 10px;margin-bottom:6px;border-radius:10px;
  cursor:pointer;transition:all 0.15s;border:2.5px solid transparent;
  position:relative;min-height:44px;
}
.sus-card.gender-m{background:#eef4fb}
.sus-card.gender-f{background:#fbeff4}
.sus-card:hover{border-color:#ddd}
.sus-card.selected{background:#fffbeb;border-color:#f4c87a}
.sus-card.placed{opacity:0.35;pointer-events:none}
.sus-card.placed::after{
  content:'✓';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:#4a9;font-size:16px;font-weight:900;
}

/* Polaroid portrait */
.polaroid{
  width:48px;height:56px;background:#fff;border:2px solid #ddd;
  border-radius:3px;padding:3px 3px 10px;flex-shrink:0;
  box-shadow:1px 2px 4px rgba(0,0,0,0.1);
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;position:relative;
}
.polaroid svg{width:100%;height:42px}
.polaroid .pol-name{
  position:absolute;bottom:1px;left:0;right:0;text-align:center;
  font-family:'Caveat',cursive;font-size:8px;color:#444;
}

.sus-info{flex:1;min-width:0}
.sus-name{
  font-family:'Caveat',cursive;font-size:18px;font-weight:700;color:var(--dark);
}
/* Speech bubble clue */
.sus-clue{
  background:#f0f0f0;border-radius:10px;padding:4px 10px;
  font-size:11px;color:#555;margin-top:3px;position:relative;
  display:inline-block;line-height:1.4;
}
.sus-clue::before{
  content:'';position:absolute;top:-5px;left:14px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:5px solid #f0f0f0;
}
.sus-clue b{color:var(--dark)}

/* Victim card */
.victim-card{
  background:#fff0f0;border-color:#e8b0b0;cursor:default;
}
.victim-card .sus-name{color:#c44}
.victim-badge{
  display:inline-block;background:#d44;color:#fff;font-size:9px;
  font-weight:700;padding:2px 8px;border-radius:4px;margin-top:3px;
}

/* ══════ ACCUSE ══════ */
.accuse-panel{text-align:center;overflow-wrap:break-word}
.accuse-panel p{font-size:11px;color:#777;margin-bottom:12px;line-height:1.6;word-wrap:break-word}
.accuse-select{
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;
  padding:10px;border:2px solid #ddd;border-radius:8px;
  width:100%;margin-bottom:10px;background:#fff;color:var(--dark);cursor:pointer;
}
.accuse-btn{
  width:100%;font-family:'Playfair Display',serif;font-size:15px;
  padding:12px;border-radius:10px;border:2.5px solid #d44;
  background:#fff;color:#d44;cursor:pointer;font-weight:700;
  transition:all 0.15s;
}
.accuse-btn:hover:not(:disabled){background:#d44;color:#fff}
.accuse-btn:disabled{opacity:0.3;cursor:not-allowed}

/* Sticky note */
.sticky{
  background:#fef6a0;padding:14px 16px;border-radius:2px;
  box-shadow:2px 3px 12px rgba(0,0,0,0.3);
  transform:rotate(1.5deg);margin-top:8px;
  border-bottom:2px solid #e8d880;
}
.sticky p{
  font-family:'Caveat',cursive;font-size:15px;color:#555;line-height:1.5;
}
.sticky .sig{
  font-family:'Caveat',cursive;font-size:14px;color:#888;
  margin-top:8px;text-align:right;font-style:italic;
}

/* ══════ MODAL ══════ */
.modal-bg{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.75);z-index:100;
  align-items:center;justify-content:center;padding:12px;
}
.modal-bg.show{display:flex}
.modal-box{
  background:#fff;border-radius:20px;padding:36px;max-width:440px;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);
  border:4px solid;
}
.modal-box.win{border-color:#4a9}
.modal-box.lose{border-color:#d44}
.modal-box h2{
  font-family:'Playfair Display',serif;font-size:24px;margin-bottom:12px;
}
.modal-box.win h2{color:#4a9}
.modal-box.lose h2{color:#d44}
.modal-box .reveal-name{
  font-family:'Caveat',cursive;font-size:32px;color:#d44;
  display:block;margin:8px 0 16px;
}
.modal-box p{font-size:13px;color:#888;line-height:1.8}
.modal-box .stats{font-size:11px;color:#aaa;margin-top:12px}
.modal-btns{display:flex;gap:10px;justify-content:center;margin-top:20px}
.modal-btns .btn{font-size:13px;padding:10px 22px}