*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f4f6f8;color:#18212b}
header{background:#173b2a;color:white;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}h1{margin:0;font-size:24px}header p{margin:3px 0 0;opacity:.85}
button,select,input,textarea{font:inherit;border:1px solid #cbd3d9;border-radius:8px;padding:9px}button{cursor:pointer;background:white}button:hover{filter:brightness(.96)}.primary{background:#173b2a;color:white;width:100%}
main{display:grid;grid-template-columns:280px minmax(430px,1fr) 280px;gap:14px;padding:14px}.panel{background:white;border-radius:12px;padding:14px;box-shadow:0 2px 10px #0001}.panel h2{font-size:16px;margin:12px 0 7px}.row{display:flex;gap:6px;flex-wrap:wrap}.row input{min-width:0;flex:1}
#field{position:relative;max-width:720px;aspect-ratio:68/105;margin:auto;background:#3f9557;border:4px solid white;border-radius:5px;overflow:hidden;touch-action:none;box-shadow:0 3px 15px #0003}
#field:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff08 0 11%,#00000005 11% 22%)}
.half{position:absolute;left:0;right:0;top:50%;border-top:3px solid white}.circle{position:absolute;width:20%;aspect-ratio:1;border:3px solid white;border-radius:50%;left:40%;top:calc(50% - 10%)}.box{position:absolute;left:24%;width:52%;height:16%;border:3px solid white}.top{top:-3px}.bottom{bottom:-3px}
#svg,#pieces{position:absolute;inset:0;width:100%;height:100%}.player{position:absolute;width:46px;height:46px;border-radius:50%;background:#ffe25c;border:3px solid #17212b;display:flex;align-items:center;justify-content:center;font-weight:800;transform:translate(-50%,-50%);user-select:none;touch-action:none}.player small{position:absolute;top:46px;background:#fff;padding:2px 4px;border-radius:4px;font-size:10px;white-space:nowrap}
.cone{position:absolute;transform:translate(-50%,-50%);font-size:25px}.lesson{background:#eef7f0;border-radius:8px;padding:10px;font-size:13px;line-height:1.35}.tip{text-align:center;font-size:13px;margin:8px;color:#52606d}
textarea{width:100%;height:110px;resize:vertical}#tacticName{width:100%;margin-bottom:7px}.rosterItem,.savedItem{display:flex;justify-content:space-between;align-items:center;padding:6px;border-bottom:1px solid #eee;font-size:13px}.savedItem button{padding:4px 7px}
@media(max-width:950px){main{grid-template-columns:1fr}.fieldWrap{order:-1}.controls{order:0}#field{max-height:65vh}}