:root{
    --panel:#0e2145;
    --panel-edge:#1b3c73;
    --ice1:#bfe6ff;
    --ice2:#8fd0f5;
    --wall:#2b4f86;
    --gold:#ffd24a;
    --danger:#ff4d4d;
    --safe:#3ee08a;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;height:100%;
    background:#071735;
    font-family:'Trebuchet MS','Segoe UI',sans-serif;
    color:#fff;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  #app{
    position:relative;
    width:100%;height:100%;
    display:flex;flex-direction:column;
    background:
      radial-gradient(circle at 10% 10%, rgba(255,255,255,0.05), transparent 40%),
      linear-gradient(180deg,#0a2450 0%, #071735 60%, #05102a 100%);
    overflow:hidden;
  }

  .bgdeco{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;}
  .bgdeco span{position:absolute;font-size:38px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));}

  /* ---------- HUD ---------- */
  .hud{
    position:relative;z-index:3;
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;flex-wrap:wrap;
  }
  .chip{
    background:linear-gradient(180deg,#12305e,#0b1f42);
    border:1px solid var(--panel-edge);
    border-radius:14px;
    padding:6px 12px;
    display:flex;align-items:center;gap:10px;
    box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .avatar{
    width:44px;height:44px;border-radius:10px;
    background:radial-gradient(circle at 35% 30%, #7fc7ff, #2a6fc9);
    display:flex;align-items:center;justify-content:center;font-size:24px;
    border:2px solid #4a90d9;
    cursor:pointer;transition:transform .12s, filter .12s;
  }
  .avatar:hover{filter:brightness(1.12);transform:translateY(-1px);}
  .avatar:active{transform:translateY(0);}
  .idbox{line-height:1.15;}
  .idbox b{font-size:15px;letter-spacing:.3px;}
  .idbox small{color:#9fc4ef;font-size:11px;display:block;}

  .betctrl{display:flex;align-items:center;gap:8px;}
  .roundbtn{
    width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;
    color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;
  }
  .roundbtn.minus{background:#3a4d6b;}
  .roundbtn.plus{background:#2fae62;}
  .betval{font-weight:800;font-size:17px;display:flex;align-items:center;gap:5px;}
  .coin{color:var(--gold);}

  .multbox{text-align:center;}
  .pill{
    background:#5a35c9;font-size:10px;font-weight:800;letter-spacing:.5px;
    padding:2px 10px;border-radius:8px;display:inline-block;margin-bottom:2px;
  }
  .multval{font-size:22px;font-weight:900;color:var(--safe);position:relative;transition:transform .18s;}
  .multval.bump{transform:scale(1.25);}
  .floatplus{
    position:absolute;left:50%;top:-4px;transform:translateX(-50%);
    color:var(--safe);font-weight:900;font-size:13px;
    animation:floatUp .8s ease-out forwards;pointer-events:none;
  }
  @keyframes floatUp{0%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;transform:translate(-50%,-24px);}}

  .status{
    background:#101f3f;border:1px solid #26406e;border-left:4px solid var(--gold);
    padding:6px 14px;border-radius:10px;font-size:12.5px;color:#e3edff;
    min-width:180px;
  }
  .status b{color:var(--gold);}

  .gear{
    margin-left:auto;
    width:40px;height:40px;border-radius:12px;
    background:#1c66d6;border:1px solid #3f8ce8;
    display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
    transition:transform .12s, filter .12s;
  }
  .gear:hover{filter:brightness(1.12);transform:translateY(-1px);}
  .gear:active{transform:translateY(0);}

  /* ---------- side stack ---------- */
  .sidebar{
    position:absolute;right:14px;top:78px;z-index:3;
    display:flex;flex-direction:column;gap:10px;width:150px;
  }
  .sidebox{
    background:linear-gradient(180deg,#12305e,#0b1f42);
    border:1px solid var(--panel-edge);border-radius:12px;
    padding:8px 10px;box-shadow:0 4px 0 rgba(0,0,0,.35);
  }
  .sidebox h4{margin:0 0 4px;font-size:10px;letter-spacing:.5px;color:#a9c8ee;display:flex;gap:6px;align-items:center;}
  .sidebox .big{font-size:18px;font-weight:900;color:var(--safe);}
  .dots{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap;}
  .dots i{width:11px;height:6px;border-radius:3px;background:#274571;display:block;}
  .dots i.on{background:var(--safe);}

  /* ---------- board ---------- */
  .boardwrap{
    position:relative;z-index:2;
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:6px 14px 60px;
    min-height:0;
  }
  .frame{
    position:relative;
    background:linear-gradient(180deg,#1c4785,#12335f);
    border-radius:22px;
    padding:16px;
    box-shadow:0 10px 0 rgba(0,0,0,.35), inset 0 0 0 4px #0b2247;
    max-width:100%;max-height:100%;
  }
  .board{
    position:relative;
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    grid-template-rows:repeat(6, 1fr);
    gap:4px;
    width:min(84vw, 720px);
    aspect-ratio:10/6;
  }
  .cell{
    position:relative;
    border-radius:8px;
    background:linear-gradient(160deg,var(--ice1),var(--ice2));
    display:flex;align-items:center;justify-content:center;
    font-size:min(3.6vw,26px);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
    transition:box-shadow .15s, filter .15s;
  }
  .cell.snow{background:linear-gradient(160deg,#eaf6ff,#cfe8fb);}
  .cell.deco{cursor:default;}
  .cell.floor{cursor:default;}
  .cell.box{cursor:default;}
  .cell.selectable{cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,140,60,.85);}
  .cell.selectable:hover{filter:brightness(1.1);}
  /* Optional border/frame image for the selectable (hoverable) tile state,
     loaded from assets.json via tileOverlays.selectable. Only added to the
     DOM when a real image is configured and loads successfully; otherwise
     the plain box-shadow above keeps working exactly as before. */
  .cell .tileOverlayArt{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    border-radius:8px; background-size:cover; background-position:center;
  }
  .cell.selectable.hasOverlayArt{ box-shadow:none; }
  /* box art now comes from the real pixel-art sprite via mountSprite() on the
     cell itself (see .cell.spriteBox above) — no CSS crate pattern needed. */
  .cell.safepoint{
    background:linear-gradient(160deg,#8fe9c6,#3fbf8a);
    box-shadow:inset 0 0 0 3px #fff, 0 0 12px 2px rgba(62,224,138,.6);
  }
  .cell.path-preview{box-shadow:inset 0 0 0 2px var(--gold);}
  .cell.invalid-flash{animation:shake .35s;}
  @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
  .cell .glyph{position:relative;z-index:2;pointer-events:none;}

  .rewardIcon{
    /* inset:6% gives an 88%-of-cell box, matching .cell.spriteBox's own
       background-size:88% 88% so the chest renders at the same visual
       scale as every other tile sprite (box, empty tile, etc.). It was
       previously inset:10% (80%), which is why the same-size source art
       looked noticeably smaller than neighboring tiles. */
    position:absolute;inset:6%;z-index:4;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
  }

  .bomb{
    position:absolute;inset:8%;z-index:4;font-size:1.3em;
    animation:fuse .55s infinite alternate;
  }
  @keyframes fuse{from{transform:scale(1);}to{transform:scale(1.12);}}
  .boom{
    position:absolute;inset:-40%;z-index:5;font-size:2.2em;
    display:flex;align-items:center;justify-content:center;
    animation:pop .5s ease-out;
  }
  @keyframes pop{0%{transform:scale(.2);opacity:0;}50%{transform:scale(1.3);opacity:1;}100%{transform:scale(1);}}

  .player,.monster{
    position:absolute;z-index:6;font-size:min(3.4vw,24px);
    width:calc(100%/10 - 4px);height:calc(100%/6 - 4px);
    display:flex;align-items:center;justify-content:center;
    transition:left var(--moveDur,.18s) linear, top var(--moveDur,.18s) linear;
    filter:drop-shadow(0 3px 2px rgba(0,0,0,.5));
    pointer-events:none;
  }
  /* pixel-art sprite rendering: crisp scaling, no smoothing, image anchored
     bottom-center so feet/base stay aligned to the tile as frames change */
  .spriteBox{
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain;
    image-rendering:pixelated;
    image-rendering:-moz-crisp-edges;
    image-rendering:crisp-edges;
  }
  .cell.spriteBox{ background-position:center; background-size:88% 88%; }

  /* ---------- bottom bar ---------- */
  .bottombar{
    position:absolute;left:0;right:0;bottom:0;z-index:5;
    display:flex;justify-content:space-between;align-items:center;
    gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg, rgba(4,12,30,.9), rgba(4,12,30,0));
  }
  .phaseText{
    background:#101f3f;border:1px solid #26406e;border-left:4px solid var(--gold);
    padding:8px 14px;border-radius:10px;font-size:12.5px;color:#e3edff;
    max-width:70%;
  }
  .phaseText b{color:var(--gold);}
  .cta{
    background:linear-gradient(180deg,#33c46f,#1f9450);
    border:none;color:#fff;font-weight:800;font-size:12px;letter-spacing:.4px;
    padding:12px 16px;border-radius:10px;cursor:pointer;
    box-shadow:0 4px 0 #146538;white-space:nowrap;
  }
  .cta:active{transform:translateY(2px);box-shadow:0 2px 0 #146538;}
  .cta.end{background:linear-gradient(180deg,#c9822f,#8f5b18);box-shadow:0 4px 0 #5e3c0f;}
  .cta.restart{background:linear-gradient(180deg,#3a4d6b,#233252);box-shadow:0 4px 0 #10192e;}
  .cta:disabled{opacity:.4;cursor:default;}

  /* ---------- overlay ---------- */
  .overlay{
    position:absolute;inset:0;z-index:10;
    background:rgba(3,10,26,.72);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .overlay.show{opacity:1;pointer-events:auto;}
  .card{
    background:linear-gradient(180deg,#132c58,#0c1d3d);
    border:1px solid #2c4d84;border-radius:18px;
    padding:26px 30px;text-align:center;min-width:260px;
    box-shadow:0 12px 0 rgba(0,0,0,.35);
  }
  .card h2{margin:0 0 6px;font-size:24px;}
  .card h2.lose{color:var(--danger);}
  .card h2.win{color:var(--safe);}
  .card p{margin:0 0 16px;color:#b9cdee;font-size:13px;}
  .card .payout{font-size:26px;font-weight:900;color:var(--gold);margin-bottom:16px;}

  /* ---------- avatar picker + settings modals ---------- */
  .modalCard{max-width:min(90vw,380px);}
  .modalCard h2{font-size:18px;letter-spacing:.4px;}
  .avatarGrid{
    display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;
    margin:6px 0 18px;
  }
  .avatarOption{
    background:linear-gradient(180deg,#12305e,#0b1f42);
    border:2px solid var(--panel-edge);border-radius:12px;
    padding:8px 4px;cursor:pointer;color:#fff;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    transition:transform .12s, border-color .12s, filter .12s;
  }
  .avatarOption .avatarOptionGlyph{
    width:40px;height:40px;border-radius:9px;font-size:22px;
    display:flex;align-items:center;justify-content:center;
    background-image:radial-gradient(circle at 35% 30%, #7fc7ff, #2a6fc9);
  }
  .avatarOption span{font-size:9px;letter-spacing:.3px;color:#b9cdee;}
  .avatarOption:hover{filter:brightness(1.12);transform:translateY(-1px);}
  .avatarOption.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,210,74,.35);}

  .settingsRow{
    display:flex;align-items:center;justify-content:space-between;
    background:#101f3f;border:1px solid #26406e;border-radius:10px;
    padding:10px 14px;margin:6px 0 18px;font-size:14px;
  }
  .soundToggle{
    border:none;border-radius:20px;padding:7px 16px;font-weight:800;font-size:12px;
    cursor:pointer;letter-spacing:.3px;
    background:linear-gradient(180deg,#33c46f,#1f9450);color:#fff;
    box-shadow:0 3px 0 #146538;transition:transform .1s;
  }
  .soundToggle:active{transform:translateY(2px);}
  .soundToggle.off{
    background:linear-gradient(180deg,#5a6a86,#374156);
    box-shadow:0 3px 0 #22304a;
  }
  .credit{margin-top:4px;font-size:11px;color:#8fa8cf;}
  .credit a{color:#8fd0f5;text-decoration:none;font-weight:700;}
  .credit a:hover{text-decoration:underline;}
  /* settings modal shows the credit above the Close button, so give it some
     breathing room before the button rather than the default tight spacing */
  #settingsModal .credit{margin-bottom:16px;}

  @media (max-width:640px){
    .sidebar{display:none;}
    .hud{gap:6px;padding:8px;}
    .idbox b{font-size:12px;}
    .chip{padding:5px 8px;}
    .avatar{width:34px;height:34px;font-size:18px;}
    .status{display:none;}
    .avatarGrid{grid-template-columns:repeat(3, 1fr);}
  }

  /* ================= SPLASH SCREEN ================= */
  #splashScreen{
    position:absolute; inset:0; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; padding:24px; text-align:center;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), transparent 45%),
      linear-gradient(180deg,#0a2450 0%, #071735 55%, #05102a 100%);
    cursor:pointer;
    transition:opacity .5s ease, visibility .5s ease;
  }
  #splashScreen.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  #splashScreen .splashLogo{
    max-width:min(72vw,320px); max-height:45vh; width:auto; height:auto;
    filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
    animation: splashPulse 2.4s ease-in-out infinite;
  }
  @keyframes splashPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }
  #splashScreen .splashLoading{
    font-size:13px; letter-spacing:.12em; color:#8fd0f5; opacity:.85;
  }
  #splashScreen .splashTap{
    font-size:15px; letter-spacing:.14em; font-weight:700; color:#bfe6ff;
    padding:10px 26px; border:2px solid rgba(191,230,255,.55); border-radius:999px;
    background:rgba(255,255,255,.06);
    animation: splashTapBlink 1.6s ease-in-out infinite;
  }
  @keyframes splashTapBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }