:root{--navy:#102b46;--navy-dark:#081a2b;--sky:#0c9ce7;--cream:#fff3c5;--yellow:#ffd335;--accent:#ed413e;--shadow:#051d38}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto}
body{background:radial-gradient(circle at 50% 28%,#1d8acc 0,#0c4b82 38%,#071d36 100%);color:white;font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;touch-action:manipulation}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:4px}
.hidden{display:none!important}.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}
.layout{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;min-height:100dvh;padding:12px 16px 44px;max-width:100vw}
.game-frame{aspect-ratio:560/1024;width:min(560px,calc((100dvh - 24px)*560/1024),calc(100vw - 32px));height:auto;position:relative;overflow:hidden;background:#1ba0ec;border:5px solid #061b31;outline:2px solid #4588bd;box-shadow:0 0 0 5px #244c70,0 22px 60px #00152bb8;isolation:isolate;user-select:none;touch-action:none;flex:0 0 auto}
#gameCanvas{width:100%;height:100%;display:block;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.screen-cover{position:absolute;inset:0;background:url('../assets/cover.png') center center/100% 100% no-repeat;image-rendering:pixelated;z-index:6;animation:appear .25s ease}
.cover-play-hit{position:absolute;left:15%;top:72%;width:77%;height:16.5%;border:0;background:transparent;border-radius:22px;transform-origin:50% 50%;animation:start-bounce 1.6s infinite alternate ease-in-out}
.cover-play-hit:active{background:#fff5;box-shadow:0 0 0 2px #fff8}
.cover-footer{position:absolute;bottom:2.1%;left:50%;transform:translateX(-50%);font:900 clamp(8px,1.1vw,11px)/1.25 monospace;letter-spacing:1px;white-space:nowrap;background:#051e39d9;padding:8px 10px;border:2px solid #ffef99;box-shadow:2px 3px 0 #142544;border-radius:6px;color:#fff2c4;text-align:center}
@keyframes start-bounce{0%,65%{transform:scale(1)}100%{transform:scale(1.045)}}@keyframes appear{from{opacity:.3}to{opacity:1}}
.game-hud{position:absolute;top:1.5%;left:2.5%;right:2.5%;display:flex;align-items:flex-start;justify-content:space-between;z-index:3;gap:8px;pointer-events:none}
.game-hud>*{pointer-events:auto}
.hud-pill{background:linear-gradient(#133657,#0a2139);box-shadow:inset 0 3px #7facdb,inset 0 -4px #041326,0 4px #071d36d9;border:3px solid #d6f1ff;border-radius:16px;height:clamp(35px,5.8dvh,59px);display:flex;align-items:center;justify-content:center;color:white;min-width:25%;padding:0 10px;gap:5px;white-space:nowrap}
.hud-pill img{width:clamp(25px,5.8dvh,57px);height:clamp(25px,5.8dvh,57px);object-fit:contain;image-rendering:pixelated;transform:translate(-7px,-1px);margin-right:-7px;filter:drop-shadow(1px 2px 0 #011627)}
.hud-pill strong{font-size:clamp(17px,3.1dvh,31px);font-weight:1000;letter-spacing:0;line-height:1;-webkit-text-stroke:.35px #fff;text-shadow:2px 3px 0 #092744;font-variant-numeric:tabular-nums}
.points-pill{border-color:#ffd642;min-width:33%}.points-pill img{width:clamp(28px,5.2dvh,50px);height:clamp(28px,5.2dvh,50px);filter:drop-shadow(1px 2px 0 #963e1b)}
.pause-btn{width:clamp(35px,5.8dvh,59px);height:clamp(35px,5.8dvh,59px);flex-shrink:0;background:linear-gradient(#fc6850,#c51923);border:3px solid #fff2e6;border-radius:13px;color:white;font-weight:1000;font-size:clamp(20px,3dvh,31px);line-height:1;box-shadow:inset 0 4px #ffa193,inset 0 -5px #871521,0 4px #081b35;text-shadow:2px 3px 0 #8d1c22}
.pause-btn:active,.pixel-button:active,.touch-btn:active{transform:translateY(2px);filter:brightness(.92)}
.lives-row{position:absolute;top:7.7%;left:50%;transform:translateX(-50%);z-index:2;background:#072e4bbf;border:2px solid #d4e9ff90;border-radius:99px;padding:0 12px;font-size:clamp(15px,2.5dvh,21px);color:#ff4c59;letter-spacing:5px;text-shadow:2px 2px #611428}
.controls{position:absolute;inset:auto 2.5% 3.5%;display:flex;justify-content:space-between;z-index:2;align-items:flex-end;pointer-events:none}
.move-controls,.action-controls{display:flex;gap:8px;align-items:center}
.touch-btn{pointer-events:auto;width:clamp(45px,6.3dvh,64px);height:clamp(45px,6.3dvh,64px);border:3px solid #e6f6ffc5;background:linear-gradient(150deg,#003858bf,#0c4065c7);border-radius:12px;color:#fff8c6;font-size:clamp(20px,3.1dvh,30px);font-weight:1000;text-shadow:2px 2px #02172b;box-shadow:0 5px 0 #051f39a9,inset 0 3px 0 #ffffff38;touch-action:none}
.jump-btn{background:linear-gradient(160deg,#ffba19c9,#c37611bf);border-color:#fff7b7}.slide-btn{background:linear-gradient(160deg,#0d77a7d4,#063d67d4)}
.toast{position:absolute;z-index:4;top:23%;left:50%;transform:translateX(-50%);padding:8px 15px;border:3px solid white;border-radius:10px;box-shadow:0 4px #0b325e;background:#145d97;color:#fff;font:bold clamp(14px,2dvh,19px) monospace;white-space:nowrap;pointer-events:none}
.modal-backdrop{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:12px 24px;background:linear-gradient(#04162d85,#04162dc9);backdrop-filter:blur(3px)}
.pixel-modal{width:min(100%,390px);max-height:95%;overflow:auto;text-align:center;border:5px solid #fbe3a1;box-shadow:0 0 0 5px #163f67,0 8px 0 7px #061e38,0 22px 30px #021628ad;border-radius:17px;background:linear-gradient(180deg,#1a5784,#0b294a);padding:clamp(15px,2.6dvh,28px) clamp(14px,3dvw,26px);color:white}
.modal-eyebrow{font:900 clamp(10px,1.4dvh,14px)/1.3 monospace;letter-spacing:2px;color:#ffde83}
.pixel-modal h2{margin:3px 0 9px;font-size:clamp(28px,4.5dvh,48px);font-weight:1000;line-height:1.1;letter-spacing:-2px;color:#ffe653;-webkit-text-stroke:1px #9c5b20;text-shadow:3px 4px 0 #071f3b}
.pixel-modal p{font-size:clamp(12px,1.7dvh,16px);margin:8px 0 19px;color:#dbeffc}
.pixel-button{display:block;width:100%;border-radius:10px;padding:clamp(10px,1.7dvh,17px) 8px;border:3px solid #fff1cc;box-shadow:inset 0 3px #fff6,inset 0 -4px #0003,0 4px #041c34;color:#fff;font-size:clamp(14px,2.1dvh,20px);font-weight:1000;text-shadow:1px 2px #523b24;letter-spacing:.15px;margin-top:10px}
.pixel-button.yellow{background:linear-gradient(#ffcc36,#f79315);border-color:#fff1a8;color:#fff}.pixel-button.red{background:linear-gradient(#ff6857,#d72a2f);border-color:#ffe6ce}.pixel-button.ghost{background:#174773;border-color:#94c4ed;font-size:clamp(12px,1.7dvh,16px);padding:clamp(8px,1.2dvh,13px)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 9px}.result-grid>div{padding:11px 5px;background:#071d36b0;border:2px solid #5fa3d1;border-radius:9px;display:flex;flex-direction:column;gap:2px}.result-grid small{font:900 clamp(9px,1.45dvh,12px) monospace;color:#b0d8f4;letter-spacing:1px}.result-grid strong{font-size:clamp(22px,3.3dvh,36px);font-variant-numeric:tabular-nums;color:#ffe766;text-shadow:2px 2px #48371b}.record-note{font:900 clamp(11px,1.5dvh,13px) monospace;color:#ffe09a;margin:7px 0 13px}.player-label{display:block;text-align:left;color:#c9e5f2;font:800 clamp(9px,1.25dvh,11px) monospace;letter-spacing:.5px}.player-input{width:100%;padding:10px;border-radius:8px;border:3px solid #b3d7e5;color:#10334f;background:#fff9e8;font-size:clamp(13px,1.8dvh,18px);font-weight:1000;margin:6px 0 0;text-transform:uppercase;outline-color:#ffd13e}.save-status{min-height:12px;font-size:clamp(10px,1.45dvh,13px);padding-top:6px;color:#e3f0ff}.small-link{display:block;margin:11px auto 0;padding:3px 5px;background:transparent;border:0;color:#cae8ff;font-size:clamp(10px,1.55dvh,13px);text-decoration:underline}.over-modal{padding-top:clamp(12px,2dvh,20px);padding-bottom:clamp(10px,1.8dvh,18px)}
.ranking-panel{width:min(560px,calc(100vw - 32px));background:linear-gradient(165deg,#103b60,#081f39 90%);border:3px solid #9bd9ff;border-radius:14px;box-shadow:inset 0 3px 0 #b3e6ff38,0 8px 0 #041528,0 18px 30px #01142788;padding:17px 20px 11px;color:#edf9ff}
.ranking-heading{display:flex;align-items:center;gap:13px;border-bottom:2px dashed #4f87b1;padding-bottom:12px}
.ranking-emblem{font-size:30px;filter:drop-shadow(1px 2px #062440)}
.ranking-heading h2{font-size:clamp(20px,4vw,26px);font-weight:1000;letter-spacing:.7px;line-height:1;color:#ffe26d;text-shadow:2px 3px #0a2442;margin:0 0 4px}
.ranking-heading p{font:bold 10px monospace;color:#a9d5f4;letter-spacing:1.1px;margin:0}
.ranking-chip{margin-left:auto;font:bold 12px monospace;white-space:nowrap;color:#ffdc6c;background:#102f4c;border:2px solid #4b85b1;border-radius:8px;padding:7px 9px}
.ranking{list-style:decimal;margin:10px 0 0;padding:0 3px 0 29px;font:bold 13px/1.55 monospace;color:#eef8ff;min-height:36px}
.ranking li{padding:10px 3px;border-bottom:1px solid #6da4c633;overflow-wrap:anywhere}
.ranking li:last-child{border-bottom:0}
.ranking li::marker{font-weight:900;color:#ffd96b}
.ranking strong{float:right;color:#ffdc69;font-variant-numeric:tabular-nums;margin-left:8px}
@media(max-width:700px){body{background:#051f36}.layout{gap:15px;padding:5px 8px 30px}.game-frame{width:min(100vw,calc((100dvh - 110px)*560/1024));max-width:100vw;border:0;outline:0;box-shadow:0 6px 30px #0007;border-radius:0}.screen-cover{background-size:100% 100%}.game-hud{top:2.1%}.lives-row{top:9%}.controls{bottom:max(22px,env(safe-area-inset-bottom))}.cover-footer{bottom:max(13px,env(safe-area-inset-bottom))}.ranking-panel{width:min(100%,560px);padding:14px 15px 7px}}
@media(max-width:700px) and (orientation:landscape){.game-frame{width:min(50vw,calc((100dvh - 28px)*560/1024))}.layout{gap:13px}.ranking-panel{width:min(90vw,560px)}}
@media(prefers-reduced-motion:reduce){.cover-play-hit{animation:none}}

/* Online leaderboard - compact status under TOP 5 */
.ranking-online-row{display:flex;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid #77afdc48;margin-top:7px;padding:11px 1px 1px;color:#a8d8f7;font:800 10px/1.35 monospace;letter-spacing:.45px;min-height:34px}
.ranking-connect,.ranking-refresh{border:1px solid #9bcfee;border-radius:6px;background:#114f79;color:#ffec9e;font:900 10px/1.1 monospace;padding:7px 9px;white-space:nowrap}
.ranking-refresh{font-size:18px;line-height:14px;padding:5px 9px}
.ranking-connect:hover,.ranking-refresh:hover{background:#246c98}
.ranking-connect:focus-visible,.ranking-refresh:focus-visible{outline:2px solid #ffe57d;outline-offset:2px}
@media(max-width:390px){.ranking-online-row{font-size:9px}.ranking-connect{font-size:9px;padding:6px}}

/* PIKA 3.2: match game and ranking widths */
:root{--pika-game-width:min(560px, calc((100dvh - 24px)*560/1024), calc(100vw - 32px))}
.game-frame{width:var(--pika-game-width)}
.ranking-panel{width:var(--pika-game-width);max-width:100%;min-width:0}
.creator-credit{width:var(--pika-game-width);max-width:100%;text-align:center;margin-top:-6px;color:#abd9f8;font:900 11px/1.6 monospace;letter-spacing:1.3px;padding:1px 0 0}
.creator-credit a{color:#ffe174;font-weight:1000;text-decoration:none;border-bottom:1px solid #ffe17480;padding-bottom:2px}
.creator-credit a:hover,.creator-credit a:focus-visible{color:#fff6c9;border-bottom-color:#fff6c9}
@media(max-width:700px) and (orientation:portrait){
  :root{--pika-game-width:100vw}
  html,body{width:100%;max-width:100%;margin:0}
  .layout{width:100%;max-width:none;gap:0;padding:0 0 max(20px,env(safe-area-inset-bottom))}
  .game-frame{box-sizing:border-box;width:100vw;max-width:100%;height:auto;aspect-ratio:560/1024;border:0;outline:0;border-radius:0;box-shadow:none;flex-shrink:0}
  .ranking-panel{width:100%;max-width:100%;border-left:0;border-right:0;border-radius:0;padding:16px 17px 11px;box-sizing:border-box}
  .creator-credit{width:100%;margin:0;padding:17px 8px 10px}
  .controls{bottom:max(3.5%,env(safe-area-inset-bottom))}
}
@media(max-width:700px) and (orientation:landscape){
  :root{--pika-game-width:min(50vw,calc((100dvh - 28px)*560/1024))}
  .ranking-panel{width:var(--pika-game-width)}
}