/* Adventure-only backpack power-ups: intentionally absent from ranked Classic. */
.map-booster-wallet{
  width:max-content;max-width:100%;margin:14px auto;padding:10px 16px;
  color:#fff3d2;font-size:12px;font-weight:800;text-align:center;
  border:1px solid #e7c77688;border-radius:999px;
  background:linear-gradient(110deg,#175c65bd,#123e56bd);
  box-shadow:inset 0 1px 0 #d8fff59c,0 5px 15px #00182a6b;
}
.boosters-bar{
  margin:12px 0 10px;padding:10px 11px 9px;
  border:1px solid #83e9df78;border-radius:21px;
  background:linear-gradient(145deg,#094052e8,#0b5671d4 58%,#05384fe8);
  box-shadow:inset 0 1px 0 #bafff064,0 8px 18px #031a297a;
}
.boosters-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px}
.boosters-heading strong{font-size:13px;color:#fff3ca;font-weight:900}
.boosters-heading span{font-size:9px;color:#aadfe0;text-align:right;max-width:65%}
.booster-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.booster-button{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;min-width:0;min-height:52px;
  border:1px solid #9cefe9a6;border-radius:16px;padding:7px 8px;
  color:#fafff1;font:inherit;
  background:linear-gradient(135deg,#15697a,#0b5365 68%,#0c4054);
  box-shadow:inset 0 1px 0 #d0fffeb5,0 4px 9px #0119249b;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.booster-button:active:not(:disabled){transform:scale(.96)}
.booster-button.armed{
  color:#fff9dd;border-color:#ffe388;
  background:linear-gradient(135deg,#b68936a8,#0b6776 75%);
  box-shadow:inset 0 1px 0 #fff7cf,0 0 15px #ffd46b8a;
}
.booster-button:disabled{opacity:.42;filter:grayscale(.55);box-shadow:none;cursor:not-allowed}
.booster-icon{font-size:24px;line-height:1;filter:drop-shadow(0 1px 4px #0008)}
.booster-label{font-size:clamp(9px,2.8vw,12px);font-weight:800;line-height:1.1}
.booster-count{
  min-width:20px;height:20px;display:grid;place-items:center;padding:0 4px;
  border-radius:100px;background:#ffe3a4;color:#52351d;
  font-size:11px;font-weight:950;box-shadow:0 1px 4px #001b28bd;
}
.booster-tip{min-height:25px;margin:8px 2px 0;color:#b5e4e6;font-size:10px;line-height:1.3;text-align:center}
#game-board .tile.hammer-target{
  cursor:crosshair;
  outline:2px dashed #ffe298;outline-offset:-4px;
  box-shadow:inset 0 0 12px #ffd3638c,0 0 10px #ffd36978;
}
#game-board .tile.booster-hammer-hit{
  animation:boosterHammerPulse .58s ease-out;
}
@keyframes boosterHammerPulse{
  0%{filter:brightness(3);box-shadow:0 0 40px #ffdf8c;transform:scale(1.16)}
  45%{filter:brightness(1.6);transform:scale(.91)}
  100%{filter:brightness(1);transform:scale(1)}
}
.piece-slot.booster-piece-hit{animation:boosterPieceFlip .46s cubic-bezier(.15,.75,.32,1.1)}
@keyframes boosterPieceFlip{
  0%{transform:scale(.82) rotate(-8deg);filter:brightness(2)}
  45%{transform:scale(1.09) rotate(6deg);filter:brightness(1.35)}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
.result-boost-reward{
  display:flex;flex-direction:column;gap:7px;align-items:center;
  margin:14px 0 16px;padding:13px 15px;
  border:1px solid #ffe09d;border-radius:19px;
  background:radial-gradient(ellipse at 50% 0%,#ffe27e38,transparent 70%),linear-gradient(115deg,#105e60bc,#0b4764ea);
  box-shadow:inset 0 1px 0 #fff4c5,0 0 22px #ffd2796b,0 8px 17px #00172579;
}
.result-boost-reward strong{font-size:19px;color:#ffe9a9;text-shadow:0 0 13px #ffc970}
.result-boost-reward span{font-size:23px;color:#f9fbdf;letter-spacing:2px}
.result-boost-reward small{color:#bce6e4;font-size:11px;text-align:center}
@media(max-width:360px){
  .boosters-bar{padding-inline:7px}
  .booster-actions{gap:5px}
  .booster-button{padding:6px 5px;grid-template-columns:auto 1fr auto}
  .booster-icon{font-size:20px}
  .booster-count{min-width:17px;height:18px}
}
@media(prefers-reduced-motion:reduce){
  .booster-button,.piece-slot.booster-piece-hit,#game-board .tile.booster-hammer-hit{animation:none!important;transition:none!important}
}

/* Mobile play priority: place the pieces right under the grid.
   Boosters are optional actions below the tray, never between grid and pieces. */
.game-screen > .piece-tray{
  flex:0 0 auto;
  margin-top:3px;
  margin-bottom:5px;
  position:relative;
  z-index:4;
}
.game-screen > .boosters-bar{
  flex:0 0 auto;
  margin:5px 2px 3px;
  padding:7px 9px 6px;
  border-radius:16px;
}
.game-screen .boosters-heading{margin-bottom:6px}
.game-screen .boosters-heading strong{font-size:11px}
.game-screen .boosters-heading span{font-size:9px}
.game-screen .booster-actions{gap:6px}
.game-screen .booster-button{min-height:43px;padding:5px 7px;border-radius:12px}
.game-screen .booster-icon{font-size:21px}
.game-screen .booster-tip{min-height:0;margin:5px 2px 0;font-size:9px;line-height:1.25}
@media (max-height:740px){
  .game-screen > .piece-tray{margin-top:2px;margin-bottom:3px}
  .game-screen > .boosters-bar{margin:3px 2px 2px;padding:5px 7px}
  .game-screen .booster-button{min-height:38px;padding:4px 6px}
  .game-screen .boosters-heading{margin-bottom:4px}
  .game-screen .booster-tip{margin-top:3px}
}