:root{--cream:#fff5e6;--ink:#463339;--mint:#a9dec0;--pink:#e94479;--shade:#755247;--line:#d8bc96;--soft:#fae6d1;font-family:"Baloo 2","Nunito",system-ui,"Noto Sans",sans-serif;color:var(--ink);background:#f4dbc5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 10%,#fff9ec,transparent 65%),linear-gradient(145deg,#f2c8ce,#bce6cd);min-height:100vh;min-height:100dvh}button,input,select{font:inherit}button,select{min-height:44px;border:2px solid var(--line);border-radius:15px;background:var(--cream);color:var(--ink);padding:8px 15px;cursor:pointer;font-weight:750;box-shadow:0 3px 0 #b899793b}button:hover{background:#fff}button:active{transform:translateY(2px);box-shadow:none}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #a62659;outline-offset:3px}button.primary{background:var(--pink);border-color:#b73260;color:#fff}button[aria-pressed=true]{border-color:#a62659;background:#f9cfdf}button.primary[aria-pressed=true]{background:var(--pink)}[hidden]{display:none!important}#app{max-width:1000px;margin:auto;padding:12px max(12px,env(safe-area-inset-right)) 18px}header{display:flex;gap:12px;align-items:center;margin:0 0 10px}header a{font-size:25px;text-decoration:none;color:var(--pink)}header div{flex:1;min-width:0}h1{font-size:clamp(17px,3vw,27px);line-height:1.1;margin:0}small{display:block;font-size:13px;line-height:1.3}h2{line-height:1.2;margin:8px 0 15px;font-size:26px}.hud{display:flex;gap:15px;align-items:center;padding:6px 18px;background:var(--cream);border:2px solid var(--line);border-radius:18px 18px 0 0;min-height:62px}.hud img{width:42px;height:45px;object-fit:contain}.hud div{flex:1}.hud span{font-size:14px}.field{position:relative;background:#b9dec0;border:3px solid var(--shade);border-top-width:2px;border-radius:0 0 23px 23px;overflow:hidden;box-shadow:0 8px 0 #684c3722}canvas{display:block;width:100%;aspect-ratio:3/2;touch-action:none;outline-offset:-5px!important}#toast{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);pointer-events:none;background:#fff5e6ed;border-radius:12px;max-width:90%;padding:4px 12px;font-weight:800;text-align:center;font-size:14px}#toast:empty{display:none}.console{margin-top:12px;padding:12px 18px;background:#fff5e6de;border:2px solid var(--line);border-radius:22px}.console p{margin:0 0 8px;min-height:24px;font-weight:700}.shot{display:flex;gap:18px;align-items:center}.shot label{flex:1;min-width:0;font-size:14px}.shot output{float:right;font-variant-numeric:tabular-nums}.shot input{width:100%;display:block;accent-color:var(--pink);min-height:38px}.shot button{min-width:100px}.utility{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}.utility button{font-size:13px;padding:5px 10px}.utility span{margin-left:auto;font-size:12px;opacity:.75}.modes{display:flex;gap:10px;margin:10px 0}.modes>*{flex:1;min-width:0}.modes label{display:flex;gap:8px;align-items:center}dialog{width:min(620px,calc(100% - 20px));max-height:calc(100dvh - 24px);border:3px solid var(--shade);border-radius:25px;padding:24px;color:var(--ink);background:var(--cream);box-shadow:0 18px 70px #58362c55;overflow:auto}dialog::backdrop{background:#38302880;backdrop-filter:blur(5px)}#menu{padding:0;max-width:760px;width:min(760px,calc(100% - 20px))}.cover{height:210px;background:url('cover.webp') center 64%/cover}.menucontent{padding:20px 26px}.menucontent h2{margin-bottom:4px}.menucontent p{font-size:14px;line-height:1.4;margin:9px 0}.menucontent>button{width:100%}.settings{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.settings button,.settings select{font-size:13px;padding:7px 10px}.settings select{max-width:180px}#names{display:grid;grid-template-columns:1fr 1fr;gap:8px}#names label{display:flex;gap:6px;align-items:center;font-size:13px}#names input{width:100%;min-width:0;height:44px;padding:8px;border:2px solid var(--line);border-radius:12px;background:white;color:var(--ink)}#skins{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}#skins button{display:flex;align-items:center;gap:6px;font-size:12px;padding:6px}#skins img{height:42px;width:42px;object-fit:contain}#handoff{text-align:center}#handoff>img{width:100px;height:105px;object-fit:contain}#handoff button{margin:10px 4px 0}table{width:100%;border-collapse:collapse;font-size:14px;text-align:left;margin:12px 0}th,td{padding:7px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}table img{height:28px;vertical-align:middle;margin-right:7px}#recap{text-align:center;margin:15px 0;padding:18px;border:2px solid var(--line);border-radius:22px;background:var(--cream)}#recap>img{width:90px;height:90px;object-fit:contain}#recap button{margin:8px}#helpdialog p{line-height:1.6;font-size:15px}#app[data-motion=true] #recap>img{animation:celebrate .6s ease-out}@keyframes celebrate{0%{transform:scale(.6) rotate(-20deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1)}}@media(min-width:1100px){#app{max-width:890px}.cover{height:245px}}@media(max-width:540px){#app{padding:8px}header{gap:8px}header small{font-size:11px}header button{font-size:12px;padding:6px 10px}.hud{padding:5px 9px;gap:8px}.hud strong{font-size:13px}.hud small,.hud span{font-size:11px}.hud img{width:30px;height:36px}.console{padding:10px}.shot{gap:10px}.shot label{font-size:12px}.shot button{min-width:64px;padding:8px}.utility span{width:100%;text-align:right}.cover{height:145px}.menucontent{padding:15px}.menucontent h2{font-size:23px}#skins{gap:5px}#skins button{font-size:10px}.modes{gap:7px}.modes button{font-size:13px;padding:7px 10px}.settings{gap:6px}.settings button{font-size:12px}dialog{padding:18px}table{font-size:12px}}@media(max-height:500px) and (orientation:landscape){#app{max-width:750px}header small{display:none}.hud{min-height:44px}canvas{max-height:58vh;object-fit:contain;background:#ecd5b7}.console{margin-top:8px;padding:8px}dialog .cover{height:100px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-height:500px) and (orientation:landscape){.field{width:min(100%,87vh);margin-inline:auto}canvas{max-height:none;object-fit:initial}}