:root{
    --bg1:#ffe3f1; --bg2:#f3e0ff; --bg3:#dcefff;
    --ink:#7a2c58; --accent:#ff4fa3;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%; margin:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    background:
      radial-gradient(120% 90% at 50% -10%, var(--bg3) 0%, rgba(220,239,255,0) 55%),
      radial-gradient(120% 100% at 15% 110%, var(--bg2) 0%, rgba(243,224,255,0) 60%),
      linear-gradient(160deg, var(--bg1) 0%, #ffd0e8 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:100dvh; padding:14px; gap:10px; overflow:hidden; user-select:none;
  }
  /* soft floating dots backdrop */
  body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.55) 0 3px, transparent 4px),
      radial-gradient(circle, rgba(255,255,255,.35) 0 2px, transparent 3px);
    background-size:70px 70px, 45px 45px;
    background-position:0 0, 22px 30px;
    mask-image:radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 75%);
  }
  .hud{
    position:relative; z-index:2; display:flex; align-items:center; gap:10px;
  }
  .badge{
    background:rgba(255,255,255,.75); backdrop-filter:blur(6px);
    border:2px solid #ffb3d8; color:var(--ink); font-weight:800;
    padding:7px 15px; border-radius:999px; font-size:15px;
    box-shadow:0 6px 16px rgba(255,79,163,.22);
    display:flex; align-items:center; gap:7px;
  }
  .badge b{color:var(--accent); font-size:17px;}

  .stage{
    position:relative; z-index:1;
    width:min(94vw, calc((100dvh - 96px) * 0.702));
    aspect-ratio:660 / 940;
    filter:drop-shadow(0 24px 30px rgba(150,40,100,.25));
    touch-action:none;
  }
  .frame{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; pointer-events:none; z-index:0;
  }

  /* layer holding play-field content, shown inside the glass */
  .field{ position:absolute; inset:0; z-index:2; pointer-events:none; }

  .capsule{
    position:absolute; width:13%; transform:translate(-50%,-50%);
    will-change:left,top; filter:drop-shadow(0 4px 4px rgba(0,0,0,.18));
  }

  .claw{
    position:absolute; z-index:3; width:20%; transform:translateX(-50%);
    will-change:left,top; pointer-events:none;
  }
  .claw img{ width:100%; display:block; }

  /* layered claw parts */
  .mount,.head{ position:absolute; will-change:left,top; pointer-events:none; }
  .mount img,.head img{ width:100%; display:block; }
  .mount{ z-index:4; }               /* pink cap, fixed at top rail */
  .head{ z-index:3; }                /* claw jaws, descends */
  .cable{                            /* black spring, stretches */
    position:absolute; z-index:2; pointer-events:none;
    background-repeat:repeat-y; background-position:top center; background-size:100% auto;
  }

  /* buttons overlay the three panel holes */
  .btn{
    position:absolute; z-index:6; width:10.5%; transform:translate(-50%,-50%);
    cursor:pointer; border:none; background:none; padding:0;
    transition:transform .06s ease, filter .06s ease;
    filter:drop-shadow(0 4px 5px rgba(120,20,70,.3));
  }
  .btn img{ width:100%; display:block; pointer-events:none; }
  .btn:active,.btn.press{ transform:translate(-50%,-50%) scale(.86); filter:drop-shadow(0 2px 3px rgba(120,20,70,.3)); }
  .btn:disabled{ opacity:.5; cursor:default; }

  .hint{
    position:relative; z-index:2; color:var(--ink); opacity:.72;
    font-size:12.5px; font-weight:600; letter-spacing:.2px; text-align:center;
  }
  @media (max-width:600px){
    .hint{ line-height:1.55; }
    .hint .sep{ display:none; }
    .hint .h1, .hint .h2{ display:block; }
  }
  .empty{
    position:absolute; z-index:7; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9);
    background:rgba(255,255,255,.92); color:var(--accent); font-weight:800; font-size:16px;
    padding:12px 20px; border-radius:16px; border:2px solid #ffb3d8;
    box-shadow:0 10px 24px rgba(255,79,163,.3); white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  }
  .empty.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

  /* on-plate time display */
  .timer{
    position:absolute; z-index:6; width:13%; transform:translate(-50%,-50%);
    aspect-ratio:1 / 1; border-radius:18%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(#2b0d23, #531a41 60%, #3c1230);
    border:2px solid rgba(255,255,255,.55);
    box-shadow:inset 0 3px 7px rgba(0,0,0,.7), inset 0 -2px 5px rgba(255,120,190,.28), 0 2px 4px rgba(120,20,70,.4);
    color:#ffe36e; font-weight:800; font-family:ui-monospace,Menlo,Consolas,monospace;
    letter-spacing:1px; pointer-events:none; overflow:hidden;
  }
  .timer b{ line-height:1; text-shadow:0 0 7px rgba(255,214,96,.85); font-variant-numeric:tabular-nums; }
  .timer.urgent{ color:#ff617f; border-color:rgba(255,150,180,.7); }
  .timer.urgent b{ text-shadow:0 0 9px rgba(255,70,110,.95); animation:tpulse .5s ease-in-out infinite; }
  @keyframes tpulse{ 50%{ opacity:.4; } }

  /* round start button — uses the metallic blue START button image */
  .start{
    position:absolute; z-index:6; width:12%; transform:translate(-50%,-50%);
    aspect-ratio:1 / 1; border:none; padding:0; cursor:pointer; background:transparent;
    background-position:center; background-size:contain; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 3px 4px rgba(120,20,70,.35));
    transition:transform .08s ease, filter .08s ease;
  }
  .start b{
    position:relative; margin-top:3%;   /* sit where the original label was */
    color:#611e40; font-weight:800; letter-spacing:1px; line-height:1;
    text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 1px rgba(70,15,45,.4);
  }
  .start:hover{ filter:drop-shadow(0 3px 5px rgba(120,20,70,.4)) brightness(1.03); }
  .start:active{ transform:translate(-50%,-50%) scale(.93); }
  .start:disabled{ filter:grayscale(.2) brightness(.97) drop-shadow(0 2px 3px rgba(120,20,70,.3)); opacity:.75; cursor:default; }

  /* ---- result modal ---- */
  #result{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
    padding:18px; background:rgba(70,12,44,.55); backdrop-filter:blur(4px); }
  #result.show{ display:flex; animation:fadein .2s ease; }
  @keyframes fadein{ from{opacity:0} to{opacity:1} }
  .result-panel{ width:min(94vw,560px); max-height:94dvh; overflow:hidden; text-align:center;
    background:linear-gradient(#ffffff,#ffe9f4); border:3px solid #ff8ec6; border-radius:26px;
    padding:18px 18px 14px; box-shadow:0 22px 55px rgba(150,30,90,.45);
    display:flex; flex-direction:column; }
  .result-panel h2{ margin:.1em 0 .05em; color:#e21f7e; font-size:24px; }
  .result-panel .sub{ color:#7a2c58; font-weight:700; font-size:13.5px; margin-bottom:12px; }
  #resultGrid{ display:grid; gap:8px; justify-content:center; align-content:center; margin:0 auto 12px; }
  #resultGrid .noitems{ grid-column:1/-1; color:#a06; font-weight:700; padding:24px 0; }
  .item{ display:block; width:100%; height:100%; border-radius:14px; overflow:hidden; background:#fff;
    border:2px solid #ffc2e0; box-shadow:0 4px 10px rgba(150,30,90,.18);
    transition:transform .1s ease, border-color .1s ease; cursor:pointer; }
  .item:hover{ transform:translateY(-3px) scale(1.03); border-color:#ff5fb0; }
  .item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .item.noimg{ background:linear-gradient(135deg,#ffd3ea,#ff9fd0); position:relative; }
  .item.noimg::after{ content:'🎁'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; }
  .result-btn{ background:linear-gradient(#ff5fb0,#e21f7e); color:#fff; border:none; font-weight:800;
    font-size:16px; padding:11px 30px; border-radius:999px; cursor:pointer; flex:0 0 auto;
    box-shadow:0 6px 14px rgba(210,30,120,.4); transition:transform .07s ease; }
  .result-btn:active{ transform:scale(.95); }
  .disclosure{ margin-top:12px; font-size:11px; color:#9a4a72; opacity:.85; line-height:1.5; flex:0 0 auto; }