.about-page{min-height:100vh;background:radial-gradient(ellipse at 73% 53%,#39231b 0%,#1c1715 32%,#121110 68%)}
.about-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr);align-items:center;gap:32px;min-height:calc(100vh - 77px);padding-block:27px 32px}
.about-copy h1{font-size:clamp(4.4rem,8vw,8.2rem);line-height:.85;margin:24px 0 20px}
.about-copy h1 span,.about-copy strong{color:var(--orange)}
.about-copy p{color:#d7c7bb;line-height:1.55;max-width:32ch}
.back-link{color:#edab80;font-size:.86rem}
.back-link:hover{text-decoration:underline}
#arcade-profile dl{display:flex;gap:clamp(16px,4vw,44px);margin:24px 0 16px}
#arcade-profile dl div{padding-top:10px;border-top:1px solid #886249;display:grid;gap:4px}
#arcade-profile dl dt{color:#e3cabb;font-size:.78rem;grid-row:2}
#arcade-profile dl dd{margin:0;color:#ff9f69;font:800 2.8rem/.85 var(--display)}
.arcade-figure{margin:0;min-width:0}
.arcade-stage{position:relative;display:grid;place-items:center;isolation:isolate;min-height:330px;height:min(68vw,620px)}
.arcade-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.arcade-stage[data-ready] canvas{opacity:1;cursor:grab;touch-action:none}
.arcade-stage[data-ready] canvas:active{cursor:grabbing}
.arcade-stage[data-start] canvas{cursor:pointer}
.arcade-stage[data-ready] .arcade-fallback{visibility:hidden}
.arcade-stage::before{content:'';position:absolute;inset:10% 5% 4%;z-index:-1;background:radial-gradient(ellipse at 50% 79%,#9159333b,transparent 60%);pointer-events:none}
.arcade-caption{display:flex;align-items:center;justify-content:center;gap:12px;color:#c4a898;font-size:.81rem}
#arcade-start{padding:6px 16px;min-height:42px;background:#f99157;border:1px solid #ffbd8a;border-radius:5px;color:#2a170e;font:800 1.2rem var(--display);letter-spacing:.1em;cursor:pointer}
.arcade-caption #sfx-toggle{min-height:42px;border:1px solid #6b4b3b;border-radius:5px;background:#241a16;cursor:pointer}
.arcade-fallback{width:min(74%,300px);border:2px solid #ac7152;border-radius:10px;background:linear-gradient(128deg,#4e352a,#251d1a);padding:10px;box-shadow:15px 8px 0 #271c17}
.arcade-fallback strong,.arcade-fallback span{display:block;background:#724029;text-align:center;padding:6px;font:800 1.2rem var(--display);color:#ffc18c}
#arcade-fallback-display{display:grid;place-items:center;text-align:center;white-space:pre-line;min-height:130px;margin:8px 0;border:5px solid #14100e;border-radius:12% / 8%;background:#281816;color:#ffc494;font:800 1.2rem var(--display)}
@media(max-width:720px){.about-layout{grid-template-columns:1fr;gap:8px;padding-block:25px 35px}.about-copy h1{font-size:clamp(3.5rem,15vw,6rem);margin:15px 0}.arcade-stage{height:min(104vw,490px)}}

.arcade-disc{display:grid;gap:4px;justify-items:center;padding:4px 8px;border:1px solid #664635;border-radius:6px;background:#221916;color:#f7c49d;cursor:grab;touch-action:none;user-select:none;font:600 .76rem var(--body)}
.arcade-disc span,.disc-ghost{display:block;width:48px;aspect-ratio:1;border-radius:50%;border:1px solid #ebb183;background:radial-gradient(circle,#211417 0 8%,#e8a77a 10% 12%,transparent 13%),repeating-radial-gradient(circle,transparent 0 3px,#fff1 4px 5px),conic-gradient(#342637,#e48650,#5c413b,#d09e8e,#342637);box-shadow:0 3px 9px #0e0808}
.arcade-disc.disc-moving span{opacity:.28}
.disc-ghost{position:fixed;top:0;left:0;z-index:20;width:63px;pointer-events:none;box-shadow:0 0 22px #f78b5377}
.arcade-slot{position:absolute;z-index:2;left:50%;top:66%;translate:-50% -50%;padding:3px 7px;min-height:25px;white-space:nowrap;border:1px solid #c98558;border-radius:4px;background:#2b1c18e8;color:#ffc69b;font:700 .61rem ui-monospace,monospace;cursor:pointer}
.arcade-slot.slot-away{visibility:hidden}
.disc-dragging .arcade-slot{background:#ffd2aa;color:#351d16;box-shadow:0 0 19px #ff864a}
.disc-loaded .arcade-slot{opacity:.35}
.arcade-hint{text-align:center;min-height:2.2em;margin:9px auto 0;color:#dcc2b0;font-size:.82rem}
#arcade-start:disabled,.arcade-disc:disabled{opacity:.53;cursor:default}
.arcade-fallback{cursor:grab;touch-action:none;user-select:none;transform:perspective(640px) rotateY(-8deg)}
.arcade-fallback:active{cursor:grabbing}
