/* Prototype styles (CACHOS Christmas Rush V11.5), ported; mobile layout additions at the end. */
:root{--red:#d7192a;--gold:#ffcf65;--blue:#101e3e}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:radial-gradient(ellipse at top,#254a7a,#0c1632 65%);background-color:#0c1632;color:#fff;font-family:system-ui,Arial,sans-serif;min-height:100vh}
header{text-align:center;padding:20px 12px 8px}
header img{width:min(260px,56vw);height:auto;display:block;margin:auto}
h1{font-weight:1000;letter-spacing:2px;text-shadow:3px 4px #070b1b;margin:8px 0;font-size:clamp(23px,4vw,42px)}
.sub{color:#d6e8ff;font-size:14px}
.wrap{max-width:1080px;margin:auto;padding:10px 14px 35px}
.panel{background:#111f43e8;border:2px solid #5175b1;border-radius:15px;padding:16px;margin:12px 0;box-shadow:0 8px 22px #070b1b66}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
canvas{width:100%;aspect-ratio:16/9;display:block;background:#173961;border:4px solid #f9cf7c;border-radius:12px;image-rendering:pixelated}
.hud{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;color:#ffda83;font-weight:800;margin:8px 0}
button{background:var(--red);color:#fff;border:2px solid #ff9da5;border-radius:9px;padding:11px 16px;font-size:15px;font-weight:850;cursor:pointer;box-shadow:0 4px #811222}
button:hover{filter:brightness(1.15)}
button:disabled{opacity:.5;cursor:not-allowed}
h2{margin:0 0 12px;font-size:20px}
.muted{color:#bdd0ec;font-size:13px}
.notice{padding:10px;background:#243e6b;border-radius:8px;min-height:40px;margin:10px 0}
.good{color:#b9ffca}.bad{color:#ffc0b8}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:8px;border-bottom:1px solid #4b6288;text-align:left}
th:last-child,td:last-child{text-align:right}
.pill{display:inline-block;background:#e7b85b;color:#161a2a;padding:3px 8px;border-radius:20px;font-size:12px;font-weight:800}
.hidden{display:none!important}
footer{text-align:center;font-size:12px;color:#aabddd;padding:15px}
@media(max-width:730px){.grid{grid-template-columns:1fr}.panel{padding:11px}}

.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.product-tile{background:#20345c;border:1px solid #5e7cad;border-radius:10px;padding:8px;text-align:center;min-width:0}
.product-tile.collected{border-color:#ffd65e}
a.product-tile,.level-celebration a.product{display:block;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .12s}
a.product-tile:hover,a.product-tile:focus-visible,.level-celebration a.product:hover,.level-celebration a.product:focus-visible{transform:translateY(-2px);border-color:#ffd65e;outline:none}
.product-tile small.shop{color:#ffd65e;font-weight:700;margin-top:2px}
.level-celebration .product small.shop{color:#c82032;font-weight:900;margin-top:2px}
.product-tile img{height:58px;width:auto;max-width:100%;object-fit:contain;image-rendering:pixelated}
.product-tile small{display:block;font-size:11px;color:#d7e4fb}
.product-tile strong{display:block;font-size:11px;overflow-wrap:anywhere}
.collect-banner{position:absolute;top:6px;left:50%;transform:translateX(-50%);background:#c82032;color:white;border:2px solid #ffe39d;padding:6px 10px;border-radius:8px;font-weight:900;pointer-events:none;max-width:90%;text-align:center;z-index:4;font-size:12px}
.game-holder{position:relative}
@media(max-width:540px){.product-tile img{height:46px}}

/* level transition (prototype V11.5) */
#levelTransition{position:fixed;inset:0;z-index:10010;background:rgba(6,12,36,.86);display:none;align-items:center;justify-content:center;padding:14px;overflow-y:auto;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#levelTransition.visible{display:flex}
.level-celebration{width:min(100%,560px);max-height:95vh;overflow:auto;box-sizing:border-box;text-align:center;border:4px solid #fff2b2;border-radius:19px;background:linear-gradient(155deg,#23466d,#10264b 64%,#3b224e);box-shadow:0 18px 65px #0009,0 0 0 5px #ba3048;padding:clamp(14px,4vw,26px);color:white;font-family:inherit}
.level-celebration h2{font-size:clamp(23px,6vw,37px);line-height:1.1;margin:5px 0 8px;color:#ffe087;text-shadow:3px 3px #8c2945}
.level-celebration p{margin:7px 0}
.level-celebration .products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.level-celebration .product{min-width:0;border:2px solid #7eb9d9;border-radius:12px;background:#fffdf3;color:#203452;padding:7px 4px}
.level-celebration .product img{height:70px;width:100%;object-fit:contain}
.level-celebration .product b{font-size:11px;display:block;overflow-wrap:anywhere}
.level-celebration .product small{font-size:10px;display:block}
.level-celebration .product small.pts{color:#187e64;font-weight:900}
.level-celebration .stats{display:flex;justify-content:space-around;gap:8px;font-weight:900;color:#ffda77}
.level-celebration button{width:100%;padding:13px 14px;margin-top:9px;border:0;border-radius:12px;font-size:17px;font-weight:900;color:#173252;background:#ffdb6b;cursor:pointer;touch-action:manipulation;box-shadow:none}
@media(max-height:500px){.level-celebration{padding:10px 14px}.level-celebration>div:first-child{display:none}.level-celebration h2{font-size:22px;margin:2px 0 4px}.level-celebration .products{margin:8px 0}.level-celebration .product img{height:52px}}

/* ---------- mobile layout: game first, controls on the canvas ---------- */
.play-panel{padding:10px}
.play-panel .hud{margin:0 4px 6px}
/* fit the 16:9 canvas into the viewport height (HUD ~30px + panel/borders) */
.game-holder{width:min(100%,calc((100vh - 64px) * 16 / 9));margin:0 auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@supports (height:100svh){.game-holder{width:min(100%,calc((100svh - 64px) * 16 / 9))}}
.game-holder.playing,.game-holder.playing canvas{touch-action:none}
body.playing{overscroll-behavior:none}

.controls{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:3}
.controls .pad{display:flex;gap:10px}
.controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;min-width:72px;min-height:64px;padding:8px 12px;font-size:22px;line-height:1;background:rgba(215,25,42,.55);border-color:rgba(255,157,165,.8);box-shadow:0 4px rgba(129,18,34,.7);opacity:.85}
.controls button.jump{min-width:120px;font-size:17px}
.controls button.held{filter:brightness(1.35);transform:translateY(2px);box-shadow:0 2px rgba(129,18,34,.7)}

/* start / pause / end overlay on the canvas */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,12,36,.55);border-radius:12px;z-index:5;padding:10px}
.screen-card{width:min(92%,520px);text-align:center;background:#101d3de8;border:3px solid #f9cf7c;border-radius:15px;padding:clamp(10px,3vw,22px);box-shadow:0 8px 22px #070b1b99}
.screen-card h2{color:#ffda79;font-family:monospace;font-weight:900;font-size:clamp(18px,4vw,28px);margin:2px 0 8px;text-shadow:2px 3px #070b1b}
.screen-card p{margin:6px 0;font-size:clamp(13px,2.4vw,16px)}
.screen-score{color:#ffda77;font-weight:900;font-size:clamp(16px,3.4vw,22px)!important}
.screen-card button{margin-top:8px;min-height:52px;font-size:17px;width:min(100%,320px)}

.rotate-hint{display:none;text-align:center;color:#ffda83;font-weight:800;margin:8px 0 0}

/* narrow portrait phone: hint to rotate; controls move under the small canvas */
@media(orientation:portrait) and (max-width:500px){
  .rotate-hint{display:block}
  .wrap{padding:6px 8px 30px}
  .play-panel{padding:8px}
  header{padding:12px 10px 4px}
  .controls{position:static;margin-top:10px;pointer-events:auto}
  .controls button{opacity:1;background:var(--red);min-height:72px;min-width:84px}
  .controls button.jump{min-width:130px}
  .collect-banner{font-size:11px;padding:4px 8px}
}

/* phone in landscape: compact header so the canvas fills the screen */
@media(orientation:landscape) and (max-height:500px){
  header.top{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 10px}
  header.top img{width:auto;height:30px;margin:0}
  header.top h1{font-size:18px;margin:0;text-shadow:2px 2px #070b1b}
  header.top .sub{display:none}
  .wrap{padding:0 6px 30px}
  .play-panel{padding:4px 6px 6px;margin:4px 0;border-radius:10px}
  .play-panel .hud{margin:0 4px 3px;font-size:13px}
  .game-holder{width:min(100%,calc((100vh - 48px) * 16 / 9))}
  @supports (height:100svh){.game-holder{width:min(100%,calc((100svh - 48px) * 16 / 9))}}
  canvas{border-width:3px}
}

/* ---------- contest: run notice, ranking, account, registration dialog ---------- */
.notice-warn{background:#5a2a1f;border:1px solid #ff9d7a;color:#ffe2d6}
.screen-status{margin:6px 0;font-size:clamp(12px,2.2vw,15px)}
.screen-card button.cta{background:#ffdb6b;color:#173252;border-color:#fff2b2;box-shadow:0 4px #a07a1a}
.rank-table td:first-child{width:3em;font-weight:900;color:#ffda77}
.rank-table td.nick{overflow-wrap:anywhere}
.account{margin:10px 0}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
button.secondary{background:#2c4a80;border-color:#7ea0dc;box-shadow:0 4px #15284d}
button.link{background:none;border:0;box-shadow:none;color:#ffda83;text-decoration:underline;padding:6px 4px;font-weight:700}

.auth-overlay{position:fixed;inset:0;z-index:10020;background:rgba(6,12,36,.86);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-overlay[hidden]{display:none}
.auth-card{position:relative;width:min(100%,460px);margin:auto 0;background:#111f43;border:3px solid #f9cf7c;border-radius:15px;padding:20px 16px 16px;box-shadow:0 18px 65px #0009}
.auth-card h2{color:#ffda79;padding-right:28px}
.auth-close{position:absolute;top:6px;right:6px;font-size:20px;text-decoration:none!important}
.auth-step[hidden]{display:none}
.auth-step p{margin:6px 0 10px}
.auth-step button[type=submit],#authDoneClose{width:100%;margin-top:8px;min-height:48px}
.auth-links{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.field{display:block;font-weight:700;font-size:14px;margin:10px 0 2px}
.field input{display:block;width:100%;margin-top:4px;padding:11px 10px;font-size:16px;border-radius:8px;border:2px solid #5175b1;background:#0c1632;color:#fff}
.field input:focus{outline:2px solid #ffda79;outline-offset:1px}
.field input[aria-invalid=true]{border-color:#ff8f7f}
#codeInput{letter-spacing:6px;font-size:22px;text-align:center;font-family:monospace}
.check{display:flex;gap:9px;align-items:flex-start;margin:10px 0 2px;font-size:14px;line-height:1.35}
.check input{width:20px;height:20px;flex:none;margin:0}
.check a{color:#ffda83}
.field-error{color:#ffc0b8;font-size:13px;margin:2px 0 0!important;min-height:0}
.field-error:empty{display:none}
.guardian{border:1px solid #5175b1;border-radius:10px;padding:6px 12px 10px;margin:12px 0}
.guardian[hidden]{display:none}
.guardian legend{font-weight:800;color:#ffda83;font-size:14px;padding:0 4px}