*{box-sizing:border-box}body{margin:0;font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0f1320;color:#e8ebf5}
header{display:flex;gap:6px;align-items:center;padding:8px 10px;background:#161c2e;position:sticky;top:0;z-index:5}header .sp{flex:1}
button{background:#27304a;color:#e8ebf5;border:1px solid #3a4566;border-radius:8px;padding:6px 10px;font:inherit;cursor:pointer}button:hover{background:#334068}
button.pri{background:#d6312f;border-color:#f05a57}button.ok{background:#1f7a4a;border-color:#2ea866}
.muted{color:#8b93ad;font-size:12px}#status{padding:6px 10px;background:#11182a;font-size:13px;display:flex;gap:12px;flex-wrap:wrap}
main{display:grid;grid-template-columns:1fr 360px;gap:10px;padding:10px}@media(max-width:900px){main{grid-template-columns:1fr}}
.side{background:#141a2b;border-radius:12px;padding:8px}.opp{border-top:3px solid #b23b3b}.me{border-bottom:3px solid #3b7bd6}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,110px));grid-template-rows:auto auto;gap:6px;justify-content:center}
.zone{border:1px dashed #3a4566;border-radius:8px;min-height:120px;position:relative;display:flex;align-items:center;justify-content:center}
.zone .zl{position:absolute;top:2px;left:4px;font-size:10px;color:#8b93ad;z-index:2}.zone.open{border-color:#e0a83a;background:rgba(224,168,58,.07)}
.zone.tgt{outline:2px solid #ff5d5d}
.card{width:100%;max-width:104px;aspect-ratio:500/699;border-radius:7px;position:relative;cursor:pointer;background:#222b45;overflow:hidden;border:2px solid transparent}
.card img{width:100%;height:100%;object-fit:cover;display:block}.card.sel{border-color:#ffd54a}.card.hl{box-shadow:0 0 0 2px #4ade80}
.card .badge{position:absolute;bottom:2px;left:2px;right:2px;background:rgba(0,0,0,.78);border-radius:5px;font-size:11px;padding:1px 3px;display:flex;justify-content:space-between}
.card .up{color:#4ade80}.card .dn{color:#ff6b6b}.card.fd{background:repeating-linear-gradient(45deg,#2a3352,#2a3352 6px,#222a44 6px,#222a44 12px)}
.card .txt{padding:16px 4px 4px;font-size:10px}.card .ni{position:absolute;top:2px;right:2px;background:#e0a83a;color:#000;border-radius:4px;font-size:9px;padding:0 3px}
.base,.hand{display:flex;gap:5px;overflow-x:auto;padding:6px 2px;min-height:40px}.base .card{width:58px;flex:0 0 58px}.hand .card{width:86px;flex:0 0 86px}
.meta{font-size:12px;color:#aab2cc;padding:2px 4px}.mid{padding:10px;margin:8px 0;background:#1b2440;border-radius:10px;font-size:14px}
aside .panel{background:#141a2b;border-radius:12px;padding:8px 10px;margin-bottom:10px}aside h3{margin:2px 0 6px;font-size:14px}
#actions{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}#actions button{text-align:left;font-size:13px}
#log{max-height:240px;overflow:auto;font-size:12px;color:#c4cbe0}#log div{border-bottom:1px solid #1f2740;padding:2px 0}
.rec{border:1px solid #2f3a5c;border-radius:8px;padding:6px;margin-bottom:6px}.rec b{color:#ffd54a}.rec .why{font-size:12px;color:#c9d2ea;margin:3px 0}
.warn{background:#3a1d1d;border-left:3px solid #ff6b6b;padding:4px 6px;margin:4px 0;font-size:12px;border-radius:4px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:20}.hidden{display:none}
.mbox{background:#161c2e;border-radius:14px;padding:14px;max-width:640px;width:94vw;max-height:90vh;overflow:auto}
.mbox textarea,.mbox input{width:100%;background:#0f1320;color:#e8ebf5;border:1px solid #3a4566;border-radius:8px;padding:6px;font:12px monospace}
.row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.big{display:flex;gap:12px;flex-wrap:wrap}.big img{width:220px;border-radius:10px}
table.kw td{border-bottom:1px solid #263050;padding:4px;vertical-align:top;font-size:13px}
.mcoach{display:none;margin-top:6px;border-top:1px solid #2f3a5c;padding-top:6px}@media(max-width:900px){.mcoach{display:block}header{position:static}}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}header{padding-top:max(8px,env(safe-area-inset-top))}
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:#161c2e;border-top:1px solid #263050;z-index:15;padding-bottom:env(safe-area-inset-bottom)}
#tabs button{flex:1;background:none;border:0;border-radius:0;padding:6px 0;font-size:20px;display:flex;flex-direction:column;align-items:center;color:#8b93ad}#tabs button span{font-size:11px}#tabs button.on{color:#ffd54a}
.page{padding:10px;max-width:900px;margin:0 auto}.page h2{margin:6px 0}.page textarea,.page input,.page select{width:100%;background:#0f1320;color:#e8ebf5;border:1px solid #3a4566;border-radius:8px;padding:8px;font:13px system-ui}
.page textarea{font-family:monospace}.cardbox{background:#141a2b;border-radius:12px;padding:10px;margin:10px 0}
.ok-t{color:#4ade80}.bad-t{color:#ff6b6b}.chip{display:inline-block;background:#27304a;border-radius:10px;padding:1px 8px;margin:2px;font-size:12px}
.legal{font-size:11px;color:#6f7896;text-align:center;padding:10px 14px}.legal a{color:#8b93ad}
table.lst{width:100%;border-collapse:collapse;font-size:13px}table.lst td,table.lst th{border-bottom:1px solid #263050;padding:4px;text-align:left}
.demo{background:#ffd54a;color:#000;font-weight:700;border-radius:6px;padding:2px 6px;font-size:11px}
.scanprev{display:flex;gap:10px;flex-wrap:wrap}.scanprev canvas,.scanprev img{width:150px;border-radius:8px}
input[type=number]{width:70px!important}
html,body{overflow-x:hidden;max-width:100%}.grid{grid-template-columns:repeat(3,minmax(0,min(110px,30vw)))}
/* ===== v7 responsive / mobile layout ===== */
#qbar{display:none}.grab{display:none}
button{min-height:36px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:900px){
 :root{--tabs:50px;--qbar:54px;--hdr:44px}
 body{padding-bottom:0;font-size:15px}
 header{position:sticky;top:0;padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));min-height:var(--hdr);gap:4px}
 header .ttl{display:none}header button{min-height:40px;min-width:44px;padding:4px 8px;font-size:13px}
 #status{font-size:11px;padding:2px 8px;gap:8px;white-space:nowrap;overflow-x:auto;flex-wrap:nowrap;height:22px;align-items:center;scrollbar-width:none}
 #vPlay:not(.hidden){display:flex;flex-direction:column;height:calc(100dvh - var(--hdr) - env(safe-area-inset-top));overflow:hidden}
 #vPlay:not(.hidden)~footer.legal{display:none}
 main{display:block;padding:0;flex:1;min-height:0;position:relative}
 #table{--zh:clamp(48px,calc((100dvh - 22px - var(--hdr) - var(--tabs) - var(--qbar) - 2*42px - 30px - 84px - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/4),150px);
   --zw:calc(var(--zh)*.7153);height:calc(100% - var(--tabs) - var(--qbar) - env(safe-area-inset-bottom));display:flex;flex-direction:column;padding:2px max(4px,env(safe-area-inset-left)) 0 max(4px,env(safe-area-inset-right));overflow-y:auto;overflow-x:hidden}
 .side{border-radius:10px;padding:2px 4px}
 .grid,.grid{grid-template-columns:repeat(3,var(--zw));gap:4px 8px}
 .zone{min-height:0;height:var(--zh);width:var(--zw);border-radius:6px}
 .zone .zl{font-size:8px;top:1px;left:2px;text-shadow:0 0 3px #000;pointer-events:none}
 .zone .card{max-width:none;height:100%;width:auto}
 .card .badge{font-size:10px;padding:0 2px;bottom:1px;left:1px;right:1px}
 .card .ni{font-size:8px}
 .opp,.me{display:flex;flex-direction:column}
 .opp .meta{order:1}.opp .base{order:2}.opp .grid{order:3}
 .meta{font-size:10px;line-height:1.2;padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .base{min-height:0;height:42px;padding:1px;gap:3px;align-items:center}.base .muted{font-size:10px}
 .base .card{width:30px;flex:0 0 30px;border-width:1px}.base .card .badge,.base .card .ni{display:none}.base .card .txt{font-size:6px;padding:1px}
 .mid{margin:2px 0;padding:4px 8px;font-size:12px;line-height:1.25;min-height:30px;max-height:30px;overflow:hidden;border-radius:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .mid .mcoach{display:none}.mid button{min-height:26px;padding:1px 8px}
 .hand{height:84px;flex:0 0 84px;padding:3px 2px;gap:6px;overscroll-behavior-x:contain;scroll-snap-type:x proximity;background:#11182a;border-radius:8px}
 .hand .card{width:56px;flex:0 0 56px;scroll-snap-align:start}
 .me .meta{order:2}.me .base{order:1}.me .grid{order:0}.me .hand{order:3}
 #qbar{display:flex;position:fixed;left:0;right:0;bottom:calc(var(--tabs) + env(safe-area-inset-bottom));height:var(--qbar);gap:6px;align-items:center;padding:4px max(6px,env(safe-area-inset-right)) 4px max(6px,env(safe-area-inset-left));background:#131a2c;border-top:1px solid #263050;z-index:14}
 #chips{flex:1;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;align-items:center;min-width:0}
 .chipb{flex:0 0 auto;min-height:44px;max-width:72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;padding:4px 12px;border-radius:22px}
 #bSheet{min-width:56px;min-height:44px;flex:0 0 auto;font-weight:700}
 aside#sheet{position:fixed;left:0;right:0;bottom:0;z-index:18;max-height:78dvh;overflow:auto;background:#0f1320;border-radius:16px 16px 0 0;box-shadow:0 -6px 30px rgba(0,0,0,.6);padding:0 8px calc(8px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .22s ease;visibility:hidden}
 aside#sheet.open{transform:none;visibility:visible}
 .grab{display:flex;position:sticky;top:0;background:#0f1320;justify-content:space-between;align-items:center;padding:6px 2px;font-weight:600;z-index:1}.grab button{min-width:44px;min-height:44px}
 #actions{max-height:none}#actions button{min-height:44px;font-size:14px}
 .rec button{min-height:44px}
 #tabs{height:calc(var(--tabs) + env(safe-area-inset-bottom))}#tabs button{min-height:44px;padding:3px 0;font-size:18px}
 .modal{align-items:stretch}
 .mbox{width:100vw;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));font-size:16px;line-height:1.45}
 .mbox .big{flex-direction:column;align-items:center}.mbox .big img{width:min(88vw,52dvh*.7153,420px);max-width:100%}
 .mbox .big>div{min-width:0!important;width:100%}.mbox #mclose,.mbox .row button{min-height:48px;flex:1}
 .mbox .row{position:sticky;bottom:0;background:#161c2e;padding:6px 0}
 /* pages: single column, thumb-friendly */
 .page{padding:10px max(10px,env(safe-area-inset-right)) calc(70px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 .page button,.page select,.page input:not([type=checkbox]):not([type=radio]){min-height:44px}
 .page .row{flex-direction:column;align-items:stretch}.page .row>*{width:100%}
 .page table{display:block;overflow-x:auto;max-width:100%}
 .page img{max-width:100%;height:auto}
 .page *{max-width:100%;overflow-wrap:anywhere}
 footer.legal{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
/* phone landscape: boards side by side */
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 :root{--tabs:40px;--qbar:48px;--hdr:40px}
 #tabs button span{display:none}#tabs button{font-size:16px}
 header{position:static}
 #vPlay:not(.hidden){height:calc(100dvh - var(--hdr))}
 #table{--zh:clamp(44px,calc((100dvh - var(--hdr) - 22px - var(--tabs) - var(--qbar) - 70px - 24px - 40px - env(safe-area-inset-bottom))/2),130px);
   display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;column-gap:8px;align-content:start}
 .opp{grid-column:1;grid-row:1}.me{grid-column:2;grid-row:1;display:contents}
 .me .grid,.me .base,.me .meta{grid-column:2}.me .grid{grid-row:1;align-self:end}
 .side.me>.base{grid-row:2}.side.me>.meta{grid-row:2;align-self:end;display:none}
 .opp .base,.me .base{height:24px}.base .card{width:17px;flex-basis:17px}
 .opp .meta{display:none}
 .opp{flex-direction:column-reverse}
 .mid{grid-column:1;grid-row:2;max-height:24px;min-height:24px;-webkit-line-clamp:1;font-size:11px;padding:3px 6px}
 .hand{grid-column:1/-1;grid-row:3;height:70px;flex-basis:70px}.hand .card{width:46px;flex-basis:46px}
}
@media (max-width:900px){
 .card .badge{white-space:nowrap;overflow:hidden;font-size:9px}
 .zone:not(.open) .zl{display:none}
 #status{justify-content:space-between}
}
@media (max-width:900px) and (max-height:700px){
 .hand{height:72px;flex-basis:72px}.hand .card{width:48px;flex-basis:48px}
 #table{--zh:clamp(48px,calc((100dvh - 22px - var(--hdr) - var(--tabs) - var(--qbar) - 2*42px - 30px - 72px - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/4),150px)}
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .hand{height:64px;flex-basis:64px}.hand .card{width:44px;flex-basis:44px}
}
@media (max-width:900px){header b.ttl{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}}
@media (max-width:900px){header{flex-wrap:nowrap}header b.ttl{flex:1 1 0}header .sp{display:none}#playBtns{display:flex;gap:4px;flex:0 0 auto}#playBtns.hidden{display:none}}