*{box-sizing:border-box;margin:0;padding:0;}
body{background:#1a1a2e;overflow:hidden;width:100vw;height:100dvh;
     font-family:Arial,sans-serif;user-select:none;-webkit-user-select:none;}

/* ── Shared overlay screen ────────────────────────────────── */
.screen-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#0d0d20,#1a1a3a);
  display:flex;align-items:center;justify-content:center;z-index:50;overflow-y:auto;padding:20px;}
.screen-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;padding:32px 28px;width:min(640px,100%);max-height:90vh;overflow-y:auto;}
.screen-card h1{color:#ffd700;font-size:28px;text-align:center;margin-bottom:24px;
  text-shadow:0 0 20px rgba(255,215,0,0.4);}

/* ── Auth screen ──────────────────────────────────────────── */
#auth-tabs{display:flex;gap:0;margin-bottom:24px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);}
#auth-tabs button{flex:1;padding:10px;background:rgba(255,255,255,0.04);color:#aaa;
  border:none;cursor:pointer;font-size:14px;transition:background .15s;}
#auth-tabs button.active{background:rgba(100,100,220,0.25);color:#fff;}
#auth-tabs button:hover:not(.active){background:rgba(255,255,255,0.08);}
.auth-panel{display:none;}
.auth-panel.active{display:block;}
.google-btn{width:100%;padding:11px 14px;background:rgba(255,255,255,0.08);
  color:#ddd;border:1px solid rgba(255,255,255,0.18);border-radius:8px;
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:10px;transition:background .15s;}
.google-btn:hover{background:rgba(255,255,255,0.14);color:#fff;}
.google-btn svg{flex-shrink:0;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#555;font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.1);}
#auth-error{color:#ff8080;font-size:13px;text-align:center;min-height:18px;margin-top:6px;}

/* ── Setup screen (new game config) ──────────────────────── */
#setup-screen{display:none;}
.field{margin-bottom:18px;}
.field label{display:block;color:#aaa;font-size:13px;margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em;}
.field input[type=text],.field input[type=email],.field input[type=password]{
  width:100%;padding:10px 14px;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);border-radius:8px;color:#fff;font-size:16px;}
.field input[type=text]:focus,.field input[type=email]:focus,.field input[type=password]:focus{
  outline:none;border-color:#7070cc;}
.field input::placeholder{color:#555;}
#image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.img-thumb{cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid transparent;
  transition:border-color .15s,transform .15s;aspect-ratio:3/2;background:#111;position:relative;}
.img-thumb:hover{transform:scale(1.03);}
.img-thumb.selected{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,0.3);}
.img-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.img-thumb span{display:block;text-align:center;font-size:10px;color:#999;padding:3px;background:#111;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.img-thumb .del-btn{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(200,50,50,0.85);color:#fff;border:none;cursor:pointer;font-size:11px;
  display:none;align-items:center;justify-content:center;line-height:1;padding:0;}
.img-thumb:hover .del-btn{display:flex;}
.img-upload-tile{cursor:pointer;border-radius:8px;border:2px dashed rgba(255,255,255,0.2);
  aspect-ratio:3/2;background:rgba(255,255,255,0.03);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:#777;font-size:12px;
  transition:border-color .15s,background .15s;}
.img-upload-tile:hover{border-color:#7070cc;background:rgba(100,100,220,0.1);color:#aaa;}
.img-upload-tile span{font-size:22px;}
.btn-group{display:flex;flex-wrap:wrap;gap:7px;}
.btn-group button{padding:8px 14px;background:rgba(255,255,255,0.07);color:#bbb;
  border:1px solid rgba(255,255,255,0.15);border-radius:7px;font-size:14px;cursor:pointer;min-height:38px;}
.btn-group button.active{background:rgba(100,100,220,0.3);color:#fff;border-color:#7070cc;}
.btn-group button:hover:not(.active){background:rgba(255,255,255,0.12);color:#ddd;}
.field-row{display:flex;gap:16px;}
.field-row .field{flex:1;}
#start-btn{width:100%;padding:14px;background:linear-gradient(135deg,#4444aa,#6644cc);
  color:#fff;border:none;border-radius:10px;font-size:17px;cursor:pointer;margin-top:8px;
  min-height:50px;transition:opacity .2s;}
#start-btn:disabled{opacity:.35;cursor:not-allowed;}
#start-btn:not(:disabled):hover{filter:brightness(1.15);}
#session-section{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);display:none;}
#session-section h2{color:#aaa;font-size:12px;margin:0 0 12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
#admin-section h2{color:#ff9966;font-size:12px;margin:0 0 12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;}
.sess-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);margin-bottom:8px;
  cursor:pointer;transition:background .18s,border-color .18s,transform .12s;position:relative;}
.sess-item:hover{background:rgba(100,100,220,0.14);border-color:rgba(100,100,220,0.4);transform:translateY(-1px);}
.sess-item:hover .sess-del{opacity:1;}
.sess-item-admin{border-left:2px solid rgba(255,153,102,0.5);}
.sess-thumb{width:68px;height:46px;object-fit:cover;border-radius:7px;flex-shrink:0;
  background:#111;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.sess-info{flex:1;min-width:0;}
.sess-title{color:#e8e8f0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
.sess-meta{color:#777;font-size:11px;}
.sess-progress-bar{height:3px;background:rgba(255,255,255,0.1);border-radius:2px;margin-top:6px;overflow:hidden;}
.sess-progress-fill{height:100%;background:linear-gradient(90deg,#7070cc,#a0a0ff);border-radius:2px;transition:width .3s;}
.sess-badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0;letter-spacing:.02em;}
.sess-badge.done{background:rgba(80,200,120,.15);color:#6fdc9f;border:1px solid rgba(80,200,120,.25);}
.sess-badge.active{background:rgba(120,120,255,.18);color:#b8b8ff;border:1px solid rgba(120,120,255,.3);}
.sess-del{background:none;border:none;color:#ff6666;cursor:pointer;font-size:15px;
  padding:6px 8px;flex-shrink:0;opacity:0;transition:opacity .15s,transform .1s;line-height:1;}
.sess-del:hover{transform:scale(1.2);}
#setup-error{color:#ff8080;font-size:13px;text-align:center;min-height:18px;margin-top:6px;}
#canvas{position:fixed;top:0;left:0;touch-action:none;display:block;cursor:grab;}
#canvas.dragging{cursor:grabbing;}
#canvas.panning{cursor:move;}
#toolbar{position:fixed;top:0;left:0;right:0;height:50px;
  background:rgba(8,8,26,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.10);
  display:none;align-items:center;gap:10px;padding:0 12px;z-index:20;}
#toolbar.visible{display:flex;}
#progress{color:#ffd700;font-size:14px;font-weight:bold;white-space:nowrap;}
#toolbar-right{display:flex;align-items:center;gap:4px;margin-left:auto;}
#drawer-toggle-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#ccc;
  font-size:13px;cursor:pointer;padding:5px 10px;border-radius:6px;white-space:nowrap;}
#drawer-toggle-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3);}
#drawer-toggle-btn.drawer-active{background:rgba(100,100,220,.25);color:#aaf;border-color:#7070cc;}
#drawer-filter{display:none;background:rgba(8,8,26,.9);color:#ccc;border:1px solid rgba(255,255,255,.2);
  font-size:12px;padding:4px 6px;border-radius:6px;cursor:pointer;margin-left:4px;max-width:120px;}
#drawer-filter.visible{display:inline-block;}
#menu-btn{background:none;border:none;color:#ccc;font-size:22px;
  cursor:pointer;padding:6px 8px;border-radius:6px;line-height:1;}
#menu-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
/* ── Mobile: compact toolbar ── */
@media(max-width:480px){
  #drawer-toggle-btn{padding:5px 7px;font-size:16px;}
  #drawer-toggle-btn .btn-label{display:none;}
  #drawer-filter{max-width:90px;font-size:11px;padding:4px 3px;}
  #progress{font-size:12px;}
}
/* ── Slide-in menu overlay ── */
#menu-overlay{position:fixed;inset:0;z-index:50;display:none;}
#menu-overlay.open{display:block;}
#menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);}
#menu-panel{position:absolute;top:0;right:0;width:260px;max-width:85vw;height:100%;
  background:#12122a;border-left:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;padding:18px 0 24px;}
#menu-panel h2{color:#ffd700;font-size:16px;padding:0 20px 14px;margin:0;
  border-bottom:1px solid rgba(255,255,255,.08);}
.menu-item{display:flex;align-items:center;gap:12px;padding:14px 20px;
  color:#ccc;font-size:15px;cursor:pointer;border:none;background:none;
  width:100%;text-align:left;text-decoration:none;}
.menu-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.menu-item .mi-icon{font-size:20px;width:26px;text-align:center;}
.menu-sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:6px 0;}
#zoom-btns{position:fixed;right:14px;bottom:calc(var(--drawer-h,0px) + 14px);
  display:none;flex-direction:column;gap:5px;z-index:20;transition:bottom .25s;}
#zoom-btns.visible{display:flex;}
#zoom-btns button{width:42px;height:42px;font-size:20px;padding:0;border-radius:8px;
  background:rgba(8,8,26,.85);color:#ddd;border:1px solid rgba(255,255,255,.15);cursor:pointer;}
#zoom-btns button:hover{background:rgba(255,255,255,.12);color:#fff;}
#snap-toast{position:fixed;bottom:calc(var(--drawer-h,0px) + 20px);left:50%;
  transform:translateX(-50%);background:rgba(5,35,5,.92);color:#7fff7f;
  padding:9px 22px;border-radius:24px;font-size:14px;font-weight:bold;
  border:1px solid rgba(60,180,60,.45);pointer-events:none;z-index:30;
  opacity:0;transition:opacity .2s, bottom .25s;white-space:nowrap;}
#snap-toast.show{opacity:1;}
#win-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);
  align-items:center;justify-content:center;flex-direction:column;gap:22px;z-index:40;}
#win-overlay.show{display:flex;}
#win-text{color:#ffd700;font-size:clamp(22px,5vw,42px);font-weight:bold;text-align:center;
  text-shadow:0 0 28px #ffd700,0 0 56px #ff8800;line-height:1.5;}
#win-board{background:rgba(255,255,255,.07);border-radius:10px;padding:14px 24px;
  min-width:320px;max-width:500px;color:#ddd;font-size:13px;}
#win-board table{width:100%;border-collapse:collapse;}
#win-board th{color:#888;font-weight:normal;padding:4px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);}
#win-board td{padding:4px 8px;}
.win-btns{display:flex;gap:12px;}
.win-btns button{padding:12px 28px;font-size:15px;border-radius:8px;cursor:pointer;min-height:44px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#ddd;}
.win-btns button:hover{background:rgba(255,255,255,.16);color:#fff;}