:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#edf5ff;background:#0b1426}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#203655,#0b1426 75%);min-height:100vh}main{max-width:1040px;margin:auto;padding:16px}header,.top,.controls,.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}h1{font-size:clamp(20px,4vw,28px);margin:8px 0}h1 span{color:#69ddcd}.pill{border-radius:20px;background:#1b5349;color:#b4ffe9;font-size:12px;font-weight:700;padding:8px 11px}.muted,.subtitle{color:#acbfd5;font-size:13px;line-height:1.5}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:15px 0}.stat,.panel{background:#172740;border:1px solid #334962;border-radius:15px;padding:14px}.stat strong{display:block;font-size:23px;font-variant-numeric:tabular-nums}.stat small{color:#acbfd5;font-size:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:15px}.panel h2{font-size:17px;margin:0 0 12px}.frame{background:repeating-linear-gradient(90deg,#26394d 0px,#26394d 9px,#405770 10px,#26394d 15px);border:9px ridge #738a9e;border-radius:9px;padding:10px;box-shadow:inset 0 0 0 2px #17283b,0 8px 20px #0005;position:relative}.frame:before{content:"";position:absolute;inset:3px;pointer-events:none;border:1px solid #9cafb577;border-radius:2px}.board{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));aspect-ratio:20/4;gap:3px;touch-action:none;user-select:none}.cell{min-width:0;min-height:0;border-radius:2px;background:repeating-linear-gradient(90deg,#172b3c 0,#21384b 45%,#13283c 85%);border:1px solid #3a5063}.cell.filled{background:var(--c);box-shadow:inset 0 -4px #0002;border-color:#ffffff50}.cell.good{background:#43bba6aa;border-color:#95ffe1}.cell.bad{background:#d95a69aa;border-color:#ffafb6}.progress{height:9px;border-radius:9px;background:#263d56;margin:14px 0;overflow:hidden}.progress>div{height:100%;background:linear-gradient(90deg,#37b6ca,#62e6a6);transition:width .15s}.controls{justify-content:flex-start;margin-top:14px}button{font:inherit;font-size:14px;border:1px solid #54708c;border-radius:10px;background:#294666;color:#f7fbff;font-weight:700;padding:11px 13px;cursor:pointer}button:hover:not(:disabled){background:#385e80}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:#37c4ad;color:#092722;border-color:#6ce5d0}.notice{background:#243952;border-radius:10px;padding:12px;font-size:13px;line-height:1.5;min-height:55px}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.choice{height:112px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:6px;background:#102237;border:2px solid #3a536d;touch-action:none;user-select:none}.choice.selected{border-color:#5ff1d4;background:#204655;box-shadow:0 0 0 3px #5ff1d488}.choice.empty{opacity:.45}.piece{display:grid;gap:2px;place-content:center}.unit{height:15px;width:15px;border-radius:3px}.unit.on{background:var(--c);box-shadow:inset 0 -3px #0002;border:1px solid #ffffff50}.choice small{font-size:11px;color:#b6cde1}.side{display:flex;flex-direction:column;gap:14px}.side p{margin:7px 0}.key{background:#2d4562;border-radius:4px;padding:2px 6px}.overlay{position:fixed;inset:0;background:#040b18de;z-index:10;display:none;align-items:center;justify-content:center;padding:15px}.overlay.show{display:flex}.modal{text-align:center;max-width:430px;width:100%;padding:25px;background:#1a2a43;border:1px solid #4f6b85;border-radius:20px;box-shadow:0 15px 70px #0009}.modal h2{font-size:27px}.big{font-size:45px;color:#6be6d2;font-weight:850}.scoreline{color:#bfd1e4;font-size:14px;line-height:1.7}footer{padding:20px 0;color:#a4b6cc;font-size:12px}@media(max-width:740px){.layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr}.side .panel:first-child{grid-column:1/-1}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:440px){main{padding:10px}.panel{padding:11px}.frame{border-width:5px;padding:3px}.board{gap:2px}.stats{gap:6px}.stat{padding:10px}.stat strong{font-size:21px}.side{grid-template-columns:1fr}.side .panel:first-child{grid-column:auto}}
.container-picker{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0}.container-picker button.active{background:#37c4ad;color:#092722;border-color:#6ce5d0}.container-desc{color:#b8cadd;font-size:12px}.active-note{color:#74f4d9;font-size:12px;font-weight:700}.board{width:100%;grid-template-rows:repeat(4,minmax(0,1fr));align-content:stretch}.cell{position:relative;overflow:hidden}.cell.heavy{box-shadow:inset 0 -4px #0003,inset 0 0 0 2px #f9e3ab}.cell.heavy:after{content:"◆";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none;color:#271a08;font-size:clamp(8px,1.2vw,14px);font-weight:900}.choice.heavy{border-style:dashed}.choice.heavy small{color:#ffd879;font-weight:800}.balance-panel{margin-top:10px;background:#22364d;border:1px solid #38536a;border-radius:8px;padding:10px 12px;font-size:12px;color:#cfe5f4;line-height:1.5}.balance-panel strong{color:#ffd879}.bottom-label{margin:8px 0 0;color:#ffd879;font-size:12px;font-weight:700}.reward-popup{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;font-weight:900;font-size:clamp(13px,2vw,21px);color:#ffe48c;text-shadow:0 2px 8px #050c19;animation:rewardpop 1.3s ease-out forwards;white-space:nowrap}@keyframes rewardpop{from{opacity:0;transform:translate(-50%,0) scale(.8)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-75px) scale(1.1)}}.frame{isolation:isolate}.choice:focus-visible,.container-picker button:focus-visible{outline:3px solid #f2ce70;outline-offset:2px}@media(max-width:540px){.board{gap:1px}.frame{padding:5px;border-width:5px}.cell{border-width:1px}.choice{height:94px}} 
/* v0.6.5 responsive play-zone: keep pieces and actions next to board */
@media(max-width:740px){
 .layout{display:block}
 .layout > .panel{margin-bottom:14px}
 .side{display:flex;flex-direction:column}
 .panel.mobile-cargo{margin:10px 0 0;padding:10px;border-radius:11px;background:#1d304c}
 .mobile-cargo h2{margin:0 0 7px;font-size:15px}
 .mobile-cargo .choices{gap:7px}
 .mobile-cargo .choice{height:82px;min-width:0;gap:4px}
 .mobile-cargo .choice small{font-size:10px;line-height:1.2}
 .mobile-cargo .active-note,.mobile-cargo > .muted{display:none}
 .controls.mobile-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0 3px}
 .controls.mobile-actions button{padding:10px 5px;font-size:12px;min-width:0;min-height:44px}
 .bottom-label{margin-top:10px}
 .balance-panel{margin-top:7px}
 .progress{margin:10px 0}
 .notice{margin-top:9px}
}
@media(max-width:440px){
 .controls.mobile-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .stat{padding:8px 4px;text-align:center;border-radius:9px}
 .stat strong{font-size:16px}
 .stat small{font-size:9px;line-height:1.2;display:block}
 .container-picker{margin:7px 0}
 .panel.mobile-cargo{padding:8px}
 .frame{margin-top:7px}
}

/* v0.6.5 persistent reward history and combo highlights */
.rewards-panel{background:#1d334e;border:1px solid #3a5672;border-radius:11px;padding:10px 12px;margin:10px 0;color:#e7f2fe}
.rewards-title{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;margin-bottom:7px}
.rewards-list{display:grid;gap:5px}.reward-line{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#29435f;border-radius:7px;padding:7px 9px;font-size:12px;line-height:1.35}
.reward-line strong{color:#aef5d5;white-space:nowrap}.rewards-empty{font-size:12px;color:#adc0d5;padding:4px 0}
.reward-popup{top:24%;max-width:min(95%,340px);white-space:normal;text-align:center;line-height:1.4;animation:rewardpop062 2.5s ease-out forwards;background:#162842e8;border:1px solid #ffe48c77;border-radius:9px;padding:8px 13px;box-shadow:0 5px 18px #0008}
@keyframes rewardpop062{0%{opacity:0;transform:translate(-50%,4px) scale(.94)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-65%) scale(1.04)}}
.cell.combo-flash{outline:2px solid #fff2a2;outline-offset:-2px;filter:brightness(1.5);z-index:1;animation:comboPulse 1.8s ease-out}
@keyframes comboPulse{0%,45%{filter:brightness(1.7)}100%{filter:brightness(1)}}
@media(max-width:740px){.mobile-actions button{min-height:44px}.panel.mobile-cargo .choice{min-height:88px}.rewards-panel{padding:9px;margin:9px 0}}
@media(prefers-reduced-motion:reduce){.reward-popup,.cell.combo-flash{animation:none}.reward-popup{opacity:1}}
/* v0.6.5 placement preview and touch controls */
.position-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:9px 0}
.position-tools button{min-height:46px}.position-tools .commit{background:#45cdb2;color:#082b24;border-color:#a1ffe5;flex:1;font-weight:900}
.position-tools .commit:disabled{opacity:.45}.position-status{font-size:12px;color:#c9e2f3;padding:5px 0;min-height:20px}
.direction-pad{display:flex;gap:5px;justify-content:center}.direction-pad button{min-width:43px;padding:10px 8px}
.board .cell.good{background:#32cb9e;border:2px solid #d6fff2;box-shadow:inset 0 0 0 1px #00251b}
.board .cell.bad{background:#e15c70;border:2px solid #ffd1d7}
@media(max-width:740px){.position-tools{display:grid;grid-template-columns:1fr auto;gap:6px}.position-tools .commit{min-height:53px;font-size:16px}.position-tools .direction-pad{grid-column:1/-1;order:2}.position-tools .direction-pad button{flex:1;min-height:44px}.controls.mobile-actions #rotate{display:none}.board{cursor:crosshair}.frame{margin-bottom:4px}}
body[data-input='mouse'] .position-tools{display:none!important}body[data-input='mouse'] .board{cursor:crosshair}body[data-input='touch'] .position-tools,body[data-input='pen'] .position-tools{display:flex}
@media (hover:none), (pointer:coarse){.board{cursor:default}}

/* v0.8.4 · Group Chat Pilot compact disclosures: keep play controls visible and make static help optional. */
.info-accordion,.accordion-panel{border:1px solid #38536b;border-radius:10px;background:#1b2e47;margin-top:10px;color:#dce9f6;overflow:hidden}
.info-accordion summary,.accordion-panel summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;min-height:42px;padding:11px 13px;font-size:13px;font-weight:750;user-select:none}
.accordion-panel{margin-top:0;padding:0}
.accordion-panel summary{font-size:16px;min-height:52px;padding:14px}
.info-accordion summary::-webkit-details-marker,.accordion-panel summary::-webkit-details-marker{display:none}
.info-accordion summary::before,.accordion-panel summary::before{content:'▸';color:#65daca;flex:none;transition:transform .16s}
.info-accordion[open] summary::before,.accordion-panel[open] summary::before{transform:rotate(90deg)}
.info-accordion summary:focus-visible,.accordion-panel summary:focus-visible{outline:2px solid #77e3d6;outline-offset:-3px}
.summary-tail{font-size:11px;color:#aac1d5;font-weight:500;margin-left:auto}
.accordion-body{border-top:1px solid #36516b;padding:10px 13px 13px;color:#b8cadc;font-size:13px;line-height:1.55}
.accordion-body p{margin:5px 0 9px}
.accordion-panel .accordion-body{padding:10px 14px 14px}
.accordion-panel .accordion-body p{margin:6px 0 10px}
@media(max-width:740px){body[data-input='touch'] .position-tools,body[data-input='pen'] .position-tools{display:grid}.info-accordion summary,.accordion-panel summary{min-height:44px}.info-accordion{margin-top:8px}}

/* v0.8.4 · Group Chat Pilot compact transparent image icons */
header h1{display:flex;align-items:center;gap:9px;line-height:1.1;margin:0;font-size:clamp(20px,3vw,27px)}
header h1 .brand-img{width:31px;height:31px;max-height:31px;flex-shrink:0;margin:0;border-radius:0}
.panel h2#containerTitle{display:flex;align-items:center;gap:8px;line-height:1.2;margin:0 0 10px;font-size:17px}
#containerTitle .section-img{width:28px;height:23px;max-height:23px;flex-shrink:0;margin:0;border-radius:0}
header{min-height:36px;align-items:center}
.subtitle{margin-top:4px}
.stats{margin:10px 0 12px}
@media(max-width:540px){header h1{font-size:21px}header h1 .brand-img{width:27px;height:27px;max-height:27px}#containerTitle .section-img{width:26px;height:22px}.pill{padding:5px 8px;font-size:10px}}

/* v0.8.4 · Group Chat Pilot visual release: shared design tokens, compact desktop / touch-first mobile */
:root{color-scheme:dark;--ui-border:#36516d;--ui-accent:#65d9c5;--ui-text:#ecf6ff}
main{padding:12px 15px 18px}
header{gap:12px;min-height:34px}
header h1{gap:8px;letter-spacing:-.35px}
header h1 .brand-img{width:30px;height:30px;max-height:30px;object-fit:contain}
.pill{padding:6px 10px;letter-spacing:.1px}
.subtitle{margin:4px 0 0;line-height:1.4}
.stats{gap:9px;margin:11px 0 13px}
.stat{padding:11px 13px;border-radius:12px;min-width:0}
.stat strong{font-size:22px;line-height:1.2}
.stat small{display:block;margin-top:4px;line-height:1.3}
.layout{gap:13px;align-items:start}
.panel{padding:13px;border-radius:13px;min-width:0}
.panel h2#containerTitle{gap:8px;margin-bottom:8px;font-size:16px;min-height:24px}
#containerTitle .section-img{width:27px;height:22px;object-fit:contain}
.container-picker{margin:8px 0;gap:7px}
.container-picker button{padding:9px 12px;min-height:39px}
.container-desc{margin:8px 0 10px;line-height:1.35}
.frame{padding:7px;border-width:6px;box-shadow:inset 0 0 0 2px #17283b,0 5px 13px #0003}
.side{gap:11px}
.side .panel h2{margin-bottom:8px}
.active-note{line-height:1.4;margin:4px 0 8px!important}
.choice{height:98px}
.choice small{line-height:1.22;text-align:center}
.controls{gap:7px;margin-top:10px}
.controls button{min-height:42px;padding:9px 11px}
.notice{min-height:0;margin:8px 0;padding:9px 11px;line-height:1.4}
.rewards-panel{margin:8px 0;padding:9px 11px}
.rewards-title{margin-bottom:6px}
.balance-panel{margin-top:8px;padding:8px 10px;line-height:1.4}
.progress{margin:10px 0}
.info-accordion{margin-top:8px}
.info-accordion summary{min-height:40px;padding:9px 11px}
.accordion-panel summary{min-height:46px;padding:11px 12px;font-size:14px}
.position-status{line-height:1.4}
footer{padding:13px 0;font-size:11px}
button:focus-visible{outline:3px solid #7cebd4;outline-offset:2px}
@media(min-width:741px){.layout{grid-template-columns:minmax(0,1fr) 285px}.side .panel{padding:12px}.side .choice{height:95px}.position-tools{margin:0}}
@media(max-width:740px){
 main{padding:10px 12px 16px}
 header{gap:6px;align-items:center}
 header h1{font-size:20px;gap:6px}
 header h1 .brand-img{width:27px;height:27px;max-height:27px}
 .pill{font-size:10px;padding:5px 7px}
 .subtitle{font-size:12px;line-height:1.4}
 .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:10px 0}
 .stat{padding:9px 5px;text-align:center;border-radius:10px}
 .stat strong{font-size:clamp(15px,4vw,19px)}
 .stat small{font-size:10px;line-height:1.2}
 .layout>.panel{margin-bottom:10px}
 .panel{padding:10px}
 .panel h2#containerTitle{font-size:15px;line-height:1.2}
 .container-desc{font-size:11px;margin:7px 0 8px}
 .frame{padding:4px;border-width:5px}
 .board{gap:1px}
 .panel.mobile-cargo{margin:8px 0 0;padding:9px}
 .mobile-cargo .choice{height:85px;min-height:85px}
 .position-tools{margin:7px 0}
 .position-tools .commit{min-height:49px}
 .position-status{font-size:11px;padding:3px 0}
 .controls.mobile-actions{margin:8px 0 3px;gap:6px}
 .controls.mobile-actions button{min-height:44px;padding:9px 5px;font-size:12px}
 .balance-panel{margin:7px 0}
 .rewards-panel{margin:8px 0}
 .notice{margin:7px 0}
 .info-accordion summary{min-height:42px}
 .side{gap:9px}
}
@media(max-width:440px){
 main{padding:8px}
 header h1{font-size:18px}
 .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
 .stat strong{font-size:15px}
 .stat small{font-size:9px}
 .panel{padding:9px}
 .container-picker button{min-height:42px}
 .panel.mobile-cargo{padding:8px}
 .choice .piece{transform:scale(.92)}
 .modal{padding:19px 15px;border-radius:16px}
 .modal h2{font-size:23px}
 .big{font-size:38px}
 .scoreline{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.progress>div,.info-accordion summary::before,.accordion-panel summary::before{transition:none}}


.arcade-nav{display:flex;gap:7px;margin:12px 0 10px}.arcade-nav button{flex:1;min-width:0;background:#203752;padding:10px}.arcade-nav button.active,.arcade-filters button.active{background:#37c4ad;color:#092722;border-color:#6ce5d0}.arcade-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#172740;border:1px solid #334962;border-radius:13px;padding:10px 14px;margin-top:8px}.arcade-banner strong{display:block;font-size:14px}.arcade-banner span{display:block;font-size:11px;color:#acbfd5;margin-top:3px}.arcade-mode{display:grid;gap:4px}.arcade-mode label,.arcade-card label{color:#bdd0e4;font-size:12px}.arcade-mode select,.arcade-card input{font:inherit;font-size:13px;background:#263d58;border:1px solid #557390;color:#fff;border-radius:9px;padding:10px}.arcade-view[hidden],#arcadePlay[hidden]{display:none!important}.arcade-card{background:#172740;border:1px solid #334962;border-radius:15px;padding:18px;min-height:230px}.arcade-card h2{margin-top:0}.arcade-card p{color:#acbfd5;font-size:13px;line-height:1.55}.arcade-filters{display:flex;gap:8px;margin:16px 0}.arcade-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.arcade-tile{background:#263a55;border:1px solid #395674;padding:12px;border-radius:10px}.arcade-tile strong{font-size:22px;display:block}.arcade-tile small{color:#bcd0e0}.arcade-run{display:grid;grid-template-columns:65px 1fr auto;gap:9px;border-bottom:1px solid #34506a;padding:12px 2px;align-items:center;font-size:13px}.arcade-run small{color:#a9c0d4}.arcade-form-row{display:flex;gap:8px;margin:8px 0 12px}.arcade-form-row input{flex:1;min-width:0}.arcade-team{background:#243b54;border-radius:12px;padding:16px;margin:14px 0}.arcade-team h3{margin:0 0 8px}.arcade-team small{color:#a9c0d4}.arcade-empty{padding:22px;color:#a9c0d4;text-align:center;border:1px dashed #56718a;border-radius:9px;margin-top:10px}@media(max-width:600px){.arcade-banner{align-items:stretch;flex-direction:column}.arcade-mode select{width:100%}.arcade-nav{gap:5px}.arcade-nav button{padding:11px 5px;font-size:12px}.arcade-highlights{gap:5px}.arcade-tile{padding:9px 6px}.arcade-tile strong{font-size:17px}.arcade-tile small{font-size:10px}.arcade-form-row{flex-direction:column}}

.nick-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nick-edit{padding:5px 10px;font-size:12px;border-radius:8px;background:#2b4866;color:#d8f9f1;border:1px solid #52738d}
.nick-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}
.nick-form[hidden]{display:none}
.nick-form input{background:#243b57;border:1px solid #6b8ba5;color:#fff;border-radius:8px;padding:8px 10px;width:min(240px,100%);font:inherit;font-size:14px}
.nick-form button{font-size:12px;padding:8px 12px}
.nick-form .nick-error{color:#ffb8ac;font-size:12px;width:100%;min-height:0}
@media(max-width:540px){.nick-form input{flex:1;min-width:100px}}
.share-controls{display:grid;gap:8px;margin:15px 0}.share-controls button{width:100%}#arcadeShareNote{color:#b4c8dc;font-size:12px;line-height:1.4}.modal{max-height:calc(100dvh - 30px);overflow:auto}
/* v0.8.7: Avoid mobile double-tap zoom on game controls; preserve normal document pinch zoom. */
button, select, summary, [role="button"], .arcade-nav, .controls, .position-tools, .choices { touch-action: manipulation; }