html,body{margin:0;height:100%;background:#060b18;overflow:hidden}
.scene{position:fixed;inset:0;overflow:hidden;background:#060b18;color:#d9c3a0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Piksel sahne. Yaklaşınca yeni ayrıntı çıkmaz; yalnız pikseller büyür. */
#night{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:var(--ox,50%) var(--oy,50%);transition:transform 1.6s cubic-bezier(.3,.1,.2,1)}
.leaning #night{transform:scale(1.9)}

.backlink{position:absolute;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));font:400 11px/1 "DM Mono",monospace;color:rgba(233,222,204,.4);text-decoration:none;letter-spacing:.04em;padding:6px 0}
.backlink:hover,.backlink:focus-visible{color:rgba(245,236,220,.9)}

.tool,.panel button{font:400 12px/1 "Pixelify Sans","DM Mono",monospace;background:none;border:0;color:rgba(233,222,204,.45);cursor:pointer;padding:6px 4px;letter-spacing:.03em}
.tool{position:absolute;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:34px;padding:8px 10px;border:1px solid rgba(255,226,172,.48);background:rgba(6,10,20,.76);color:rgba(255,231,190,.88);box-shadow:2px 2px 0 rgba(0,0,0,.22)}
.tool:hover,.tool:focus-visible,.tool[aria-expanded="true"]{color:rgba(255,246,225,1);border-color:rgba(255,232,188,.9);background:rgba(25,28,47,.9)}
.sound-cue{position:absolute;z-index:2;left:50%;top:calc(18px + env(safe-area-inset-top));transform:translateX(-50%);padding:9px 12px 8px;border:1px solid rgba(255,223,158,.68);background:rgba(6,10,20,.84);box-shadow:3px 3px 0 rgba(0,0,0,.28);color:#ffe7b7;font:400 13px/1 "Pixelify Sans","DM Mono",monospace;letter-spacing:.04em;cursor:pointer;transition:opacity .3s,transform .3s,background .2s}
.sound-cue:hover,.sound-cue:focus-visible{background:rgba(31,31,52,.95);border-color:#fff0c8}
.sound-cue.is-hidden{opacity:0;transform:translate(-50%,-8px);pointer-events:none}
.panel{position:absolute;left:12px;bottom:calc(44px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);box-sizing:border-box;padding:10px 12px;background:rgba(6,10,20,.86);border:1px solid rgba(255,230,190,.14);color:rgba(233,222,204,.5);font:400 12px/1 "Pixelify Sans","DM Mono",monospace}
.panel[hidden]{display:none}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:3px 0}
.row span{width:52px;color:rgba(233,222,204,.35)}
.panel button:hover,.panel button:focus-visible{color:rgba(255,236,200,.95)}
.panel button[aria-pressed="true"]{color:#ffe2a8;text-decoration:underline;text-underline-offset:4px}

.mix{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:6px 0}
.mix label{display:flex;align-items:center;gap:6px}
.mix span{width:44px;color:rgba(233,222,204,.35)}
.mix input{flex:1;min-width:60px;accent-color:#e8b878;height:14px}
.credit{margin:6px 0 0;font-size:11px;color:rgba(233,222,204,.4)}
.credit:empty{display:none}
.credit a{color:inherit}
.panel{max-height:calc(100vh - 80px);overflow-y:auto;width:min(440px,calc(100vw - 24px))}

@media (prefers-reduced-motion:reduce){#night{transition:none}}