@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; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; color:#b1b2a8; }
#canvas-hint svg { width:clamp(144px,38vw,184px); height:auto; max-height:65%; flex-shrink:1; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#canvas-hint strong { margin-top:6px; color:#686b61; font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; }
#canvas-hint path { stroke-dasharray:1; animation:hint-head 4.8s ease-in-out infinite; }
#canvas-hint .hint-body { animation-name:hint-body; }
#canvas-hint .hint-arms { animation-name:hint-arms; }
#canvas-hint .hint-legs { animation-name:hint-legs; }
@keyframes hint-head { 0%,5% { stroke-dashoffset:1; opacity:1; } 23%,82% { stroke-dashoffset:0; opacity:1; } 94%,100% { stroke-dashoffset:0; opacity:0; } }
@keyframes hint-body { 0%,23% { stroke-dashoffset:1; opacity:1; } 35%,82% { stroke-dashoffset:0; opacity:1; } 94%,100% { stroke-dashoffset:0; opacity:0; } }
@keyframes hint-arms { 0%,35% { stroke-dashoffset:1; opacity:1; } 49%,82% { stroke-dashoffset:0; opacity:1; } 94%,100% { stroke-dashoffset:0; opacity:0; } }
@keyframes hint-legs { 0%,49% { stroke-dashoffset:1; opacity:1; } 65%,82% { stroke-dashoffset:0; opacity:1; } 94%,100% { stroke-dashoffset:0; opacity:0; } }
@media(prefers-reduced-motion:reduce) { #canvas-hint path { animation:none; stroke-dashoffset:0; } }
.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); }
/* Any color: a rainbow ring around the chosen color. The picker input sits inside, invisible. */
#palette .custom-ink { position:relative; border:4px solid #fff; background:conic-gradient(#f26343,#dab952,#6e9672,#4fb0c6,#6878c4,#b05fc4,#f26343); }
#palette .custom-ink::after { content:''; position:absolute; inset:5px; border:2px solid #fff; border-radius:50%; background:var(--custom); }
#palette .custom-ink input { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
#palette .eraser { display:grid; place-items:center; border:0; background:#fff; color:#686b61; }
#palette .eraser svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#palette .eraser[aria-pressed=true] { color:var(--ink); background:var(--paper); }
.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 { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 10px; border-radius:6px; }
#undo-drawing svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.toolbar > button:enabled:hover { background:var(--paper); color:var(--ink); }
.toolbar > button:disabled { cursor:default; }
.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; }
.opponent-sad { display:none; }
.opponent-crying .opponent-happy { display:none; }
.opponent-crying .opponent-sad { display:inline; }
.opponent-crying .opponent-tear { animation:opponent-cry 1.1s ease-in infinite; }
.show-fight .opponent-tear:last-child { animation-delay:-.55s; }
@keyframes opponent-cry { 0% { transform:translateY(0); opacity:0; } 15%,65% { opacity:1; } 100% { transform:translateY(38px); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .show-fight .opponent-tear { animation:none; } }
@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}

