/* Blok Evreni: compact HUD, tactile board and responsive game controls. */
:root{--tile:clamp(29px,calc((100vw - 76px)/8),70px);--gap:clamp(3px,.55vw,6px)}
html{background:#080e20}
body{min-height:100svh;padding:18px 12px 24px;background:radial-gradient(ellipse 50% 28% at 50% 0%,#30456e 0%,transparent 82%),radial-gradient(circle at 8% 42%,#1e2860 0%,transparent 36%),radial-gradient(circle at 95% 75%,#143953 0%,transparent 34%),#080e20}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#ccedff 1px,transparent 1.5px),radial-gradient(#a49dff 1px,transparent 1.5px);background-size:89px 97px,139px 151px;background-position:15px 24px,72px 63px}
.app{position:relative;width:min(100%,760px);margin:0 auto}
.top{width:min(100%,676px);margin:0 auto 12px;min-height:52px}
.logo-icon{width:41px;height:41px;filter:drop-shadow(0 4px 12px #57c9ff77)}
.logo h1{font-size:clamp(23px,4vw,32px);letter-spacing:-.055em}
.eyebrow{font-size:9px;letter-spacing:.17em;margin-top:3px}
.header-actions{gap:7px}
.icon-btn{width:42px;height:42px;border-radius:13px;background:linear-gradient(155deg,#9b85e2,#6959b6);border:1px solid #d0c1ff;box-shadow:inset 0 1px #ffffff9c,0 4px 0 #3f347c,0 9px 15px #0006;transition:transform .16s,box-shadow .16s,filter .16s}
.icon-btn:hover,.icon-btn:focus-visible{filter:brightness(1.2);transform:translateY(-2px)}
.icon-btn:active{transform:translateY(3px);box-shadow:inset 0 2px 5px #352a70,0 1px 0 #3f347c}
.control-art{width:31px;height:31px}
.hud{width:min(100%,676px);margin:0 auto 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:10px}
.scores{display:flex;gap:8px;margin:0;min-width:0}
.score-card{min-width:100px;flex:1;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 13px;background:linear-gradient(145deg,#25375b,#15243d);border:1px solid #496993;border-radius:13px;box-shadow:inset 0 1px #ffffff1f,0 5px 15px #02071455}
.score-card:after{display:none}
.score-card.best{flex:.85;background:linear-gradient(145deg,#262f59,#18233e)}
.score-label{font-size:10px;letter-spacing:.1em;color:#a8c2e9}
.score-num{font-size:clamp(22px,2.6vw,29px);line-height:1;font-variant-numeric:tabular-nums;color:#f7fbff;text-shadow:0 0 12px #7ed6ff4a}
.score-card.best .score-num{color:#f9d78c;text-shadow:0 0 12px #ffcc7540}
.mode-bar{margin:0;gap:5px;max-width:none;background:#0c1930;border:1px solid #3a5277;padding:4px;border-radius:13px}
.mode-btn{min-height:37px;padding:5px 10px;font-size:11px;white-space:nowrap;border:0;border-radius:9px;background:transparent;transition:transform .15s,background .15s}
.mode-btn.active{background:linear-gradient(135deg,#397cbe,#6a55b2);box-shadow:inset 0 1px #ffffff60,0 3px 8px #0005}
.mode-btn:hover{background-color:#365279;transform:translateY(-1px)}
.mode-mark{width:10px;height:10px;border-width:2px}
.instruction{width:min(100%,676px);min-height:19px;margin:0 auto 7px;color:#b8cbe9;font-size:11px;font-weight:700;text-align:center}
.board-shell{width:max-content;max-width:100%;padding:12px;border-radius:25px;background:linear-gradient(145deg,#8aadd7 0%,#405d89 5%,#1e3356 15%,#111e38 80%,#2d4f7d 100%);border:1px solid #8fb7e4;box-shadow:inset 0 2px 1px #ffffff8c,inset 0 -4px 4px #050b1d9c,0 8px 0 #0b1730,0 25px 48px #000b,0 0 45px #47c2ff24;transition:filter .2s,box-shadow .2s}
.board-shell:before,.board-shell:after{width:20px;height:20px;opacity:.85}
.board{gap:var(--gap);padding:3px;border-radius:15px;background:#0a1730;box-shadow:inset 0 3px 7px #020817e0,0 0 0 1px #aacfff3d}
.cell,.cell:not(.filled):not(.preview-good):not(.preview-bad){border-radius:clamp(5px,.85vw,9px);background:linear-gradient(145deg,#20395f,#1a3153 55%,#1b3459);border:1px solid #82a8d031;box-shadow:inset 0 2px 4px #09162daa,inset 0 -2px 1px #7fa9dd20,0 1px 0 #08152a;transition:filter .12s,transform .17s,box-shadow .17s}
.cell:not(.filled):before{content:"";position:absolute;inset:23%;border-radius:5px;background:linear-gradient(150deg,#8ac4ff12,transparent 65%);pointer-events:none}
.cell.center-zone:not(.filled),.cell.center-zone:not(.filled):not(.preview-good):not(.preview-bad){background:linear-gradient(145deg,#2c4975,#1b365b)}
.cell.center-zone:not(.filled):after{background:#90eaff33}
.cell.filled,.mini-cell,.ghost-tile{border:1px solid #ffffff8c;border-radius:clamp(5px,.85vw,9px);background:linear-gradient(150deg,var(--bright) 0%,var(--tone) 48%,var(--dark) 100%);box-shadow:inset 1px 2px 1px #ffffffa3,inset -2px -4px 2px #0a174d62,0 3px 0 #07132a,0 6px 12px #0007}
.cell.filled:after,.mini-cell:after,.ghost-tile:after{left:12%;top:10%;width:57%;height:17%;background:#ffffff8c;filter:blur(1px)}
.cell.preview-good,.cell.preview-bad{transform:scale(.96);z-index:2}
.cell.preview-good{background:linear-gradient(145deg,var(--bright),var(--tone));border:2px solid #e1fff5;box-shadow:inset 0 1px #ffffffb9,0 0 0 2px #52efb766,0 0 17px #47ffbd91}
.cell.preview-bad{background:linear-gradient(145deg,#fa7887,#b73e67);border:2px solid #ffb1b6;box-shadow:0 0 14px #ff5f82a8}
.cell.placed-snap{animation:place-snap .32s cubic-bezier(.17,1.25,.4,1) both;z-index:2}
.cell.clear{animation:clear-sweep .38s ease-in forwards;z-index:3}
.board-shell.line-impact{box-shadow:inset 0 2px 1px #fff,0 8px 0 #0b1730,0 0 45px #62f9e6aa,0 25px 48px #000b}
@keyframes place-snap{0%{transform:scale(1.28);filter:brightness(1.8)}65%{transform:scale(.9)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes clear-sweep{0%{filter:brightness(1);transform:scale(1);opacity:1}35%{filter:brightness(2.4);transform:scale(1.08);opacity:1}100%{filter:brightness(2);transform:scale(.16) rotate(12deg);opacity:0}}
.score-fly{position:absolute;z-index:7;left:50%;top:32%;transform:translate(-50%,0);pointer-events:none;color:#f9f6c1;font-size:clamp(20px,5vw,30px);font-weight:1000;white-space:nowrap;text-shadow:0 2px 2px #12203f,0 0 18px #f7d16f;animation:score-fly .9s ease-out forwards}
@keyframes score-fly{to{opacity:0;transform:translate(-50%,-70px) scale(1.17)}}
.tray-wrap{width:min(100%,650px);margin:17px auto 0;padding:10px 11px 11px;border-radius:20px;background:linear-gradient(145deg,#22385d,#111e39);border:1px solid #6685b3;box-shadow:inset 0 1px #ffffff35,0 6px 0 #0a1730,0 15px 28px #0008}
.tray-header{padding:0 4px 8px;color:#b8d6fa;font-size:10px;letter-spacing:.15em}
#comboText{color:#f8d886}
.tray{min-height:112px;gap:7px}
.piece-slot{min-height:106px;background:linear-gradient(160deg,#243b62,#162747);border:1px solid #5978a571;border-radius:15px;box-shadow:inset 0 1px #ffffff1d,inset 0 -3px #0918338a;transition:transform .16s,background .16s,box-shadow .16s,border-color .16s}
.tray .piece-slot{touch-action:none}
.piece-slot:hover:not(.used),.piece-slot.selected{transform:translateY(-3px);background:linear-gradient(160deg,#315484,#20345d);border-color:#9beafa;box-shadow:inset 0 1px #ffffff4d,0 5px 0 #0d2040,0 10px 17px #0007,0 0 15px #73dbff44}
.piece-slot.dragging{opacity:.45;transform:scale(.96)}
.piece-slot.used{opacity:.44;background:#13233c}
.piece-slot.unplaceable{filter:saturate(.55)}
.piece{gap:4px;filter:drop-shadow(0 3px 3px #0008)}
.mini-cell,.mini-empty{width:clamp(19px,3vw,31px);height:clamp(19px,3vw,31px)}
.floating{gap:var(--gap);opacity:1;filter:drop-shadow(0 14px 12px #000b) drop-shadow(0 0 12px #a1d9ff77)}
.ghost-tile,.ghost-empty{width:var(--tile);height:var(--tile)}
.bottom{width:min(100%,650px);margin:17px auto 0;gap:9px}
.bottom .pill{min-height:45px;border-radius:13px;color:#fff;border:1px solid #d1c2ff;background:linear-gradient(145deg,#a18de6,#705cc2);box-shadow:inset 0 1px #ffffffa6,0 4px 0 #41347f,0 8px 15px #0007;transition:transform .14s,filter .14s,box-shadow .14s}
.bottom .pill:hover:not(:disabled){filter:brightness(1.18);transform:translateY(-2px)}
.bottom .pill:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 3px 5px #392d78,0 1px 0 #41347f}
.bottom .pill:disabled{opacity:1;filter:none;color:#e9e2fa;border-color:#aca0d7;background:linear-gradient(145deg,#776ba9,#60558f);box-shadow:inset 0 1px #ffffff78,0 3px 0 #39315e,0 7px 12px #0006}
.mode-btn:focus-visible,.bottom .pill:focus-visible,.extras summary:focus-visible{outline:3px solid #b2efff;outline-offset:3px}
.bottom .pill.primary{background:linear-gradient(145deg,#bba4ff,#8a6cde 65%,#7057c5);color:#fff;border-color:#e0d4ff;box-shadow:inset 0 1px #ffffffbd,0 4px 0 #49378c,0 8px 17px #8969de70}
.bottom .mini-art{filter:brightness(0) invert(1) drop-shadow(0 1px 2px #352567)}
.mini-art{width:24px;height:24px}
.power-core{width:min(100%,650px);margin:15px auto 0;padding:8px 12px;background:#132441a8;border-color:#3f5e83;border-radius:12px}
.power-core strong{font-size:10px}.power-core small{font-size:10px;margin-top:2px}
.core-orb{width:10px;height:10px}
.extras{width:min(100%,650px);margin:12px auto 0;padding:0 12px;border:1px solid #3e587e;border-radius:12px;background:#101e36b5;color:#bad0ed}
.extras summary{cursor:pointer;list-style:none;padding:10px 0;font-size:11px;font-weight:900;letter-spacing:.09em;display:flex;align-items:center;justify-content:space-between}
.extras summary::-webkit-details-marker{display:none}
.extras summary:after{content:"⌄";font-size:18px;line-height:10px;transition:transform .15s}
.extras[open] summary:after{transform:rotate(180deg)}
.extras .stats{margin:0 0 8px;justify-content:flex-start}
.extras .mission{margin:8px 0}
.extras .awards{margin:9px 0 12px;justify-content:flex-start}
.extras .game-note{margin:0 0 12px;text-align:left;max-width:none}
@media(max-width:620px){body{padding:12px 12px 22px}.top{margin-bottom:9px}.hud{grid-template-columns:1fr;gap:6px}.scores{order:1}.mode-bar{order:2;justify-content:center}.mode-btn{min-height:33px;flex:1}.score-card{min-width:0;padding:7px 10px}.score-num{font-size:23px}.instruction{margin-bottom:7px}.tray-wrap{margin-top:13px}.piece-slot{min-height:92px}.tray{min-height:94px}.bottom{margin-top:13px}.bottom .pill{font-size:11px;padding:8px 5px;min-height:44px}.mini-art{width:19px;height:19px}.power-core{margin-top:13px}.board-shell{padding:9px;border-radius:20px}.board{padding:2px}}
@media(max-width:360px){.score-label{font-size:9px}.score-num{font-size:20px}.mini-cell,.mini-empty{width:18px;height:18px}.piece-slot{min-height:82px}.tray{min-height:85px}.logo h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Keep the board and all three choices visible together on wider screens. */
@media(min-width:760px){
  :root{--tile:clamp(39px,min(70px,calc((100vw - 365px)/8),calc((100dvh - 310px)/8)),70px)}
  .app{width:min(100%,1000px)}
  .top,.hud,.instruction{width:min(100%,960px)}
  .top{margin-bottom:9px}
  .hud{margin-bottom:7px}
  .instruction{margin-bottom:6px}
  .game-stage{width:min(100%,960px);margin:auto;display:grid;grid-template-columns:max-content clamp(220px,25vw,260px);align-items:start;justify-content:center;gap:16px}
  .board-shell{margin:0}
  .play-rail{min-width:0;display:flex;flex-direction:column;gap:11px}
  .tray-wrap,.bottom,.power-core{width:100%;margin:0}
  .tray-wrap{padding:10px}
  .tray{grid-template-columns:1fr;min-height:0;gap:6px}
  .piece-slot{min-height:clamp(70px,calc((100dvh - 400px)/3),104px)}
  .mini-cell,.mini-empty{width:clamp(20px,2.5vw,27px);height:clamp(20px,2.5vw,27px)}
  .bottom{gap:6px}
  .bottom .pill{min-height:44px;padding:8px 4px;font-size:11px;gap:3px}
  .mini-art{width:19px;height:19px}
  .power-core{min-height:65px}
  .extras{width:min(100%,960px)}
}
@media(max-width:759px){
  :root{--tile:clamp(29px,calc((100vw - 76px)/8),70px)}
  .game-stage{width:100%}
  .board-shell{margin:0 auto}
  .play-rail{width:min(100%,650px);margin:auto}
  .tray-wrap{margin-top:10px;padding:8px 9px 9px}
  .tray-header{padding-bottom:5px}
  .tray{min-height:88px}
  .piece-slot{min-height:88px}
  .bottom{margin-top:10px}
  .power-core{margin-top:11px}
}
@media(max-width:759px) and (max-height:700px){
  :root{--tile:clamp(19px,min(calc((100vw - 76px)/8),calc((100dvh - 430px)/8)),70px)}
  .top{margin-bottom:6px}
  .hud{margin-bottom:5px;gap:4px}
  .instruction{min-height:15px;margin-bottom:5px}
  .tray-wrap{margin-top:2px}
  .piece-slot,.tray{min-height:72px}
  .mini-cell,.mini-empty{width:clamp(14px,4vw,19px);height:clamp(14px,4vw,19px)}
  .piece{gap:3px}
  .bottom{margin-top:9px}
}
@media(max-width:360px) and (max-height:620px){body{padding-top:0}.top{min-height:42px;margin-bottom:2px}:root{--tile:clamp(19px,calc((100dvh - 430px)/8),29px)}.instruction{display:none}}
.power-core{flex-wrap:wrap;position:relative;gap:7px}
.core-copy{flex:1;min-width:0}
.core-help{flex:none;width:24px;height:24px;display:grid;place-items:center;border:1px solid #789ac8;border-radius:50%;background:#264168;color:#e5f6ff;font-size:14px;font-weight:900;line-height:1;box-shadow:inset 0 1px #ffffff40}
.core-help:hover,.core-help[aria-expanded="true"]{background:#3c6d9d;box-shadow:0 0 10px #5bcdfb66}
.core-help:focus-visible{outline:3px solid #b2efff;outline-offset:2px}
.core-tip{flex-basis:100%;margin:2px 0 0;padding:8px 9px;border-radius:8px;background:#071930;color:#c8eaff;font-size:11px;line-height:1.4}
.core-tip[hidden]{display:none}
.cell.filled{filter:saturate(1.12) contrast(1.06);border-color:#ffffffac}
#comboText.combo-pulse{animation:combo-pulse .58s ease-out both}
@keyframes combo-pulse{0%{transform:scale(.8);filter:brightness(2)}55%{transform:scale(1.22);filter:brightness(1.7)}100%{transform:scale(1);filter:brightness(1)}}
.line-flash{position:absolute;z-index:4;pointer-events:none;border-radius:18px;background:linear-gradient(90deg,transparent,#ecffffc9 45%,#fcfff9 50%,#ecffffc9 55%,transparent);filter:drop-shadow(0 0 12px #9af6ff);transform-origin:center;animation:line-flash .45s ease-out forwards}
.line-flash.vertical{background:linear-gradient(180deg,transparent,#ecffffc9 45%,#fcfff9 50%,#ecffffc9 55%,transparent)}
@keyframes line-flash{0%{opacity:0;transform:scale(.15)}40%{opacity:.92;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.line-flash,#comboText.combo-pulse{animation-duration:.01ms!important}}

/* Reserve real vertical breathing room for tall pieces and their shadows. */
.piece-slot{--mini-size:clamp(18px,2.5vw,29px);padding:10px 6px;overflow:visible}
.piece-slot .mini-cell,.piece-slot .mini-empty{width:var(--mini-size);height:var(--mini-size)}
.piece-slot[data-rows="4"]{--mini-size:clamp(16px,calc((100dvh - 565px)/5),24px)}
.piece-slot[data-rows="5"]{--mini-size:clamp(14px,calc((100dvh - 580px)/5),20px)}
@media(min-width:760px){.piece-slot{--mini-size:clamp(17px,calc((100dvh - 560px)/4),27px)}}
@media(min-width:760px) and (max-height:700px){.piece-slot{padding-block:7px}}
@media(max-width:759px) and (max-height:780px){
  .piece-slot{--mini-size:clamp(14px,4vw,19px);padding:5px}
  .piece-slot[data-rows="4"]{--mini-size:clamp(14px,4vw,19px)}
  .piece-slot[data-rows="5"]{--mini-size:clamp(12px,3.5vw,16px)}
}