/* Original illustrated arena; four interactive rows, seven hexes per row. */
.arena-shell{container-type:inline-size;position:relative;overflow:hidden;border:1px solid #a6a07970;border-radius:22px;background:#101e23;box-shadow:0 20px 50px #0005,inset 0 0 0 5px #30413f;isolation:isolate}.arena-shell:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/brand/planner-arena.svg') center/100% 100%;opacity:1}.arena-topbar,.arena-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 24px;color:#c4d1c4;font-size:11px;letter-spacing:1px}.arena-topbar b{color:#ead8a5;letter-spacing:2px}.arena-topbar span{color:#91b2ad;font-size:10px}.arena-opponent{height:80px;position:relative;margin:0 7%;border-bottom:1px solid #a8c9ad24;background:radial-gradient(ellipse at center bottom,#b6edbc12,transparent 70%);display:flex;justify-content:center;align-items:center;gap:clamp(3px,1vw,10px)}.arena-opponent i{display:block;width:clamp(26px,5vw,52px);aspect-ratio:1.15;clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);border:0;background:#b2bba90c}.arena-opponent:after{content:'';position:absolute;bottom:-3px;width:36px;height:5px;background:#9bd8be;box-shadow:0 0 16px #94edc6aa;border-radius:50%}.arena-shell .board.builder{--cell:clamp(28px,calc((100cqw - 82px)/7.5),90px);margin:0;padding:34px 32px 30px 18px;border:0;border-radius:0;background:transparent;box-shadow:none;position:relative;isolation:auto}.arena-shell .board.builder:before,.arena-shell .board.builder:after{display:none}.arena-shell .hexrow{gap:4px;margin-top:calc(var(--cell)*-.288675);transform:none}.arena-shell .hexrow:first-child{margin-top:0}.arena-shell .hexrow:nth-child(even){transform:translateX(calc((var(--cell) + 4px)*.5))}.arena-shell .builder .hex{width:var(--cell);height:calc(var(--cell)*1.1547);clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);background:linear-gradient(145deg,#8da49480,#547b6b50);filter:none;box-shadow:none;transition:background .15s,filter .15s;overflow:visible}.arena-shell .builder .hex:before{inset:1px;background:linear-gradient(150deg,#244b3be6,#183e32e6);opacity:1}.arena-shell .builder .hex:not(.occupied):hover{background:#d8e9b2;filter:brightness(1.2)}.arena-shell .builder .hex.occupied{background:var(--u);filter:drop-shadow(0 3px 3px #0008)}.arena-shell .builder .hex.occupied:before{opacity:0}.arena-shell .builder .hex>img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;opacity:1}.arena-shell .builder .hex.selected,.arena-shell .builder .hex.drop-target{background:#e6e2ae;filter:drop-shadow(0 0 9px #acffc8aa);transform:none}.arena-shell .builder .hex>span{font-size:clamp(7px,1.2cqw,11px);bottom:13%;padding:14px 1px 5px;text-shadow:0 1px 4px #000;background:linear-gradient(transparent,#07121bf5)}.arena-shell .builder .hex:has(.hex-items img)>span{bottom:43%;font-size:clamp(7px,1.2cqw,11px)}.arena-shell .builder .hex-items{bottom:13%;padding:4px 0;background:linear-gradient(transparent,#07121be8 20%,#07121be8 85%,transparent)}.arena-shell .builder .hex-items img{width:calc(var(--cell)*.23);height:calc(var(--cell)*.23);max-width:23px;max-height:23px;border-color:#dbc58d;border-radius:2px}.arena-bottom{padding:0 24px 19px;font-size:10px;color:#9ebcb0}.arena-bottom b{color:#cee4c2;font-size:10px}.arena-side-label{position:absolute;left:8px;top:47%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:2px;color:#86aa94;pointer-events:none}.board .suggested-hex-items{position:absolute;bottom:11%;left:0;right:0;display:flex;justify-content:center;gap:1px;background:#07121bba;z-index:2}.board .suggested-hex-items img{position:static!important;width:clamp(9px,1.4vw,18px)!important;height:clamp(9px,1.4vw,18px)!important;border:1px solid #d8bc76;clip-path:none!important;border-radius:2px;object-fit:cover}.board .hex:has(.suggested-hex-items)>span{padding-bottom:18px}.phase-equipment{margin:18px 0;border-top:1px solid var(--line);padding-top:18px}.phase-equipment h3{font-size:18px}.phase-equipment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}.phase-equipment-grid article{display:flex;align-items:center;gap:10px;padding:10px;background:#0b1921;border:1px solid #29414a;border-radius:9px}.phase-equipment-grid .unit{width:48px;flex-shrink:0}.phase-equipment-grid .portrait{width:40px;height:42px}.phase-equipment-grid article>div:last-child{min-width:0;flex:1}.phase-items{display:flex;gap:5px;margin:7px 0}.phase-items img{width:30px;height:30px;border:1px solid #99824f;border-radius:4px}.phase-equipment-grid small{font-size:10px;color:#a1b7bd;display:block;line-height:1.5}.phase-equipment-grid a{font-size:10px;color:#a5f5ce}@media(max-width:600px){.arena-topbar{padding:15px 16px;font-size:10px}.arena-topbar span{font-size:8px}.arena-opponent{height:52px}.arena-shell .board.builder{padding:26px 18px 22px 6px;--cell:clamp(23px,calc((100cqw - 58px)/7.5),60px)}.arena-shell .hexrow{gap:3px}.arena-shell .hexrow:nth-child(even){transform:translateX(calc((var(--cell) + 3px)*.5))}.arena-bottom{padding:0 14px 16px;font-size:8px}.arena-bottom b{font-size:8px}.arena-side-label{left:3px;font-size:7px}.phase-equipment-grid{grid-template-columns:1fr}}