*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#071d22;color:#fff;font-family:Arial,sans-serif;display:grid;place-items:center}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}#game{--ink:#144b44;--surface:#f9f1d8;--accent:#ffb847;--edge:#9d6327;width:min(100vw,56.25dvh);height:min(100dvh,177.78vw);position:relative;overflow:hidden;background:center/cover var(--background);isolation:isolate}#game.onepiece{--ink:#183d63;--surface:#fbebce;--accent:#ef9d3a;--edge:#734025}header{position:absolute;top:1.5%;left:4%;width:92%;z-index:2;display:flex;align-items:center;justify-content:space-between;text-shadow:0 2px 3px #0008}header h1{margin:2px 0 0;font-size:clamp(18px,3dvh,30px);font-weight:900;color:#fff2b5;font-style:italic}header small{font-size:clamp(8px,1dvh,11px);letter-spacing:2px}header a,header button{width:32px;height:32px;background:#083b48cc;border:1px solid #eecd8a;border-radius:50%;color:#ffe3a3;text-decoration:none;display:grid;place-items:center}#horizon{position:absolute;top:16%;width:100%;text-align:center;font-size:clamp(9px,1.3dvh,13px);font-weight:800;letter-spacing:2px;text-shadow:0 2px 4px #003644}#ladder{position:absolute;left:5%;width:90%;top:8.4%;padding:0;display:flex;gap:3px;list-style:none;z-index:2}#ladder li{flex:1;background:#12374ddd;border:1px solid #eed09b;color:#fff3c4;padding:5px 0;font-size:clamp(10px,1.6dvh,15px);text-align:center;border-radius:5px;font-weight:900}#ladder .passed{background:#e9aa38;color:#3d2912}#scene{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.panel{position:absolute;left:7%;width:86%;z-index:3;background:var(--surface);color:var(--ink);border:3px solid var(--edge);border-radius:26px;box-shadow:0 7px 0 #38241a66,0 10px 35px #001e3855;text-align:center;padding:3% 5%}#menu{top:29%;bottom:16%;display:flex;flex-direction:column;justify-content:center;gap:1.5%}.sprite{display:block;background-image:var(--sprites);background-size:300% 200%;background-repeat:no-repeat;aspect-ratio:1}.mascot{background-position:0 0;width:34%;margin:-21% auto -2%;filter:drop-shadow(0 4px 4px #0002)}h2{font-size:clamp(16px,2.5dvh,23px);margin:0 0 4px}#story{margin:0 auto 2%;max-width:260px;font-size:clamp(10px,1.5dvh,14px);line-height:1.35}.bet-label{font-size:clamp(9px,1.3dvh,12px);font-weight:900;letter-spacing:1px}.bet-row{display:flex;justify-content:center;align-items:center;gap:8px}.bet-row button{width:34px;height:34px;border:2px solid var(--edge);border-radius:9px;color:var(--ink);background:#f9ca69;font-size:24px}.bet-row input{width:50%;border:0;background:transparent;text-align:center;font-size:clamp(22px,4dvh,38px);font-weight:900;color:var(--ink);appearance:textfield}.bet-row input::-webkit-inner-spin-button{display:none}.extra{display:flex;align-items:center;gap:8px;justify-content:center;padding:8px;background:#ead5a7;border-radius:9px;font-size:clamp(10px,1.45dvh,13px)}.extra input{accent-color:var(--ink);width:18px;height:18px}.extra b{background:var(--ink);color:white;padding:3px;border-radius:4px}#cost{font-size:clamp(10px,1.5dvh,14px)}.primary,.secondary{border-radius:10px;padding:10px 6px;font-weight:900;font-size:clamp(11px,1.8dvh,17px);border:2px solid var(--edge);color:var(--ink);width:100%;background:linear-gradient(#ffdc80,#eba233);box-shadow:0 3px 0 #80541c}.secondary{background:#fff5dc;box-shadow:none;padding:6px;font-size:clamp(10px,1.4dvh,13px)}#choices{top:60%;bottom:15.5%;display:flex;flex-direction:column;justify-content:center;gap:8px;border-radius:18px}#stepLabel{font-size:clamp(10px,1.5dvh,15px);margin:0;font-weight:bold}.direction-row{display:flex;gap:5px}.direction-row button{background:#276f78;color:#fff7cc;border:2px solid #e1b04a;border-radius:12px;flex:1;font-size:clamp(22px,3.5dvh,34px);padding:4px}.direction-row small{display:block;font-size:clamp(7px,1.1dvh,10px);letter-spacing:.3px}footer{position:absolute;bottom:0;height:13%;width:100%;background:linear-gradient(#163d42e8,#08242d);border-top:3px solid #c3a056;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center;padding:6px 5%;z-index:3}footer small{display:block;font-size:clamp(8px,1.1dvh,11px);letter-spacing:1px;color:#ecd6a4}footer strong{font-size:clamp(16px,2.4dvh,23px);color:#fff1c3}footer nav{grid-column:span 2;display:flex;justify-content:space-between}footer button{border:0;background:none;color:#e6d7b1;font-size:clamp(10px,1.4dvh,13px);padding:3px 8px}#toast{position:absolute;top:19%;left:10%;width:80%;z-index:2;padding:8px;text-align:center;background:#073d54d9;border-radius:10px;font-size:clamp(10px,1.5dvh,14px);color:#fff6ce;min-height:28px}#toast:empty{display:none}dialog{position:absolute;inset:0;margin:auto;width:min(86vw,48dvh);max-height:90%;overflow:auto;background:var(--surface);color:var(--ink);border:3px solid var(--edge);border-radius:24px;box-shadow:0 12px 45px #001c41aa;padding:24px;text-align:center}dialog::backdrop{background:#002132a6}dialog h2{margin:10px 0}dialog p{font-size:14px;line-height:1.5}#result .sprite{width:62%;margin:auto;background-position:100% 0}#result.lost .sprite{background-position:0 0}#result strong{display:block;font-size:clamp(26px,5dvh,48px);font-weight:900;color:#b35a14;margin:10px 0}#closeInfo{float:right;background:none;border:0;font-size:26px}#infoBody{text-align:left;font-size:13px;line-height:1.5}#infoBody table{border-collapse:collapse;width:100%;font-size:12px}td,th{border-bottom:1px solid #bca87d;padding:7px}#autoDialog label{display:block;text-align:left;margin:14px 0}select{display:block;width:100%;padding:9px;margin-top:4px}#loading{position:absolute;inset:0;background:var(--ink);z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center}#loading .sprite{width:50%;margin:0}#loading p{font-weight:bold}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#result.completed .sprite{background-position:100% 100%}
/* Consistent, themed rules and history sheets. */
#info{color:#fff2cf;background:radial-gradient(ellipse at top,#194d48,#061f29 80%);border:2px solid #d8b76a;border-radius:20px;padding:26px 22px;max-width:min(92vw,620px);max-height:85dvh;box-shadow:0 24px 80px #000b;overflow:auto}#info::backdrop{background:#00171dc9;backdrop-filter:blur(5px)}#info h2{color:#ffe4a0;border-bottom:1px solid #d8b76a66;padding:0 32px 16px 0;margin-top:0;font-size:1.45rem}#info #close,#info .close{position:sticky;float:right;top:0;width:36px;height:36px;border-radius:50%;background:#153c3c;border:1px solid #d8b76a;color:#ffe4a0;font-size:24px}#info table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}#info th{color:#e8cf8e;font-size:.8em;text-transform:uppercase;letter-spacing:.04em}#info td,#info th{padding:12px 8px;border-bottom:1px solid #d8b76a30}#info tr:nth-child(even){background:#ffffff06}#info td:not(:first-child),#info th:not(:first-child){text-align:right}#info p{line-height:1.65}#info button:focus-visible{outline:3px solid #fff0b8;outline-offset:3px}

#info{width:min(88vw,580px)}