:root {
    --bg: #FFF8E7;
    --ink: #1A1A1A;
    --accent: #FF3B30;
    --accent-2: #0066FF;
    --accent-3: #FFD60A;
    --muted: #8E8E93;
    --paper: #FFFDF5;
    --line: rgba(26,26,26,0.12);
    --shadow: 4px 4px 0 var(--ink);
    --shadow-sm: 2px 2px 0 var(--ink);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    font-family: 'Bricolage Grotesque', sans-serif;
    background: var(--bg);
    color: var(--ink);
    background-image:
      radial-gradient(circle at 20% 10%, rgba(255,59,48,0.06) 0, transparent 40%),
      radial-gradient(circle at 80% 90%, rgba(0,102,255,0.06) 0, transparent 40%);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    user-select: none;
    -webkit-user-select: none;
  }
  input, textarea { user-select: text; -webkit-user-select: text; }

.screen {
position: fixed;
inset: 0;
padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 16px);
display: none;
flex-direction: column;
}
.screen.active { display: flex; }

/* Typography */
h1.title {
font-weight: 800;
font-size: clamp(40px, 12vw, 64px);
line-height: 0.9;
letter-spacing: -0.03em;
margin-bottom: 4px;
}
h1.title em { font-style: italic; color: var(--accent); }
.subtitle {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
}

.label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--muted);
margin-bottom: 8px;
display: block;
}

/* Inputs */
.field {
width: 100%;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 14px;
padding: 16px 18px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--ink);
box-shadow: var(--shadow);
outline: none;
transition: transform 0.1s ease;
}
.field:focus { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.field::placeholder { color: var(--muted); font-weight: 400; }

/* Buttons */
.btn {
width: 100%;
background: var(--ink);
touch-action: manipulation;
color: var(--paper);
border: 2px solid var(--ink);
border-radius: 14px;
padding: 18px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
cursor: pointer;
box-shadow: var(--shadow);
transition: all 0.1s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.alt { background: var(--paper); color: var(--ink); }
.rounds-opt { width: auto; padding: 5px 10px; font-size: 13px; min-width: 0; flex: none; line-height: 1; }
.rounds-opt.sel { background: var(--ink); color: var(--bg); }
.btn.accent { background: var(--accent); color: var(--paper); }
.btn.blue { background: var(--accent-2); color: var(--paper); }
.btn.yellow { background: var(--accent-3); color: var(--ink); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* Center stack */
.stack { display: flex; flex-direction: column; gap: 14px; }
.grow { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; flex-direction: column; }

.error {
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
margin-top: 4px;
min-height: 16px;
}

/* Lobby header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.badge {
background: var(--ink);
color: var(--paper);
padding: 6px 12px;
border-radius: 100px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}

/* Player list */
.player-list {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 16px;
padding: 14px;
box-shadow: var(--shadow);
max-height: 40vh;
overflow-y: auto;
}
.player-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
border-bottom: 1px dashed var(--line);
}
.player-row:last-child { border-bottom: none; }
.avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--accent-3);
border: 2px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 14px;
}
.avatar.host { background: var(--accent); color: var(--paper); }
.player-name { font-weight: 600; font-size: 16px; flex: 1; }
.player-score {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
background: var(--ink);
color: var(--paper);
padding: 4px 8px;
border-radius: 8px;
}
.player-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
text-transform: uppercase;
color: var(--muted);
}

/* Room code */
.code-box {
background: var(--accent-3);
border: 2px solid var(--ink);
border-radius: 16px;
padding: 18px;
box-shadow: var(--shadow);
text-align: center;
margin-bottom: 14px;
}
.code-box .label { color: var(--ink); opacity: 0.6; }
.code-box .code {
font-family: 'JetBrains Mono', monospace;
font-size: 28px;
font-weight: 600;
letter-spacing: 0.1em;
word-break: break-all;
margin-top: 6px;
}
.copy-hint {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--muted);
text-align: center;
margin-top: 6px;
}

/* Word choice screen */
.word-choice {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
justify-content: center;
}
.word-card {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 18px;
padding: 22px;
box-shadow: var(--shadow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.1s ease;
}
.word-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.word-card .word { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.word-card .difficulty {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 6px 10px;
border-radius: 100px;
border: 1.5px solid var(--ink);
}
.difficulty.easy { background: #B8E6B8; }
.difficulty.medium { background: var(--accent-3); }
.difficulty.hard { background: var(--accent); color: var(--paper); }

/* DRAW SCREEN */
#drawScreen {
padding: 0;
}
#canvasWrap {
position: absolute;
inset: 0;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
}
#drawCanvas {
display: block;
touch-action: none;
background: var(--paper);
box-shadow: 0 0 0 1px rgba(26,26,26,0.15), 0 8px 32px rgba(26,26,26,0.25);
}

