*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;color:var(--fg);background:var(--bg)}.container{max-width:1100px;margin:0 auto;padding:20px}.container h1,.container h2{margin:0 0 12px}
form label{display:block;margin:10px 0}
input[type="text"],select{width:100%;padding:10px;border:1px solid var(--cell-border);border-radius:10px;background:var(--panel);color:var(--fg)}
input[type="text"]:focus, select:focus{outline:2px solid var(--naruto)}
button{background:linear-gradient(90deg,var(--btn1),var(--btn2));border:none;color:var(--button-fg);padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.15)}
button[disabled]{opacity:.6;cursor:not-allowed}

.room-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.link-share{display:flex;gap:8px}
.link-share input{width:320px}
.timer{font-size:18px}
.voice button{margin-left:6px}

.room-main{display:grid;grid-template-columns:1fr 280px;gap:18px}
.grid{display:grid;grid-template-columns:repeat(9, 40px);grid-template-rows:repeat(9, 40px);border:3px solid var(--thick-border)}
.cell{border:1px solid var(--cell-border);display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--cell);color:var(--fg)}
.cell.fixed{background:var(--cell-fixed);font-weight:700}
.cell input{width:100%;height:100%;border:0;text-align:center;font-size:18px}
.cell input:focus{outline:2px solid #4f46e5;background:#f0f9ff}

/* Destaque dos blocos 3x3 (mais fortes) */
.cell.b-right{border-right-width:4px;border-right-color:var(--thick-border)}
.cell.b-bottom{border-bottom-width:4px;border-bottom-color:var(--thick-border)}
.cell.b-left{border-left-width:4px;border-left-color:var(--thick-border)}
.cell.b-top{border-top-width:4px;border-top-color:var(--thick-border)}

/* Conflitos visuais */
.cell.conflict{background:#fee2e2}
.cell.fixed.conflict{background:#fecaca}

.sidebar .players{margin-bottom:16px}
.progress-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin:8px 0}
.bar{background:#e5e7eb;border-radius:999px;height:10px;overflow:hidden}
.bar-inner{background:#10b981;height:100%;transition:width .3s ease}
#status{margin-top:12px;color:var(--muted)}

.finish{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:100}
.finish.hidden{display:none}
.finish h2{background:#fff;padding:20px 24px;border-radius:8px;margin:0 0 12px}

/* ===== Naruto Mobile Theme Overrides ===== */
:root{
	--bg:#0b0b0f; --fg:#f7fafc; --muted:#9ca3af; --naruto:#f59e0b; --leaf:#16a34a; --akatsuki:#ef4444; --note:#93c5fd;
	/* novos tokens temáticos */
	--panel:#0f172a; --grid-bg:#0b1220; --cell:#0f172a; --cell-fixed:#1f2937; --cell-border:#374151; --thick-border:#1f2937;
	--btn1:#f59e0b; --btn2:#ff7a18; --button-fg:#111827; --timer-bg:#0f172a; --timer-fg:var(--fg);
}
html,body{height:100%}
body{background:linear-gradient(180deg,#111827,#0b0b0f); color:var(--fg); -webkit-text-size-adjust:100%; overflow-x:hidden}
.container{padding:16px 16px env(safe-area-inset-bottom) 16px}
.subtitle{color:var(--muted)}

/* Inputs e botões maiores (evitar zoom no iOS) */
input[type="text"], select{background:var(--panel);color:var(--fg);border:1px solid var(--cell-border);border-radius:10px;font-size:18px}
button{background:linear-gradient(90deg,var(--btn1),var(--btn2));border:none;color:var(--button-fg);padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* Layout sala responsivo */
.room-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.board{display:flex;justify-content:center}
.grid{width:min(92vw,520px);grid-template-columns:repeat(9,1fr);border-radius:10px;background:var(--grid-bg);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.cell{background:var(--cell);border:1px solid var(--cell-border);aspect-ratio:1/1;color:var(--fg)}
.cell.fixed{background:var(--cell-fixed);color:var(--fg);font-weight:700}
.cell input{font-size:20px;color:var(--fg);background:transparent}
.cell input:focus{outline:2px solid var(--naruto);background:rgba(17,24,39,.5)}
.cell input.note{font-size:14px;color:var(--note)}
.cell.conflict{background:#3b0d0d}
.cell.fixed.conflict{background:#5a0e0e}
.bar{background:#1f2937}
.bar-inner{background:linear-gradient(90deg,var(--leaf),#22c55e)}
#status{color:var(--muted)}
.finish h2{background:var(--panel);border:1px solid var(--cell-border);color:var(--fg);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}

.room-header{flex-wrap:wrap}
.link-share{flex:1;min-width:240px}
.link-share input{width:100%}

/* Timer e controles */
.timer{display:flex;align-items:center;gap:8px;background:var(--timer-bg);color:var(--timer-fg);padding:8px 12px;border:1px solid var(--cell-border);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.timer strong{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:20px}
.voice{display:flex;gap:8px;flex-wrap:wrap}
.voice select{min-width:180px}

@media (max-width: 860px){
	.room-main{grid-template-columns:1fr}
}

/* Player cards */
.player-cards{display:flex;flex-direction:column;gap:12px}
.player-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--cell-border);border-radius:12px;padding:10px 12px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.player-emoji{font-size:22px}
.player-name{font-weight:700}
.player-bar{display:flex;align-items:center;gap:10px}
.player-bar .bar{width:180px;height:12px;background:var(--cell-border)}
.player-pct{min-width:40px;text-align:right}
.player-me{outline:2px dashed var(--naruto);outline-offset:4px}
.player-wait{opacity:.7}
.hint{margin-top:6px;color:var(--muted);font-size:14px}

/* Indicador versus */
.versus{margin-top:8px;padding:8px 10px;border:1px dashed var(--cell-border);border-radius:10px;background:color-mix(in srgb, var(--panel) 80%, transparent);color:var(--fg);font-size:14px}
.versus.win{border-color:#16a34a}
.versus.lose{border-color:#dc2626}
.versus.tie{border-color:#f59e0b}

/* Toast */
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--cell-border);color:var(--fg);padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:200}
.toast.hidden{display:none}

/* Countdown flash nos últimos 3s */
.finish.flash h2{animation:flash 300ms ease-in-out infinite alternate}
@keyframes flash{from{transform:scale(1);box-shadow:0 0 0 rgba(245,158,11,.0)}to{transform:scale(1.03);box-shadow:0 0 25px rgba(245,158,11,.5)}}

/* ===== Temas ===== */
.theme-light{--bg:#f7f7fb; --fg:#111827; --muted:#6b7280; --naruto:#1d4ed8; --leaf:#16a34a; --akatsuki:#ef4444; --note:#2563eb; --panel:#ffffff; --grid-bg:#f3f4f6; --cell:#ffffff; --cell-fixed:#eef2ff; --cell-border:#d1d5db; --thick-border:#9ca3af; --btn1:#3b82f6; --btn2:#60a5fa; --button-fg:#0b1220; --timer-bg:#ffffff; --timer-fg:#111827}
.theme-dark{--bg:#0b0b0f; --fg:#f7fafc; --muted:#9ca3af; --naruto:#f59e0b; --leaf:#22c55e; --akatsuki:#ef4444; --note:#93c5fd; --panel:#0f172a; --grid-bg:#0b1220; --cell:#0f172a; --cell-fixed:#1f2937; --cell-border:#374151; --thick-border:#1f2937; --btn1:#f59e0b; --btn2:#ff7a18; --button-fg:#111827; --timer-bg:#0f172a; --timer-fg:#f7fafc}
.theme-pink{--bg:#2c0a1a; --fg:#fde2f3; --muted:#f9a8d4; --naruto:#f472b6; --leaf:#ec4899; --akatsuki:#fb7185; --note:#fda4af; --panel:#3b0a2a; --grid-bg:#2e0720; --cell:#3b0a2a; --cell-fixed:#4a0e2f; --cell-border:#7a1140; --thick-border:#9d174d; --btn1:#f472b6; --btn2:#fb7185; --button-fg:#1f1020; --timer-bg:#3b0a2a; --timer-fg:#fde2f3}
.theme-brasil{--bg:#062e0a; --fg:#fef9c3; --muted:#a7f3d0; --naruto:#facc15; --leaf:#16a34a; --akatsuki:#dc2626; --note:#22c55e; --panel:#0a3a12; --grid-bg:#072b0d; --cell:#0a3a12; --cell-fixed:#0f4a1d; --cell-border:#14532d; --thick-border:#15803d; --btn1:#22c55e; --btn2:#facc15; --button-fg:#062e0a; --timer-bg:#0a3a12; --timer-fg:#fef9c3}
.theme-agua{--bg:#0b1726; --fg:#e0f2fe; --muted:#93c5fd; --naruto:#38bdf8; --leaf:#0ea5e9; --akatsuki:#e11d48; --note:#60a5fa; --panel:#10243d; --grid-bg:#0b1726; --cell:#10243d; --cell-fixed:#143963; --cell-border:#1e3a8a; --thick-border:#1d4ed8; --btn1:#38bdf8; --btn2:#60a5fa; --button-fg:#0b1220; --timer-bg:#10243d; --timer-fg:#e0f2fe}
.theme-amazonia{--bg:#0f1a12; --fg:#e7f6df; --muted:#a3b18a; --naruto:#f59e0b; --leaf:#2a9d8f; --akatsuki:#b45309; --note:#ef4444; --panel:#132016; --grid-bg:#0f1a12; --cell:#132016; --cell-fixed:#1b2a1d; --cell-border:#2f3e31; --thick-border:#3b4a3d; --btn1:#2a9d8f; --btn2:#f59e0b; --button-fg:#0f1a12; --timer-bg:#132016; --timer-fg:#e7f6df}

body.theme-light{background:#f7f7fb;color:var(--fg)}
body.theme-dark{background:linear-gradient(180deg,#111827,#0b0b0f);color:var(--fg)}
body.theme-pink{background:linear-gradient(180deg,#3b0a2a,#2c0a1a);color:var(--fg)}
body.theme-brasil{background:linear-gradient(180deg,#0a3a12,#062e0a);color:var(--fg)}
body.theme-agua{background:linear-gradient(180deg,#10243d,#0b1726);color:var(--fg)}
body.theme-amazonia{background:linear-gradient(180deg,#142017,#0f1a12);color:var(--fg)}

/* Botão rascunho ativo */
#note-toggle.active{outline:2px solid var(--naruto);filter:brightness(1.1)}