/* Боевой планшет: корпус-картинка сверху, у неё прозрачный экран; интерфейс лежит под ней. */
#tablet{position:fixed;inset:0;z-index:8;background:#131218;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .25s}
#tablet.on{opacity:1;pointer-events:auto;transition-delay:.18s}
#tablet.on #tb-stage{animation:tbfly .6s cubic-bezier(.2,.8,.25,1) .1s backwards}
@keyframes tbfly{from{transform:scale(.55) translateY(8%)}to{transform:none}}
#tablet[hidden]{display:none!important}
#tb-stage{position:absolute;transform-origin:50% 55%}
#tb-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;user-select:none}
#tb-screen{position:absolute;z-index:1;container-type:size;overflow:hidden;background:#15111f;color:#f3e7c9;
  font-family:"Rubik",system-ui,sans-serif;display:flex;flex-direction:column;gap:2cqh;padding:3cqmin 3.5cqmin}
#tablet.land #tb-screen{padding:3cqh 4cqw}
#tablet.port #tb-screen{padding-bottom:9cqh}
#tb-top{display:flex;gap:2cqw;align-items:stretch;flex:0 0 auto}
.tb-chip{background:#07050d;border:.5cqmin solid #f3e7c9;border-radius:2cqmin;padding:1cqmin 2.2cqmin;display:flex;flex-direction:column;justify-content:center;min-width:0;flex:0 0 34%}
.tb-chip b{font-size:max(2.6cqmin,10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-hearts{color:#e63950;font-size:max(3.2cqmin,12px);letter-spacing:.1em;line-height:1.1}
#tb-mon{flex:1;background:#07050d;border:.5cqmin solid #f3e7c9;border-radius:2cqmin;padding:1cqmin 2.5cqmin;display:flex;align-items:center;gap:2cqmin;min-width:0}
#tb-mon i{flex:0 0 auto;width:8cqmin;height:8cqmin;border-radius:50%;background:#7a2338;border:.5cqmin solid #ff7d93;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:4.4cqmin;color:#fff}
#tb-mon b{font-size:max(3cqmin,11px);line-height:1.1;overflow:hidden}
#tb-mon span{display:block;font-size:max(2.2cqmin,9px);color:#b9a98a;font-weight:400}
#tb-body{flex:1;min-height:0;display:flex;gap:2cqmin}
#tablet.port #tb-body{flex-direction:column;align-items:center}
#tb-wheel-box{position:relative;flex:0 0 auto;aspect-ratio:1;height:100%;max-width:100%}
#tablet.port #tb-wheel-box{height:auto;width:min(100%,50cqh);transform:scale(1.14);transform-origin:50% 45%;margin:3cqh 0}
#tablet.land #tb-wheel-box{height:100%;transform:scale(1.1)}
#tb-dial{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
#tb-wheel{position:absolute;inset:0;width:100%;height:100%;display:block}
.tb-ring{transform-box:fill-box;transform-origin:center;animation:tbspin 9s linear infinite}
@keyframes tbspin{to{transform:rotate(360deg)}}
.tb-glitch{animation:tbglitch .55s steps(2,end)}
@keyframes tbglitch{0%{transform:translate(-9px,3px) skewX(-8deg);opacity:.2}20%{transform:translate(8px,-2px) skewX(6deg);opacity:.9}40%{transform:translate(-4px,0);opacity:.5}60%{transform:translate(3px,1px);opacity:1}100%{transform:none;opacity:1}}
.tb-flash{animation:tbflash .45s ease-out}
@keyframes tbflash{0%{opacity:.75}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tb-ring,.tb-glitch,.tb-flash{animation:none}}
#tb-pack{flex:1;min-width:0;min-height:0;display:grid;gap:1.2cqmin;align-content:start;grid-auto-rows:max-content;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#tb-pack::-webkit-scrollbar{display:none}
#tablet.port #tb-pack{width:100%;grid-template-columns:1fr 1fr}
#tablet.land #tb-pack{grid-template-columns:1fr 1fr}
.tb-card{flex:none;background:#07050d;border:.45cqmin solid #4a4258;border-radius:1.8cqmin;display:flex;align-items:center;gap:1.8cqmin;padding:1cqmin 1.6cqmin 1cqmin 1cqmin;min-height:0;color:#8b8199;transition:border-color .2s,color .2s,transform .2s}
.tb-card .ic{position:relative;flex:0 0 auto;width:10.5cqmin;height:10.5cqmin}
.tb-card .ic img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 .6cqmin #0008)}
.tb-card.off .ic img{opacity:.45;filter:grayscale(.5)}
.tb-card.hit .ic img{filter:drop-shadow(0 0 1.2cqmin #ffb02e)}
#tablet.land .tb-card .ic{width:13cqh;height:13cqh}
.tb-card .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5cqmin}
.tb-card .tx b{font-size:max(2.6cqmin,10px);line-height:1.05;font-weight:700}
.tb-card .tx small{font-size:max(2.1cqmin,8.5px);line-height:1.1;color:#9a8fab;font-weight:400}
.tb-card.can .tx small{color:#b9a98a}
.tb-card.hit .tx small{color:#ffd48a}
.tb-card em{font-style:normal;font-weight:800;font-size:max(2.2cqmin,9px);color:#07050d;background:#f3e7c9;border-radius:1cqmin;padding:0 1cqmin;position:absolute;right:-.4cqmin;bottom:-.4cqmin}
.tb-card em::after{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;color:#07050d}
.tb-card.can{border-color:#f3e7c9;color:#f3e7c9}
.tb-card.hit{border-color:#ffb02e;color:#ffb02e;animation:tbpulse .9s ease-in-out infinite}
.tb-card.empty{opacity:.35}
@keyframes tbpulse{50%{transform:scale(1.04);box-shadow:0 0 2cqmin #ffb02e88}}
#tb-msg{flex:0 0 auto;text-align:center;font-size:max(2.7cqmin,10px);color:#ffe9a8;min-height:1.2em;line-height:1.15}
#tb-btns{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:1.6cqmin}
#tb-btns button{flex:1 1 40%;min-height:9cqmin;font-family:inherit;font-weight:800;font-size:max(3cqmin,12px);color:#07050d;background:#ff6a3d;border:.6cqmin solid #f3e7c9;border-radius:2.2cqmin;box-shadow:0 .8cqmin 0 #07050d;padding:0 2cqmin}
#tb-btns button.alt{background:#2a2438;color:#f3e7c9}
#tb-btns button:active{transform:translateY(.5cqmin);box-shadow:0 .3cqmin 0 #07050d}
#tablet.land #tb-btns button{min-height:11cqh}
@media (prefers-reduced-motion:reduce){.tb-card.hit{animation:none}}
#tb-timer{flex:0 0 auto;height:.8cqmin;background:#2a2438;border-radius:1cqmin;overflow:hidden}
#tb-timer i{display:block;height:100%;width:0;background:#ffb02e}
#tb-timer.run i{width:100%;transition:width var(--t) linear}
#tb-timer.run.go i{width:0}

/* камера по карте и рюкзак */
.board-wrap{overflow:hidden}
#board{transition:transform .75s cubic-bezier(.3,.1,.2,1)}
#bag{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:6;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:14px;background:#07050dee;border:2px solid #f3e7c9;color:#f3e7c9;font-weight:700;box-shadow:0 4px 0 #000a}
#bag[hidden]{display:none}
#bag .bg-ico{display:flex}
#bag .bg-ico img{width:30px;height:30px;margin-right:-8px;object-fit:contain}
#bag .bg-ico i{font-style:normal;opacity:.5;padding:0 8px}
#bag em{font-style:normal;background:#f3e7c9;color:#07050d;border-radius:10px;padding:0 7px;font-size:.8rem}
#bag.ready{border-color:#ffb02e;animation:tbpulse 1.1s ease-in-out infinite}
#bag-panel{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);z-index:6;width:min(340px,calc(100vw - 20px));max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:14px;background:#0b0813f2;border:2px solid #f3e7c9}
#bag-panel[hidden]{display:none}
.bg-card{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:#07050d;border:1.5px solid #4a4258;color:#f3e7c9}
.bg-card.ready{border-color:#ffb02e}
.bg-i{position:relative;flex:0 0 auto;width:52px;height:52px}
.bg-i img{width:100%;height:100%;object-fit:contain}
.bg-i em{position:absolute;right:-2px;bottom:-2px;font-style:normal;font-size:.75rem;background:#f3e7c9;color:#07050d;border-radius:8px;padding:0 5px;font-weight:800}
.bg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bg-t b{font-size:.95rem}.bg-t small{color:#b9a98a;font-size:.78rem;line-height:1.2}
.bg-a{display:flex;flex-wrap:wrap;gap:6px}
.bg-a button{padding:6px 10px;font-size:.8rem;border-radius:8px;background:#ff6a3d;color:#07050d;border:1.5px solid #f3e7c9;font-weight:800}
.bg-a button.alt{background:#2a2438;color:#f3e7c9}
.bg-empty{padding:12px;text-align:center;color:#8b8199}
@media (prefers-reduced-motion:reduce){#board{transition:none}#tablet.on #tb-stage{animation:none}}