:root {
    --result-bg:#07080b;
    --result-panel:#0d0e13;
    --result-raised:#15161c;
    --result-line:rgba(255,255,255,.1);
    --result-text:#f5f1e8;
    --result-copy:#d2d0ca;
    --result-muted:#858894;
    --result-faint:#565965;
    --result-accent:#d9a85f;
    color-scheme:dark;
}

* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden; }
body { display:grid;place-items:center;background:#030406;color:var(--result-text);font-family:Inter,system-ui,sans-serif; }
button,a { font:inherit; }
button { border:0;cursor:pointer; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:2px solid #e5bf83;outline-offset:2px; }

.result-shell { position:relative;width:min(100%,520px);height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--result-bg); }
.result-topbar {
    z-index:20;min-height:54px;padding:0 12px;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;
    border-bottom:1px solid var(--result-line);background:rgba(7,8,11,.96);
}
.result-topbar>a,.result-topbar>button {
    width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:transparent;color:var(--result-muted);text-decoration:none;font-size:16px;
}
.result-topbar>div { display:grid;justify-items:center;gap:2px; }
.result-topbar small { color:var(--result-faint);font:700 7.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase; }
.result-topbar strong { font:700 13px/1 "Comic Neue","Comic Sans MS",cursive; }

.result-summary { padding:14px 16px 12px;border-bottom:1px solid var(--result-line);background:var(--result-panel); }
.result-title>span { color:var(--result-accent);font:700 7.5px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase; }
.result-title h1 { margin:6px 0 3px;font:700 22px/1 "Comic Neue","Comic Sans MS",cursive; }
.result-title p { margin:0;color:var(--result-muted);font-size:8.5px;line-height:1.4; }
.result-credits { margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--result-line);border-radius:11px;overflow:hidden;background:#111218; }
.result-credits>span { min-height:42px;padding:8px;display:grid;gap:3px;align-content:center; }
.result-credits>span+span { border-left:1px solid var(--result-line); }
.result-credits strong { font:700 12px/1 Inter,sans-serif; }
.result-credits small { color:var(--result-muted);font-size:7px; }

.result-stage { position:relative;flex:1;min-height:240px;overflow:hidden;background:#08090c;touch-action:none;isolation:isolate; }
#resultCanvas { position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none; }
#resultCanvas.is-panning { cursor:grabbing; }
.result-board-label {
    position:absolute;top:11px;left:12px;z-index:4;padding:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:999px;
    background:rgba(8,9,13,.76);color:rgba(255,255,255,.5);font:700 8px/1 Inter,sans-serif;pointer-events:none;backdrop-filter:blur(8px);
}
.result-board-label i { width:5px;height:5px;margin-right:4px;display:inline-block;border-radius:50%;background:var(--result-accent); }
.result-hint {
    position:absolute;top:47px;left:50%;z-index:4;padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;
    background:rgba(8,9,13,.76);color:var(--result-muted);font:600 8px/1 Inter,sans-serif;transform:translateX(-50%);
    white-space:nowrap;pointer-events:none;transition:.25s ease;
}
.result-hint.is-hidden { opacity:0;transform:translate(-50%,-5px); }
.result-zoom-controls {
    position:absolute;right:12px;bottom:12px;z-index:5;display:flex;overflow:hidden;border:1px solid rgba(255,255,255,.12);
    border-radius:11px;background:rgba(11,12,17,.87);backdrop-filter:blur(9px);
}
.result-zoom-controls button { width:36px;height:36px;background:transparent;color:var(--result-copy);font-size:15px; }
.result-zoom-controls button+button { border-left:1px solid rgba(255,255,255,.09); }

.result-info {
    position:absolute;top:10px;right:10px;left:10px;z-index:15;padding:17px;border:1px solid var(--result-line);
    border-radius:16px;background:rgba(14,15,21,.96);box-shadow:0 22px 55px rgba(0,0,0,.52);backdrop-filter:blur(14px);
}
.result-info[hidden] { display:none; }
.result-info>button { position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;background:var(--result-raised);color:var(--result-muted);font-size:17px; }
.result-info>small { color:var(--result-accent);font:700 8px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase; }
.result-info h2 { margin:7px 0 10px;font:700 20px/1.05 "Comic Neue","Comic Sans MS",cursive; }
.result-info p { margin:0;color:var(--result-copy);font-size:10px;line-height:1.55; }

.result-attribution { min-height:94px;padding:13px 15px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--result-line);background:var(--result-panel); }
.result-attribution-empty { min-height:66px;display:flex;align-items:center;gap:12px;padding:0 6px; }
.result-attribution-empty[hidden] { display:none; }
.result-attribution-empty>i { width:34px;height:34px;flex:0 0 auto;border:1px solid var(--result-line);border-radius:10px;background:linear-gradient(135deg,#f1cf56 0 50%,#5c9ee8 50%);box-shadow:inset 0 0 0 5px var(--result-panel); }
.result-attribution-empty>span,.result-person-copy { display:grid;gap:4px; }
.result-attribution-empty strong { font:700 12px/1 "Comic Neue","Comic Sans MS",cursive; }
.result-attribution-empty small { color:var(--result-muted);font-size:8px; }
.result-attribution-person { min-height:66px;display:grid;grid-template-columns:42px 1fr 30px;align-items:center;gap:11px; }
.result-attribution-person[hidden] { display:none; }
.result-pet {
    position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:13px;
    background:var(--pet-color,#242630);
}
.result-pet img { position:absolute;inset:4px;width:34px;height:34px;object-fit:contain; }
.result-person-copy>small { color:var(--result-accent);font:700 7px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase; }
.result-person-copy>strong { font:700 13px/1.1 "Comic Neue","Comic Sans MS",cursive; }
.result-person-copy>em { color:#f1cf56;font:700 8px/1.2 Inter,sans-serif;font-style:normal; }
.result-person-copy>em[hidden] { display:none; }
.result-person-copy>span { color:var(--result-muted);font-size:8px; }
.result-color { width:25px;height:25px;border:3px solid var(--result-panel);border-radius:8px;background:var(--tile-color);box-shadow:0 0 0 1px rgba(255,255,255,.17); }

@media (max-height:700px) {
    .result-summary { padding-top:10px;padding-bottom:9px; }
    .result-title p { display:none; }
    .result-credits { margin-top:8px; }
}
@media (min-width:700px) {
    .result-shell { height:calc(100dvh - 20px);margin:10px 0;border:1px solid var(--result-line);border-radius:26px;box-shadow:0 35px 90px -30px rgba(0,0,0,.9); }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important;transition:none!important; }
}