:root{color-scheme:dark;--cream:#fff3d0;--gold:#ffd264;--ink:#123e32}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#082b25;font-family:'Trebuchet MS',Arial,sans-serif;color:var(--cream)}[hidden]{display:none!important}button,input,a{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #fff1a1;outline-offset:3px}a{color:var(--gold)}.arena{height:100dvh;max-width:1200px;margin:auto;padding:18px 28px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 25%,#387958,#123e32 65%);position:relative;overflow:hidden}header{display:flex;align-items:center;gap:14px;min-height:48px;flex-shrink:0}.icon{width:42px;height:42px;display:grid;place-items:center;background:#245a43;color:var(--cream);border:2px solid #7da66b;border-radius:12px;text-decoration:none;font-size:22px;box-shadow:0 3px #082a22}.identity{flex:1}.identity small{color:var(--gold);letter-spacing:3px;font-size:9px}h1{font-size:22px;margin:3px 0}h2,p{margin:0}.intro,.finish{margin:auto;text-align:center;max-width:510px;max-height:calc(100% - 55px);overflow:auto;padding:18px 16px}.emblem{display:grid;place-items:center;margin:0 auto 18px;width:100px;height:100px;border:5px solid #e5a944;border-radius:28px;background:linear-gradient(135deg,#ffe798,#eab74e);box-shadow:0 8px #8b612b,0 0 80px #ffe07729;color:#785022;font-size:60px;font-weight:bold;transform:rotate(-7deg)}.eyebrow{font-size:10px;color:var(--gold);letter-spacing:2px;margin:18px 0 12px}.intro h2,.finish h2{font-size:38px;text-shadow:0 3px #153d2b;margin:8px 0 18px}.intro>p:not(.eyebrow),.finish>p:not(.eyebrow){font-size:15px;line-height:1.6;color:#d9e4c2}.missions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:20px 0}.missions span{padding:10px 12px;border:1px solid #77a36b;background:#173f31;border-radius:10px;font-size:12px}.snapshot{font-size:11px!important;margin:20px 0!important;color:#c4d5b4!important}.primary{display:block;width:100%;background:linear-gradient(#ffe48d,#f1bd4d);color:#543a18;border:2px solid #ffe3a1;border-radius:13px;box-shadow:0 5px #9d692c;padding:14px;font-weight:bold;font-size:18px;text-decoration:none}.primary:active{transform:translateY(2px);box-shadow:0 3px #9d692c}.secondary{display:block;background:transparent;color:var(--cream);padding:12px;width:100%;border:1px solid #82a16b;border-radius:10px;margin-top:13px;text-decoration:none;text-align:center}.record{font-size:11px!important;margin:20px 0 0;color:#eac976!important}.game{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:12px;gap:12px}.hud{display:flex;justify-content:space-between;gap:20px;flex-shrink:0}.hud>div{display:flex;flex-direction:column;gap:3px}.hud>div:last-child{text-align:right}.hud small{font-size:9px;color:#cad8ac;letter-spacing:2px}.hud strong{font-size:25px;color:#ffe49e}#hearts{color:#ffb6a0;letter-spacing:5px}.goal{font-size:11px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px;flex-shrink:0}.track{height:8px;background:#0b2b22;border-radius:10px;width:100%;overflow:hidden}.track i{display:block;height:100%;background:linear-gradient(90deg,#bedf83,#ffda6d);transition:width .4s}.combo-ready{color:#ffdd74;text-shadow:0 0 12px #ffe389}.playfield{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;flex:1;min-height:0;padding:8px 0 14px}.display{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:20px;background:linear-gradient(#fff7e3,#ead9ad);border:7px solid #be893d;border-radius:25px;box-shadow:inset 0 0 0 2px #ffe79e,0 6px #775028;color:var(--ink);text-align:center;position:relative}.badge{font-size:9px;font-weight:bold;letter-spacing:1px;flex-shrink:0}.photo-wrap{position:relative;min-height:0;flex:1;width:100%;display:flex;align-items:center;justify-content:center;margin:12px 0}.photo-wrap img{height:100%;width:100%;max-height:400px;object-fit:contain;border-radius:18px;background:white}.photo-wrap>span{position:absolute;right:0;bottom:12px;padding:10px 20px;background:#ffd566;color:#5b3d22;border:3px solid #fff1bc;border-radius:8px;box-shadow:0 4px #95672c;transform:rotate(-7deg);font-size:26px;font-weight:bold}.display h2{font-size:28px;margin:4px 0 6px}.display>p{font-size:13px;line-height:1.4}.credit{margin-top:10px;font-size:9px;color:#5a7353}.controls{display:flex;flex-direction:column;justify-content:center;min-height:0;max-width:440px;width:100%;margin:auto}form label{display:block;font-weight:bold;font-size:18px;margin-bottom:12px;letter-spacing:2px}.entry{display:flex;align-items:center;border:2px solid #849c65;border-radius:13px;background:#fff9e8;color:var(--ink);height:58px;padding:8px 15px;gap:10px}.entry>span{font-size:27px}.entry input{color:var(--ink);background:transparent;border:0;width:100%;min-width:0;font-size:32px;font-weight:bold;outline-offset:0}.entry button{border:0;background:transparent;color:#355f42;font-size:25px;padding:4px}#error{min-height:18px;font-size:11px;color:#ffc4a4;margin:7px 0}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.pad button{height:48px;border:2px solid #c0d098;border-radius:11px;background:linear-gradient(#fff7dd,#e8e6bd);box-shadow:0 4px #7b8859;color:var(--ink);font-weight:bold;font-size:27px}.pad button:active{transform:translateY(2px);box-shadow:0 2px #7b8859}.pad button[data-value=C],.pad button[data-value="00"]{background:#487653;color:#fff2cb;border-color:#95ac77}.hint{display:block;background:transparent;color:#f8dda0;border:0;font-size:12px;margin:18px auto 0;padding:3px}.hint:disabled{opacity:.55}.hint-text{font-size:11px;text-align:center;min-height:24px;margin-top:6px;line-height:1.4}.result h2{font-size:30px;margin:0 0 18px}.receipt{border:2px dashed #bca46b;border-radius:14px;padding:18px;background:#fff7df;color:var(--ink);text-align:center}.receipt small{font-size:10px;letter-spacing:2px}.receipt strong{font-size:42px;display:block;margin:8px 0}.receipt p{font-size:13px}.receipt>span{display:block;color:#487a39;font-weight:bold;margin-top:15px}#feedback{font-size:13px;margin:18px 0;line-height:1.5}.result>a{font-size:12px}.source-note{display:block;font-size:10px;color:#d5dfbe;margin:6px 0 20px;line-height:1.4}.finish-score{display:block;font-size:42px;color:var(--gold);margin:16px 0}.finish details{margin:25px 0;text-align:left;font-size:12px}.finish details p{margin:12px 0;line-height:1.5}.finish summary{cursor:pointer}dialog{border:2px solid #c3a65e;border-radius:20px;background:#153e32;color:var(--cream);max-width:380px;width:90%;padding:28px}dialog::backdrop{background:#031c18cc;backdrop-filter:blur(6px)}dialog h2{margin-bottom:15px}dialog p{font-size:14px;line-height:1.6;margin-bottom:24px}.storage-note{position:absolute;bottom:4px;left:5px;right:5px;font-size:9px;text-align:center;background:#533823;padding:5px;border-radius:5px}.celebrate{animation:celebrate .45s ease-out}.miss{animation:miss .3s ease-out}@keyframes celebrate{50%{box-shadow:0 0 55px #ffdc75;transform:scale(1.015)}}@keyframes miss{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media(max-width:650px) and (orientation:portrait){.arena{padding:10px 14px}.game{padding-top:10px;gap:8px}.hud strong{font-size:20px}.hud small{font-size:8px}.playfield{grid-template-columns:1fr;grid-template-rows:minmax(0,.85fr) minmax(0,1.15fr);gap:13px;padding-bottom:4px}.display{padding:8px 12px;border-width:4px;border-radius:16px}.photo-wrap{margin:4px 0;min-height:35px}.badge{font-size:7px}.display h2{font-size:20px;margin:2px 0}.display>p{font-size:10px}.credit{font-size:7px;margin-top:3px}.photo-wrap>span{font-size:17px;padding:5px 12px;bottom:6px}.controls{height:100%;max-width:420px;justify-content:center}form label{font-size:12px;margin-bottom:6px}.entry{height:40px;padding:4px 10px}.entry input{font-size:25px}#error{font-size:9px;min-height:11px;margin:3px 0}.pad{gap:6px;margin-bottom:10px}.pad button{height:clamp(24px,4dvh,40px);font-size:22px;border-radius:7px;border-width:1px;box-shadow:0 2px #7b8859}.controls .primary{font-size:14px;padding:9px;border-radius:8px}.hint{font-size:10px;margin-top:11px}.hint-text{font-size:9px;min-height:12px;margin-top:3px}.result h2{font-size:23px;margin-bottom:10px}.receipt{padding:9px}.receipt strong{font-size:29px;margin:5px 0}.receipt small{font-size:8px}.receipt p{font-size:10px}.receipt>span{font-size:12px;margin-top:7px}#feedback{font-size:11px;margin:10px 0}.source-note{font-size:8px;margin-bottom:10px}.result>a{font-size:10px}.intro h2,.finish h2{font-size:30px}.emblem{width:75px;height:75px;font-size:45px}.intro>p:not(.eyebrow){font-size:13px}.missions{margin:15px 0}.missions span{font-size:10px;padding:8px}.snapshot{font-size:10px!important;margin:14px 0!important}}
@media(max-height:610px){.arena{padding:8px 14px}header{min-height:35px}.icon{width:32px;height:32px;font-size:18px}.identity small{font-size:7px}h1{font-size:17px}.game{gap:6px;padding-top:6px}.hud strong{font-size:17px}.hud small{font-size:7px}.goal{font-size:9px;gap:5px}.track{height:5px}.intro,.finish{padding:8px}.intro .emblem,.finish .emblem{height:55px;width:55px;font-size:32px;margin-bottom:12px}.intro h2,.finish h2{font-size:26px;margin:10px 0}.intro .eyebrow{margin:14px 0 8px}.intro>p:not(.eyebrow){font-size:12px}.intro .missions{margin:12px 0}.intro .snapshot{margin:12px 0!important;font-size:9px!important}.intro .primary{padding:10px;font-size:15px}.record{margin-top:12px!important}}
@media(orientation:landscape) and (max-height:610px){.playfield{gap:24px;padding:3px 0 8px}.display{padding:9px;border-width:4px;border-radius:16px}.badge{font-size:7px}.photo-wrap{margin:4px 0}.display h2{font-size:21px;margin:2px}.display>p{font-size:9px}.credit{font-size:7px;margin-top:3px}.photo-wrap>span{font-size:16px;padding:5px 12px;bottom:3px}.controls{max-width:370px}form label{font-size:11px;margin-bottom:4px}.entry{height:32px;padding:2px 8px}.entry input{font-size:23px}.entry>span,.entry button{font-size:21px}#error{font-size:8px;min-height:9px;margin:3px 0}.pad{gap:5px;margin-bottom:8px}.pad button{height:24px;font-size:18px;border-radius:6px;border-width:1px;box-shadow:0 2px #7b8859}.controls .primary{font-size:12px;padding:7px}.hint{font-size:8px;margin:10px auto 0}.hint-text{font-size:8px;min-height:10px;margin-top:2px}.result h2{font-size:20px;margin-bottom:8px}.receipt{padding:8px}.receipt strong{font-size:27px;margin:4px 0}.receipt small{font-size:7px}.receipt p{font-size:9px}.receipt>span{font-size:11px;margin-top:6px}#feedback{font-size:10px;margin:9px 0}.source-note{font-size:8px;margin-bottom:9px}.result>a{font-size:10px}}
@media(orientation:portrait) and (max-width:650px) and (max-height:610px){.playfield{grid-template-rows:minmax(0,1fr) 290px}.display{display:grid;grid-template-columns:.8fr 1fr;grid-template-rows:auto 1fr auto;gap:4px}.badge{grid-column:1/-1}.photo-wrap{grid-column:1;grid-row:2/4;height:100%;margin:0;min-height:20px}.display h2{grid-column:2;grid-row:2;align-self:end;font-size:18px}.display>p{grid-column:2;grid-row:3;align-self:start;font-size:9px}.credit{display:none}.photo-wrap>span{font-size:13px;padding:4px 7px;right:-5px;bottom:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}