@charset "UTF-8";
/* ============================================================
   Block Drop — a Tetris-style stacker
   Shares the warm palette of Fruit Link so the two games in
   this folder read as one set. The playfield itself goes dark,
   because the tetromino colours need something to sit against.
   ============================================================ */

:root{
  --bg-1:#fff6e8;
  --bg-2:#ffe6c9;
  --bg-3:#e2e0ff;
  --ink:#3d2b20;
  --ink-soft:#7d6455;
  --card:#fffdf8;
  --line:#eadbc6;
  --accent:#ff7a3d;
  --accent-2:#f8465f;
  --green:#3fa96b;
  --gold:#f4b62c;
  --violet:#7b5bd6;
  --well:#2b2033;          /* the playfield */
  --well-2:#221a2a;
  --shadow-s:0 1px 2px rgba(97,63,36,.10);
  --shadow-m:0 6px 18px rgba(97,63,36,.14);
  --shadow-l:0 18px 48px rgba(97,63,36,.24);
  --radius:14px;
  --font: ui-rounded, "Segoe UI Variable", "Segoe UI", Nunito, Avenir, system-ui, -apple-system, sans-serif;
  --emoji: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, var(--bg-3), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, #d9f2e2, transparent 55%),
    linear-gradient(165deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

#app{height:100%;position:relative;}

.screen{position:absolute;inset:0;display:none;}
.screen.active{display:flex;flex-direction:column;}

/* ---------------- Buttons ---------------- */
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;}
button:disabled{cursor:not-allowed;}

.btn{
  display:inline-block;text-decoration:none;
  border-radius:999px;padding:.72rem 1.5rem;font-size:1rem;font-weight:700;
  background:linear-gradient(180deg,var(--accent),#f2622c);
  color:#fff;box-shadow:var(--shadow-m);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-l);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-ghost{background:var(--card);color:var(--ink-soft);border:1.5px solid var(--line);box-shadow:var(--shadow-s);}
.btn-ghost:hover{color:var(--ink);border-color:#dcc6a8;}
.btn-sm{padding:.5rem 1rem;font-size:.85rem;}

/* ============================================================
   MENU
   ============================================================ */
#menu{overflow-y:auto;}
.menu-inner{width:min(880px,100%);margin:0 auto;padding:2.2rem 1.25rem 3rem;}

.brand{text-align:center;margin-bottom:1.6rem;}

/* the five brand tiles bob like the fruit does next door */
.brand-blocks{display:flex;justify-content:center;gap:.4rem;}
.bb{
  width:30px;height:30px;border-radius:8px;
  animation:bob 2.4s ease-in-out infinite;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 3px 8px rgba(97,63,36,.22);
}
.bb.i{background:linear-gradient(150deg,#7fdfea,#1fa8bb)}
.bb.t{background:linear-gradient(150deg,#c79bea,#8a41c0)}
.bb.o{background:linear-gradient(150deg,#ffdf7e,#e0a411)}
.bb.l{background:linear-gradient(150deg,#ffc07a,#dc7508)}
.bb.s{background:linear-gradient(150deg,#8ee09a,#31a041)}
.bb:nth-child(2){animation-delay:.18s}
.bb:nth-child(3){animation-delay:.36s}
.bb:nth-child(4){animation-delay:.54s}
.bb:nth-child(5){animation-delay:.72s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}

.brand h1{
  margin:.6rem 0 .1rem;font-size:clamp(2.4rem,7vw,3.4rem);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--violet),var(--accent) 60%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{margin:0;color:var(--ink-soft);font-weight:600;letter-spacing:.16em;font-size:.82rem;text-transform:uppercase;}

.rules-card{
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.35rem;box-shadow:var(--shadow-s);margin-bottom:1.8rem;
}
.rules-card h2{margin:0 0 .6rem;font-size:1rem;}
.rules-card ul{margin:0;padding-left:1.15rem;color:var(--ink-soft);line-height:1.75;font-size:.94rem;}
.rules-card b{color:var(--ink);}

.section-title{font-size:1rem;margin:0 0 .8rem;letter-spacing:.02em;}

.stage-list{display:grid;gap:.75rem;}

.stage-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  width:100%;text-align:left;padding:.9rem 1.1rem;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.stage-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:#c9bdf0;}

.sc-badge{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:1.5rem;font-family:var(--emoji);
  background:linear-gradient(160deg,#f1ecff,#ddd4fb);border:1.5px solid #d2c7f5;
}
.sc-name{font-weight:800;font-size:1.02rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.sc-meta{color:var(--ink-soft);font-size:.82rem;margin-top:.15rem;}
.sc-right{text-align:right;font-size:.78rem;color:var(--ink-soft);white-space:nowrap;}
.sc-best{font-weight:800;color:var(--gold);font-size:1rem;display:block;}

.chip{
  font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:999px;background:#eee9ff;color:#5b3fb0;border:1px solid #d8ccf7;
}
.chip.d2{background:#e3f4ea;color:#227a4b;border-color:#bfe4ce;}
.chip.d3{background:#e6efff;color:#28579e;border-color:#c5d9f7;}
.chip.d4{background:#ffeede;color:#a8541a;border-color:#f5d0ac;}

.menu-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap;}

/* ============================================================
   GAME
   ============================================================ */
#game{height:100%;}

#hud{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.65rem .9rem;background:rgba(255,253,248,.82);
  backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line);
  flex:0 0 auto;
}
.hud-left,.hud-right{display:flex;align-items:center;gap:.5rem;}
.hud-left{flex:0 1 auto;min-width:0;}
.hud-right{flex:0 0 auto;}
.hud-stats{flex:0 1 auto;min-width:0;display:flex;gap:1.4rem;}
.hud-stage{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.hud-stage-no{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);}
.hud-stage-line{display:flex;align-items:center;gap:.4rem;min-width:0;}
.hud-stage-name{font-weight:800;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.icon-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;
  background:var(--card);border:1.5px solid var(--line);box-shadow:var(--shadow-s);
  transition:transform .12s ease,border-color .12s ease;
}
.icon-btn:hover{transform:translateY(-1px);border-color:#cfc3f2;}

.stat{display:flex;flex-direction:column;align-items:center;line-height:1.15;}
.stat-label{font-size:.62rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}
.stat-value{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;}
#hudTime.warn{color:var(--accent-2);animation:pulse .9s ease-in-out infinite;}
#hudLevel.bump{animation:pulse .45s ease;color:var(--accent);}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

#goalTrack{height:5px;background:#f0e2cd;flex:0 0 auto;overflow:hidden;}
#goalFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--violet),var(--accent) 60%,var(--gold));
  transition:width .25s ease, background .4s ease;
}
#goalFill.low{background:linear-gradient(90deg,var(--accent),var(--accent-2));}
#goalTrack.hidden{visibility:hidden;}

/* ---------------- Play area ---------------- */
#playArea{
  flex:1 1 auto;min-height:0;min-width:0;
  display:grid;gap:.7rem;
  grid-template-columns:114px minmax(0,1fr) 114px;
  grid-template-areas:"left board right";
  width:min(840px,100%);margin:0 auto;padding:.7rem .8rem .5rem;
}
.side{display:flex;flex-direction:column;gap:.6rem;min-width:0;min-height:0;}
.side-left{grid-area:left;}
.side-right{grid-area:right;}

.box{
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:.5rem .55rem .6rem;box-shadow:var(--shadow-s);min-width:0;
}
.box.grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}
.box h3{
  margin:0 0 .35rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;
}
/* Both preview canvases are absolutely positioned inside a slot, so their layout
   size comes from CSS alone. It must never come from the width/height attributes
   the code writes: those are in device pixels, so on a 3× screen the canvas's
   intrinsic width would be 3× its box and, as a grid item's min-content width,
   would shove the whole play area sideways. */
.slot{position:relative;}
.hold-slot{height:54px;}
.next-slot{flex:1 1 auto;min-height:110px;}
.mini{display:block;position:absolute;inset:0;width:100%;height:100%;}

.info{font-size:.76rem;}
.info-row{display:flex;justify-content:space-between;align-items:baseline;padding:.14rem 0;color:var(--ink-soft);}
.info-row b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:.9rem;}

/* the board frame hugs the canvas; the wrapper just supplies the box to fit into */
#boardWrap{grid-area:board;position:relative;min-width:0;min-height:0;}
#frame{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:6px;border-radius:16px;
  background:linear-gradient(160deg,#fff2df,#ffe2c2);
  border:1.5px solid #f0cfa8;
  box-shadow:var(--shadow-l), inset 0 1px 0 rgba(255,255,255,.8);
}
#board{display:block;border-radius:10px;background:var(--well);}

.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:10px;}
.pop{
  position:absolute;left:50%;top:26%;transform:translateX(-50%);
  font-size:1.25rem;font-weight:900;white-space:nowrap;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  animation:popRise 1.05s ease-out forwards;
}
.pop.big{font-size:1.6rem;color:#ffe6a8;}
.pop.b2b{top:40%;font-size:1rem;color:#ffc0cb;}
.pop.combo{top:52%;font-size:1rem;color:#9fe8ff;}
@keyframes popRise{
  0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.6)}
  22%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.14)}
  40%{transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-32px) scale(1)}
}

/* ---------------- Touch pad ---------------- */
.touchpad{
  display:none;flex:0 0 auto;
  gap:.4rem;padding:.4rem .8rem 1rem;
  grid-template-columns:repeat(5,1fr);
}
.tpad{
  height:52px;border-radius:12px;font-size:1.3rem;font-weight:800;
  background:var(--card);border:1.5px solid var(--line);box-shadow:var(--shadow-s);
  color:var(--ink-soft);user-select:none;-webkit-user-select:none;touch-action:none;
}
.tpad:active{background:#f6edff;border-color:#cfc3f2;transform:translateY(1px);}
.tpad.wide{grid-column:span 2;font-size:.8rem;letter-spacing:.08em;}
.tpad.wide:last-child{grid-column:span 3;}
body.touch .touchpad{display:grid;}

/* ---------------- Overlay ---------------- */
.overlay{
  position:absolute;inset:0;z-index:20;display:none;place-items:center;
  background:rgba(43,32,51,.5);backdrop-filter:blur(6px);padding:1.25rem;
}
.overlay.show{display:grid;animation:fadeIn .22s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.panel{
  width:min(430px,100%);background:var(--card);border-radius:22px;padding:2rem 1.75rem 1.6rem;
  text-align:center;box-shadow:var(--shadow-l);border:1.5px solid var(--line);
  animation:panelIn .3s cubic-bezier(.34,1.4,.64,1);
  max-height:100%;overflow-y:auto;
}
@keyframes panelIn{from{transform:scale(.85) translateY(18px);opacity:0}to{transform:none;opacity:1}}

.ov-icon{font-size:3.4rem;font-family:var(--emoji);line-height:1;}
.panel h2{margin:.5rem 0 .35rem;font-size:1.7rem;}
.ov-text{margin:0 0 1.1rem;color:var(--ink-soft);font-size:.95rem;line-height:1.5;}

.ov-scores{display:grid;gap:.4rem;margin-bottom:1.3rem;}
.ov-row{
  display:flex;justify-content:space-between;padding:.55rem .85rem;
  background:#fdf6ea;border:1px solid var(--line);border-radius:10px;font-size:.92rem;
}
.ov-row span:last-child{font-weight:800;font-variant-numeric:tabular-nums;}
.ov-row.total{background:linear-gradient(180deg,#f3edff,#e6dcff);border-color:#d3c6f6;font-size:1.05rem;}
.ov-row.total span:last-child{color:var(--violet);}
.ov-row.record{background:linear-gradient(180deg,#fff2dc,#ffe6c4);border-color:#f2cfa4;}
.ov-row.record span:last-child{color:var(--accent);}

.ov-keys{
  display:grid;gap:.3rem;margin:0 0 1.2rem;text-align:left;
  font-size:.82rem;color:var(--ink-soft);
}
.ov-keys div{display:flex;justify-content:space-between;gap:1rem;}
.ov-keys kbd{
  font-family:inherit;font-size:.74rem;font-weight:800;color:var(--ink);
  background:#f7f0e4;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:.1rem .4rem;
}

.ov-buttons{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;}

/* ---------------- Responsive ---------------- */
@media (max-width:680px){
  #playArea{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"left right" "board board";
    padding:.5rem .6rem .3rem;gap:.5rem;
  }
  .side{flex-direction:row;align-items:stretch;}
  .side .box{flex:1 1 0;}
  .side-left .info{display:none;}
  .next-slot{min-height:0;height:54px;flex:0 0 auto;}
  .hud-stats{gap:.9rem;}
  .stat-value{font-size:1rem;}
  .hud-stage-name{display:none;}
}
@media (max-width:420px){
  .hud-stats{gap:.7rem;}
  .stat-label{font-size:.55rem;}
  .menu-inner{padding:1.4rem 1rem 2.5rem;}
  .stage-card{gap:.7rem;padding:.75rem .85rem;}
  .tpad{height:46px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}