@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --paper:#f4f1e9; --ink:#252720; --orange:#fe623a; --muted:#78796f; }
* { box-sizing:border-box; }
html { scroll-padding-top:80px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
[hidden] { display:none!important; }
.hero { padding:8px 16px 0; }
.arena-wrap { max-width:496px; margin:auto; }
#your-turn { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:54px; margin:14px 0 0; padding:12px 16px; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:var(--paper); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; box-shadow:2px 3px 0 #e2dfd5; }
#your-turn:active,.join-button:active { transform:translate(2px,3px); box-shadow:none; }
#your-turn span { font-family:'DM Sans',sans-serif; font-size:12px; font-weight:400; }
.draw-section { max-width:520px; margin:22px auto 40px; padding:0 16px; }
.drawing-card { background:#fff; border:1.5px solid var(--ink); box-shadow:2px 3px 0 #e2dfd5; border-radius:12px; overflow:hidden; }
.paper-header { display:flex; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #efeee9; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.canvas-wrap { position:relative; }
canvas { display:block; width:100%; aspect-ratio:4/3; touch-action:none; cursor:crosshair; }
#canvas-hint { pointer-events:none; position:absolute; top:43%; left:0; width:100%; text-align:center; font-family:cursive; font-size:14px; color:#b1b2a8; transform:rotate(-6deg); }
#canvas-hint svg { display:block; width:60px; height:50px; margin:12px auto; stroke:#b1b2a8; stroke-width:2; fill:none; stroke-linecap:round; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; padding:8px 10px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.toolbar button { background:none; border:0; color:#686b61; padding:5px; }
.toolbar button:disabled { opacity:.3; }
#palette { display:flex; flex-basis:100%; justify-content:space-between; margin:0 0 4px; }
#palette button { width:44px; height:44px; border-radius:50%; padding:0; border:10px solid #fff; box-shadow:0 0 0 1px transparent; }
#palette button[aria-pressed=true] { box-shadow:0 0 0 1px var(--ink); }
.brush-label { display:flex; flex:1; align-items:center; gap:12px; font-size:12px; color:var(--muted); min-height:44px; }
#brush { width:90px; min-height:44px; margin:0; accent-color:var(--ink); }
.toolbar > button { min-height:44px; min-width:48px; font-size:13px; }
#undo-drawing { font-size:24px; }
.entry { padding:16px; }
.entry label { display:block; font-family:"Space Grotesk",sans-serif; font-size:24px; line-height:1.2; letter-spacing:-.5px; margin-bottom:12px; font-weight:700; }
.entry-note { margin:0; font-size:14px; color:var(--muted); }
.join-button:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
.join-button[aria-busy=true] { cursor:wait; opacity:.7; }
.entry input { width:100%; padding:12px; border:1px solid #dedfd7; border-radius:4px; background:#fafaf7; font-size:16px; min-height:48px; }
.join-button { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:15px 18px; border:1px solid var(--ink); border-radius:6px; background:var(--orange); color:var(--ink); font-weight:700; font-size:17px; box-shadow:2px 3px 0 var(--ink); min-height:54px; }
#join-error { font-size:12px; color:#b32d18; margin:10px 0 0; }
#join-error:empty { display:none; }

h1 { text-wrap:balance; font-family:"Space Grotesk",sans-serif; font-size:clamp(38px,10vw,52px); line-height:1.06; letter-spacing:-2px; margin:24px 0 22px; }
.hero-demo { position:relative; aspect-ratio:16/9; background:white; border:1px solid #d7d5cc; border-radius:12px; box-shadow:2px 3px 0 #e2dfd5; overflow:hidden; }
#drawing-intro { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 16px 30px; }
#intro-mushroom { width:36%; height:100%; overflow:visible; transform:translateX(55%); transition:transform .7s; }
.intro-opponent { width:36%; height:100%; object-fit:contain; opacity:0; transform:scale(.8); transition:opacity .7s,transform .7s; }
.intro-vs { font-size:15px; font-weight:700; opacity:0; }
#intro-caption { position:absolute; bottom:10px; left:0; width:100%; text-align:center; font-size:20px; line-height:1.2; font-weight:600; color:var(--ink); }
.drawn #intro-pencil { display:none; }
.opponent-arrives #intro-mushroom { transform:translateX(0); }
.opponent-arrives .intro-opponent { opacity:1; transform:scale(1); }
.opponent-arrives .intro-vs { opacity:1; }

@media(prefers-reduced-motion:reduce) { #hero-fight { transition:none; } }

.show-fight #drawing-intro { visibility:visible; }
.show-fight #intro-mushroom { animation:doodle-brawl-left 2s ease-in-out infinite; }
.show-fight .intro-opponent { animation:doodle-brawl-right 2s ease-in-out infinite; }
.impact { position:absolute; left:47%; top:37%; font-size:42px; color:var(--orange); opacity:0; pointer-events:none; }
.show-fight .impact { animation:impact-flash 2s ease-out infinite; }
.show-fight .intro-vs { opacity:0; }
@keyframes doodle-brawl-left {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  20% { transform:translate(-8px,-4px) rotate(-10deg); }
  36% { transform:translate(27px,-8px) rotate(13deg); }
  45% { transform:translate(18px,-4px) rotate(6deg); }
  65% { transform:translate(0,0) rotate(-4deg); }
  78% { transform:translate(-10px,7px) rotate(-14deg); }
}
@keyframes doodle-brawl-right {
  0%,100% { transform:translate(0,-4px) rotate(3deg); }
  20% { transform:translate(0,2px) rotate(-4deg); }
  38% { transform:translate(14px,0) rotate(14deg); }
  55% { transform:translate(7px,-10px) rotate(6deg); }
  74% { transform:translate(-27px,0) rotate(-14deg); }
  84% { transform:translate(-10px,0) rotate(-6deg); }
}
@keyframes impact-flash {
  0%,30%,44%,68%,84%,100% { opacity:0; transform:scale(.5) rotate(0); }
  36%,76% { opacity:1; transform:scale(1.2) rotate(30deg); }
}
@media(prefers-reduced-motion:reduce) {
  .show-fight #intro-mushroom,.show-fight .intro-opponent,.show-fight .impact { animation:none; }
}
.show-fight #intro-mushroom,.show-fight .intro-opponent { animation-timing-function:ease-in-out; }

.drawing-tabs{display:flex;gap:4px;padding:6px;background:#eeece4;margin:12px;border-radius:10px}.drawing-tabs button{flex:1;border:0;border-radius:7px;padding:12px;background:transparent;color:var(--muted);font-weight:600}.drawing-tabs button[aria-selected=true]{background:white;color:var(--ink);box-shadow:0 2px 5px #0001}#scan-panel{padding:4px 18px 18px}.scan-copy,#scan-status{font-size:12px;line-height:1.5;color:var(--muted)}.scan-actions{display:flex;gap:8px}.scan-actions button,#rotate-photo{padding:11px 14px;border:1px solid #d4d2c8;background:white;border-radius:7px;min-height:44px}.scan-actions button:first-child{background:var(--orange);color:var(--ink);border-color:var(--ink);box-shadow:2px 3px 0 var(--ink);font-weight:600}.scan-previews{display:grid;grid-template-columns:1fr 1fr;gap:10px}.scan-previews figure{margin:0;min-width:0}.scan-previews img,.scan-previews canvas{width:100%;aspect-ratio:4/3;object-fit:contain;background:white;border:1px solid #ddd;border-radius:8px}.scan-previews figcaption{font-size:11px;text-align:center;margin:6px}.scan-sensitivity{display:block;font-size:12px;margin:18px 0}.scan-sensitivity input{display:block;width:100%;margin:12px 0;accent-color:var(--orange)}.scan-sensitivity span{display:block;font-size:10px;color:var(--muted);text-align:center}

.drawing-tabs{gap:3px;padding:4px;margin:10px 12px}.drawing-tabs button{padding:8px 10px;font-size:12px;min-height:36px}#upload-panel{padding:4px 18px 18px}
@media(max-width:359px) { #your-turn { flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; } }

#characters-panel{padding:4px 18px 18px;text-align:center}
#picked-doodle{display:block;width:100%;max-height:260px;object-fit:contain;margin:8px 0}