#scan-panel { padding:4px 14px 14px; }
#take-photo { position:relative; display:block; width:100%; padding:0; overflow:hidden; border:0; border-radius:10px; background:var(--paper); }
#take-photo > img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.camera-shutter { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:58px; height:58px; border:3px solid white; border-radius:50%; background:#252720d9; box-shadow:0 2px 12px #0003; color:white; }
.camera-shutter svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#take-photo:hover .camera-shutter { background:var(--ink); }
#take-photo:active .camera-shutter { transform:translateX(-50%) scale(.94); }
#scan-status:empty { display:none; }
#take-photo .retake-label { display:none; }
#scan-panel:has(#scan-editor:not([hidden])) #take-photo { display:inline-flex; align-items:center; gap:8px; width:auto; min-height:44px; padding:10px 14px; border:1px solid #d4d2c8; border-radius:7px; background:white; color:var(--ink); }
#scan-panel:has(#scan-editor:not([hidden])) #take-photo > img { display:none; }
#scan-panel:has(#scan-editor:not([hidden])) .camera-shutter { position:static; transform:none; width:22px; height:22px; border:0; background:none; box-shadow:none; color:inherit; }
#scan-panel:has(#scan-editor:not([hidden])) .camera-shutter svg { width:22px; height:22px; }
#scan-panel:has(#scan-editor:not([hidden])) .retake-label { display:inline; }
#crop-editor > #rotate-photo { margin-top:12px; }
#upload-photo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; min-height:240px; aspect-ratio:4/3; padding:24px 16px; border:2px dashed #c4c2b7; border-radius:12px; background:#faf9f5; color:var(--ink); text-align:center; }
#upload-photo > * { pointer-events:none; }
#upload-photo svg { width:48px; height:48px; margin-bottom:8px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#upload-photo strong { font-family:'Space Grotesk',sans-serif; font-size:20px; }
#upload-photo span { color:#686b61; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
#upload-photo small { color:var(--muted); font-size:11px; margin-top:8px; }
#upload-photo:hover,#upload-photo.drag-over { border-color:var(--orange); background:#fff2eb; }
#upload-panel:has(#scan-editor:not([hidden])) #upload-photo { min-height:100px; aspect-ratio:auto; padding:16px; }
#upload-panel:has(#scan-editor:not([hidden])) #upload-photo svg,#upload-panel:has(#scan-editor:not([hidden])) #upload-photo small { display:none; }

#crop-editor h3 { margin:16px 0 6px; font-family:'Space Grotesk',sans-serif; }
#crop-stage { position:relative; overflow:hidden; background:#eeece4; border-radius:8px; touch-action:none; user-select:none; }
#crop-image { display:block; width:100%; max-height:460px; object-fit:contain; pointer-events:none; }
#crop-stage { width:fit-content; max-width:100%; margin:auto; }
#crop-box { position:absolute; border:2px solid white; box-shadow:0 0 0 1000px #0008; cursor:move; touch-action:none; }
#crop-box button { position:absolute; width:32px; height:32px; padding:0; border:0; background:transparent; touch-action:none; }
#crop-box button::after { content:''; position:absolute; inset:8px; border:2px solid white; border-radius:3px; background:var(--orange); }
#crop-box [data-corner=tl] { top:-16px; left:-16px; cursor:nwse-resize; }
#crop-box [data-corner=tr] { top:-16px; right:-16px; cursor:nesw-resize; }
#crop-box [data-corner=bl] { bottom:-16px; left:-16px; cursor:nesw-resize; }
#crop-box [data-corner=br] { bottom:-16px; right:-16px; cursor:nwse-resize; }
.crop-actions { display:flex; justify-content:space-between; gap:10px; margin:16px 0; }
.crop-actions button,#recrop-photo { min-height:44px; padding:10px 14px; border:1px solid #d4d2c8; border-radius:7px; background:white; color:var(--ink); }
#apply-crop { background:var(--orange); border-color:var(--ink); font-weight:600; }
#scan-panel:has(#crop-editor:not([hidden])) #take-photo,#upload-panel:has(#crop-editor:not([hidden])) #upload-photo { display:none; }

.paper-header { align-items:center; padding:8px 12px 8px 16px; }
#show-intro { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--muted); font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:600; }
#show-intro:hover { background:var(--paper); color:var(--ink); }
#intro-modal { width:min(540px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:26px 20px 20px; border:2px solid var(--ink); border-radius:18px; background:var(--paper); color:var(--ink); box-shadow:8px 10px 0 #25272033; }
#intro-modal::backdrop { background:#25272099; backdrop-filter:blur(3px); }
body:has(#intro-modal[open]) { overflow:hidden; }
#intro-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(24px,6vw,32px); letter-spacing:-1px; margin:0 0 22px; }
#intro-modal #your-turn { width:100%; min-height:52px; margin:18px 0 0; padding:14px 20px; justify-content:center; gap:10px; background:var(--orange); color:var(--ink); box-shadow:3px 4px 0 var(--ink); font-size:17px; }
#your-turn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }