*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#26ae98}
#stage{position:fixed;inset:0}
#world{display:block;width:100%;height:100%;touch-action:none;outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button,input,select{font:inherit}
.settings-toggle{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:10;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;border:2px solid #ffebbe;color:#654624;background:linear-gradient(145deg,#ffe5a4,#e4b773);box-shadow:0 4px 0 #926734,0 8px 24px #074b4940,inset 0 1px 0 #fff8dc;cursor:pointer;transition:transform .16s,box-shadow .16s}
.settings-toggle svg{width:27px;height:27px}
.settings-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 0 #926734,0 10px 28px #074b4950,inset 0 1px 0 #fff8dc}
.settings-toggle:active{transform:translateY(3px);box-shadow:0 1px 0 #926734,0 4px 14px #074b4940}
:focus-visible{outline:3px solid #e89c31;outline-offset:4px}
.settings-dialog{font-family:'Segoe UI',Arial,sans-serif;color:#24483e;width:386px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 106px);margin:auto 24px 92px auto;padding:20px;border:1px solid #fff4d6;border-radius:24px;background:#faf5e7;box-shadow:0 22px 80px #063e4a45;overflow:auto}
.settings-dialog::backdrop{background:#063a3c50;backdrop-filter:blur(3px)}
.settings-dialog[open]{animation:settings-in .18s ease-out}
.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.settings-eyebrow{display:block;font-size:10px;letter-spacing:2.8px;font-weight:700;color:#819782;margin-bottom:5px}
.settings-header h1{font-size:26px;line-height:1.1;letter-spacing:-.6px;margin:0;font-weight:700}
.settings-close{border:0;border-radius:50%;width:34px;height:34px;background:#e8ecd9;color:#577061;font-size:25px;line-height:1;cursor:pointer}
.settings-dialog fieldset{padding:0;margin:0 0 14px;border:0;min-width:0}
.settings-dialog legend{padding:0;margin-bottom:8px;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#748779;font-weight:700}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;font-size:14px;font-weight:600;margin-bottom:5px}
.setting-row input[type=number],.setting-row select{border:1px solid #d2dbc8;border-radius:9px;background:#fffaf0;color:#24483e;padding:8px 10px;max-width:148px;font-size:13px}
.setting-row input[type=number]{width:82px}
.seed-field{display:flex;align-items:center;gap:6px}.setting-row .seed-field input[type=number]{width:118px}
.seed-random{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:#e8ecd9;color:#2c7e66;cursor:pointer}
.seed-random:hover{background:#dfe6cc}.seed-random:focus-visible{outline:2px solid #2c7e66;outline-offset:2px}.seed-random svg{width:20px;height:20px}
.setting-range{display:block;margin:7px 0 9px;font-size:14px;font-weight:600}
.setting-range>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
.setting-range output{font-variant-numeric:tabular-nums;font-size:12px;color:#247361;background:#e5ecda;padding:4px 8px;border-radius:6px}
.setting-range input{display:block;accent-color:#2e826a;width:100%;margin:10px 0 3px;height:16px;cursor:pointer}
.range-ends{display:flex;justify-content:space-between;font-size:10px;font-weight:400;color:#899784}
.settings-note{font-size:11px;line-height:1.6;color:#84917d;margin:10px 0 0}
.setting-switch{appearance:none;position:relative;width:38px;height:22px;border:0;border-radius:20px;background:#c6cdbb;cursor:pointer;flex-shrink:0;transition:background .15s}
.setting-switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fffaf0;box-shadow:0 1px 3px #24483e30;transition:transform .15s}
.setting-switch:checked{background:#2e826a}.setting-switch:checked::after{transform:translateX(16px)}
.settings-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #e3e6d5;padding-top:12px}
.settings-footer>div{display:flex;gap:7px}
.settings-footer button{border:0;border-radius:10px;cursor:pointer;font-size:12px;font-weight:600;padding:10px 12px}
.settings-defaults{color:#798b79;background:transparent;padding-left:0!important}
.settings-cancel{background:#e8ecd9;color:#617765}.settings-apply{background:#2c7e66;color:#fff9e8;box-shadow:0 2px 0 #1f584a}
.settings-apply:hover{background:#236c57}.settings-apply:disabled{opacity:.6;cursor:wait}
.settings-error{color:#ae6144;font-size:12px;line-height:1.4;margin:0 0 10px}.settings-error:empty{display:none}
.game-rules{margin:16px 0;padding:12px;border:1px solid #ded7e5;border-radius:12px;background:#f3edf8;font-size:12px;line-height:1.6;color:#554265}.game-rules summary{font-weight:700;cursor:pointer;font-size:14px}.game-rules p{margin:10px 0 0}.grape-records{padding-top:8px!important}.record-row{display:flex;justify-content:space-between;gap:12px;margin:8px 0;font-size:12px}.record-row strong{color:#8159a1;white-space:nowrap}
@keyframes settings-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.settings-toggle{right:16px;bottom:max(18px,env(safe-area-inset-bottom));width:50px;height:50px;border-radius:16px}.settings-dialog{width:calc(100vw - 24px);margin:auto auto max(84px,calc(env(safe-area-inset-bottom) + 74px)) auto;max-height:calc(100dvh - 108px);padding:20px}.settings-header{margin-bottom:18px}.settings-dialog fieldset{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.settings-dialog[open]{animation:none}.settings-toggle,.setting-switch,.setting-switch::after{transition:none}}