/* Floating chips */
.float {
position: absolute;
z-index: 10;
pointer-events: none;
}
.float-top {
top: calc(env(safe-area-inset-top) + 12px);
left: 12px;
right: 12px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.chip {
background: var(--ink);
color: var(--paper);
padding: 8px 12px;
border-radius: 100px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
pointer-events: auto;
box-shadow: var(--shadow-sm);
}
.chip.timer { background: var(--accent-3); color: var(--ink); }
.chip.timer.danger { background: var(--accent); color: var(--paper); animation: pulse 1s infinite; }
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.chip.word {
background: var(--accent-2);
color: var(--paper);
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: -0.01em;
text-transform: none;
max-width: 60%;
}
.chip.word .hint {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
opacity: 0.7;
letter-spacing: 0.15em;
text-transform: uppercase;
display: block;
}
.round-chip {
white-space: nowrap;
}

/* Tools (only drawer) */
.tools {
position: absolute;
left: 12px;
bottom: calc(env(safe-area-inset-bottom) + 56px);
z-index: 11;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: auto;
}
.tool-btn {
width: 44px; height: 44px;
border: 2px solid var(--ink);
border-radius: 12px;
background: var(--paper);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: 700;
touch-action: manipulation;
}
.tool-btn.active { background: var(--ink); color: var(--paper); }
.action-tools {
position: absolute;
bottom: calc(env(safe-area-inset-bottom) + 4px);
left: 12px;
z-index: 11;
display: flex;
flex-direction: row;
gap: 8px;
pointer-events: auto;
}
.colors {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 12px;
padding: 6px;
box-shadow: var(--shadow-sm);
}
.color-dot {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid var(--ink);
cursor: pointer;
touch-action: manipulation;
}
.color-dot.active { transform: scale(1.2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }

/* Chat */
/* Chat log — top right, translucent history */
#chatLog {
position: absolute;
top: calc(env(safe-area-inset-top) + 60px);
right: 12px;
width: min(220px, 55vw);
max-height: 35vh;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
pointer-events: none;
z-index: 12;
}
.chat-msg {
font-size: 12px;
line-height: 1.35;
color: var(--ink);
opacity: 0.55;
text-align: right;
word-break: break-word;
}
.chat-msg .who {
font-weight: 700;
color: var(--accent-2);
margin-right: 3px;
}
.chat-msg.system {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--muted);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.45;
}
.chat-msg.correct {
opacity: 1;
font-weight: 700;
color: #2a7a2a;
}
.chat-msg.close {
opacity: 0.75;
color: #7a5a00;
}

/* Chat input — bottom right */
#chatInputWrap {
position: fixed;
bottom: calc(env(safe-area-inset-bottom) + 8px);
right: 12px;
display: none;
gap: 6px;
pointer-events: auto;
z-index: 12;
}
.chat-input {
width: min(180px, 48vw);
border: 1.5px solid var(--ink);
border-radius: 12px;
padding: 8px 12px;
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 14px;
outline: none;
background: var(--paper);
box-shadow: 0 2px 10px rgba(26,26,26,0.15);
}
.chat-send {
border: 1.5px solid var(--ink);
background: var(--ink);
color: var(--paper);
border-radius: 12px;
padding: 0 12px;
font-weight: 700;
cursor: pointer;
font-size: 13px;
}

/* Gallery */
#galleryScreen {
overflow-y: auto;
}
#galleryGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
}
.gallery-thumb {
border-radius: 12px;
overflow: hidden;
border: 1.5px solid var(--line);
cursor: pointer;
background: var(--paper);
display: flex;
flex-direction: column;
transition: transform 0.12s;
}
.gallery-thumb:active { transform: scale(0.96); }
.gallery-thumb img {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
display: block;
}
.gallery-thumb-word {
padding: 5px 8px 2px;
font-size: 12px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gallery-thumb-by {
padding: 0 8px 6px;
font-size: 10px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#galleryLightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(26,26,26,0.93);
z-index: 200;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px;
}
#galleryLightbox.open { display: flex; }
#galleryLightboxClose {
position: absolute;
top: calc(env(safe-area-inset-top) + 16px);
right: 16px;
background: rgba(255,255,255,0.15);
border: none;
color: var(--paper);
font-size: 20px;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#galleryLightboxImg {
max-width: 100%;
max-height: 65vh;
border-radius: 12px;
object-fit: contain;
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
#galleryLightboxMeta {
color: rgba(255,255,255,0.9);
font-weight: 700;
font-size: 15px;
text-align: center;
}
#galleryDownload {
background: var(--paper);
color: var(--ink);
border-radius: 12px;
padding: 11px 24px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
cursor: pointer;
}

/* Round end overlay */
.overlay {
position: absolute;
inset: 0;
background: rgba(26,26,26,0.7);
z-index: 50;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.overlay.show { display: flex; }
.overlay-card {
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 20px;
padding: 24px;
box-shadow: var(--shadow);
width: 100%;
max-width: 360px;
text-align: center;
}
.overlay-card h2 {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.overlay-card .reveal {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--muted);
margin-bottom: 14px;
}
.overlay-card .word-reveal {
font-size: 24px;
font-weight: 700;
color: var(--accent);
margin-bottom: 18px;
}
.score-list {
text-align: left;
margin-bottom: 18px;
border-top: 1px dashed var(--line);
}
.score-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed var(--line);
font-size: 14px;
}
.score-row .gain {
font-family: 'JetBrains Mono', monospace;
color: var(--accent-2);
font-weight: 600;
}
.score-row .delta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 2px; }
.score-row-inner { display: flex; flex-direction: column; }

/* Connection status */
.conn-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
margin-right: 6px;
}
.conn-dot.ok { background: #34C759; }

/* Decorative scribbles */
.scribble {
position: absolute;
pointer-events: none;
opacity: 0.5;
}