@import "https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap";:root{--bg:#eef2f4;--grid:#dde3e7;--text:#333;--muted:#8a949b;--panel:#fff;--green:#4cd964;--blue:#3fa9f5;--red:#f15b5b;--gray:#b8c0c6;color:var(--text);font-family:Ubuntu,Trebuchet MS,sans-serif}*{box-sizing:border-box}body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:32px 32px;min-height:100vh;margin:0}button,input,select{font:inherit;color:inherit}.btn{color:#fff;cursor:pointer;text-shadow:0 1px #0003;border:0;border-radius:6px;padding:10px 18px;font-size:16px;font-weight:700;transition:filter .1s;box-shadow:inset 0 -4px #0003}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(2px);box-shadow:inset 0 -1px #0003}.btn:focus-visible{outline-offset:2px;outline:3px solid #222}.btn-green{background:var(--green)}.btn-blue{background:var(--blue)}.btn-red{background:var(--red)}.btn-gray{background:var(--gray)}.btn-wide{width:100%}.btn-small{padding:6px 14px;font-size:14px}.lobby{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.logo{color:#444;letter-spacing:-1px;margin:0 0 24px;font-size:clamp(48px,12vw,80px);font-weight:700}.logo span{color:var(--blue)}.panel{background:var(--panel);border-radius:10px;flex-direction:column;gap:12px;width:min(100%,380px);padding:20px;display:flex;box-shadow:0 4px #0000001f}.nick-input,.modal input,.modal select{background:#fff;border:2px solid #ccd3d8;border-radius:6px;outline:none;width:100%;padding:12px 14px;font-size:18px}.nick-input{text-align:center}.nick-input:focus,.modal input:focus,.modal select:focus{border-color:var(--blue)}.error{color:#c0392b;text-align:center;background:#fde4e4;border-radius:6px;padding:8px 10px;font-size:14px}.rooms-header{color:var(--muted);text-transform:uppercase;justify-content:space-between;margin-top:4px;font-size:13px;font-weight:700;display:flex}.room-list{border:2px solid #e6eaed;border-radius:6px;max-height:280px;overflow-y:auto}.room-row{align-items:center;gap:10px;padding:8px 10px;display:flex}.room-row+.room-row{border-top:2px solid #eef1f3}.room-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:700;overflow:hidden}.lock{margin-right:6px;font-size:12px}.room-count{color:var(--muted);font-size:14px}.room-empty{color:var(--muted);text-align:center;padding:24px 10px}.modal-backdrop{z-index:10;background:#00000059;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal h2{text-align:center;overflow-wrap:anywhere;margin:0;font-size:24px}.modal form{flex-direction:column;gap:12px;display:flex}.modal-actions{gap:10px;display:flex}.modal-actions .btn{flex:1}.game-screen{position:fixed;inset:0}.game-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.game-leave{position:absolute;top:16px;left:16px}button:disabled{cursor:not-allowed;opacity:.55;filter:none}.editor{background:var(--bg);flex-direction:column;display:flex;position:fixed;inset:0}.editor-bar{background:var(--panel);z-index:1;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;display:flex;box-shadow:0 3px #00000014}.editor-bar input,.editor-bar select{background:#fff;border:2px solid #ccd3d8;border-radius:6px;outline:none;padding:6px 8px;font-size:15px}.editor-bar input:focus,.editor-bar select:focus{border-color:var(--blue)}.editor-name{flex:160px;min-width:0;font-weight:700}.editor-size{color:var(--muted);align-items:center;gap:6px;font-weight:700;display:flex}.editor-size input{text-align:center;width:64px}.editor-players{color:var(--muted);align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex}.editor-actions{gap:8px;margin-left:auto;display:flex}.editor-symmetry{align-items:center;gap:8px;display:flex}.editor-symmetry .check:has(input:disabled){color:var(--muted);cursor:not-allowed}.editor-hint{color:var(--muted);font-size:13px;font-weight:700}.editor-body{flex:1;min-height:0;display:flex}.editor-palette{background:var(--panel);border-right:2px solid #e6eaed;flex:0 0 236px;width:236px;padding:12px 14px 16px;overflow-y:auto}.editor-palette h3{color:var(--muted);text-transform:uppercase;margin:14px 0 8px;font-size:12px}.editor-palette h3:first-child{margin-top:0}.tool-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.tool{cursor:pointer;background:#fff;border:2px solid #e6eaed;border-radius:6px;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;font-size:11px;font-weight:700;display:flex}.tool:hover{border-color:#bfc8ce}.tool-active,.tool-active:hover{border-color:var(--blue);background:#e8f4fe}.tool-erase{width:32px;height:32px;color:var(--red);place-items:center;font-size:20px;display:grid}.tile-icon{image-rendering:pixelated;background-image:url(/sprites/tiny-battle/tilemap_packed.png);background-repeat:no-repeat;display:block}.owner-row{gap:6px;display:flex}.owner{background:var(--owner);color:#fff;cursor:pointer;opacity:.55;border:0;border-radius:6px;flex:1;padding:6px 0;font-size:13px;font-weight:700;box-shadow:inset 0 -3px #0003}.owner-active{opacity:1;outline-offset:1px;outline:3px solid #333}.player-summary{margin:0;padding:0;font-size:13px;list-style:none}.player-summary li{align-items:center;gap:8px;padding:3px 0;display:flex}.player-summary i{border-radius:3px;flex:0 0 12px;width:12px;height:12px}.player-summary span:first-of-type{width:52px;font-weight:700}.player-summary span:nth-of-type(2){color:var(--muted)}.player-summary b{color:var(--red);margin-left:auto}.editor-warning{color:#c0392b;margin:8px 0 0;font-size:12px;font-weight:700}.palette-footer{justify-content:space-between;align-items:center;margin-top:16px;display:flex}.check{cursor:pointer;align-items:center;gap:6px;font-size:14px;font-weight:700;display:flex}.editor-stage{flex:1;min-width:0;position:relative}.editor-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.editor-hud{color:#fff;pointer-events:none;background:#00000073;border-radius:6px;padding:6px 10px;font-size:13px;font-weight:700;position:absolute;bottom:12px;left:12px}.editor-hud span{opacity:.85;font-weight:400}.editor-toast{background:var(--green);color:#fff;pointer-events:none;border-radius:6px;padding:8px 14px;font-weight:700;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 -3px #0003}.editor-toast-error{background:var(--red)}.modal .room-row .btn-red{padding:6px 10px}@media (width<=720px){.editor-body{flex-direction:column-reverse}.editor-palette{border-top:2px solid #e6eaed;border-right:0;flex:none;width:auto;max-height:40vh}.tool-grid{grid-template-columns:repeat(4,1fr)}.editor-actions{margin-left:0}.editor-hud span{display:none}}.room-map{max-width:90px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.room-screen{flex-direction:column;min-height:100vh;display:flex}.room-bar{background:var(--panel);flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;display:flex;box-shadow:0 3px #00000014}.room-bar h1{overflow-wrap:anywhere;margin:0;font-size:22px}.room-status{color:var(--muted);margin-left:auto;font-size:14px;font-weight:700}.room-layout{flex:1;justify-content:center;align-items:flex-start;gap:16px;padding:16px;display:flex}.room-layout .panel{width:auto}.room-side{flex:0 0 320px}.room-maps{flex:auto;max-width:820px}.room-layout h3{color:var(--muted);text-transform:uppercase;margin:0;font-size:12px}.room-layout h3 span{text-transform:none;font-weight:400}.room-note{color:var(--muted);text-align:center;margin:0;font-size:14px}.slot-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.slot-list li{border:2px solid #e6eaed;border-radius:6px;align-items:center;gap:10px;padding:8px 10px;font-weight:700;display:flex}.slot-list i{border-radius:4px;flex:0 0 14px;width:14px;height:14px}.slot-list li.slot-empty{color:var(--muted);border-style:dashed}.slot-empty i{opacity:.35}.slot-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.slot-tag{color:#667;background:#e6eaed;border-radius:4px;padding:2px 6px;font-size:11px}.slot-you{color:var(--blue);background:#e8f4fe}.map-preview{background:#dfe5e9;border-radius:6px;width:100%;height:auto;display:block}.map-preview-empty{aspect-ratio:4/3}.chosen-map{flex-direction:column;gap:4px;display:flex}.chosen-map .map-preview{margin-bottom:4px}.chosen-map span{color:var(--muted);font-size:13px}.map-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;display:grid}.map-card{text-align:left;cursor:pointer;background:#fff;border:2px solid #e6eaed;border-radius:8px;flex-direction:column;gap:4px;padding:8px;display:flex}.map-card:hover{border-color:#bfc8ce}.map-card-active,.map-card-active:hover{border-color:var(--green);background:#effbf1}.map-card .map-preview{margin-bottom:4px}.map-card strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.map-card span{color:var(--muted);font-size:12px}.game-info{color:#fff;background:#00000073;border-radius:6px;flex-direction:column;gap:4px;max-width:50vw;padding:8px 12px;font-size:14px;display:flex;position:absolute;top:16px;right:16px}.game-info>span{white-space:nowrap;border-radius:4px;align-items:center;gap:6px;padding:2px 4px;display:flex}.game-info i{border-radius:3px;flex:0 0 10px;width:10px;height:10px}.game-info .seat-name{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.game-info b{font-variant-numeric:tabular-nums;margin-left:10px}.game-info .seat-active{background:#ffffff2e}.game-info small{color:#b8f5c4;font-variant-numeric:tabular-nums;margin-left:6px;font-size:12px}.shop-unit em{color:#2e9e45;font-style:normal;font-weight:700}.turn-banner{background:var(--owner);color:#fff;text-shadow:0 1px #00000040;white-space:nowrap;border-radius:8px;align-items:center;gap:10px;padding:8px 16px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:inset 0 -4px #0003}.turn-banner span{opacity:.85;font-size:14px}.turn-banner strong{font-size:18px}.game-end-turn{padding:14px 26px;font-size:18px;position:absolute;bottom:16px;right:16px}.game-hint{color:#fff;pointer-events:none;background:#00000073;border-radius:6px;padding:8px 14px;font-size:14px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.game-toast{background:var(--red);color:#fff;pointer-events:none;text-align:center;border-radius:6px;max-width:calc(100vw - 32px);padding:8px 14px;font-weight:700;position:absolute;top:70px;left:50%;transform:translate(-50%);box-shadow:inset 0 -3px #0003}.game-toast-info{background:#2f3b45}.action-panel{gap:8px;width:min(360px,100vw - 32px);position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.action-unit{align-items:center;gap:10px;display:flex}.action-unit div{flex-direction:column;display:flex}.action-unit span{color:var(--muted);font-size:13px}.action-note{color:var(--muted);margin:0;font-size:13px}.cargo-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.cargo-list li{border:2px solid #e6eaed;border-radius:6px;align-items:center;gap:8px;padding:4px 6px;font-size:13px;font-weight:700;display:flex}.cargo-list .tile-icon{flex:0 0 28px}.cargo-list span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.action-note b{color:var(--red)}.action-buttons{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.action-cancel{color:var(--muted);cursor:pointer;background:0 0;border:0;margin-left:auto;padding:4px 6px;font-size:14px;font-weight:700}.action-cancel:hover{color:var(--text)}.shop{gap:10px;width:min(340px,100vw - 32px);max-height:calc(100vh - 160px);position:absolute;top:72px;overflow-y:auto}.shop-left{left:16px}.shop-right{max-height:calc(100vh - 270px);top:180px;right:16px}.shop-head{align-items:center;gap:10px;display:flex}.shop-head h2{margin:0;font-size:20px}.shop-head span{color:var(--muted);margin-left:auto;font-size:14px}.shop-head b{color:var(--text)}.shop-close{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 4px;font-size:24px;line-height:1}.shop-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.shop-list li{border:2px solid #e6eaed;border-radius:8px;align-items:center;gap:10px;padding:6px 8px;display:flex}.shop-list .tile-icon{flex:0 0 40px}.shop-unit{flex-direction:column;flex:1;min-width:0;display:flex}.shop-unit strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.shop-unit span{color:var(--muted);font-size:12px}.shop-list .btn{font-variant-numeric:tabular-nums;min-width:84px}@media (width<=640px){.turn-banner{top:70px}.shop{top:120px}.game-hint,.action-panel{bottom:84px}}.game-error{background:var(--red);color:#fff;border-radius:6px;padding:12px 16px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.invite{background:#e8f4fe;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;font-size:14px;display:flex}.invite span{overflow-wrap:anywhere;flex:1;min-width:0}.invite-dismiss{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0 4px;font-size:20px;line-height:1}.admin-status{align-items:center;gap:8px;margin-top:14px;font-size:13px;display:flex}.admin-badge{background:var(--green);color:#fff;border-radius:4px;padding:2px 8px;font-weight:700}.text-link{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:13px;font-weight:700;text-decoration:underline}.text-link:hover{color:var(--text)}.view-only{color:#9a6b00;background:#fff4d6;border-radius:6px;padding:4px 10px;font-size:13px;font-weight:700}.editor-title{overflow-wrap:anywhere;margin:0;font-size:20px}.read-only .unit-name,.read-only .unit-stats input,.read-only .building-note-field textarea{cursor:default;background:#f4f6f8;border-color:#0000}.read-only .unit-name:focus,.read-only .unit-stats input:focus,.read-only .building-note-field textarea:focus{border-color:#0000}.read-only .unit-stats input::-webkit-inner-spin-button{display:none}.read-only .type-toggle button{cursor:default}.read-only .type-toggle button:disabled{opacity:1}.no-traits{color:var(--muted);font-size:12px}.btn-row{gap:10px;display:flex}.btn-row .btn{flex:1}.units-screen{flex-direction:column;min-height:100vh;display:flex}.units-colors{width:200px}.units-loading{padding:40px 16px}.units-status{background:var(--green);color:#fff;border-radius:6px;align-self:center;margin:12px 16px 0;padding:8px 14px;font-weight:700;box-shadow:inset 0 -3px #0003}.units-status-error{background:var(--red)}.unit-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;width:100%;max-width:1200px;margin:0 auto;padding:16px;display:grid}.unit-grid .unit-card{gap:10px;width:auto}.unit-head{align-items:center;gap:12px;display:flex}.unit-sprite{background-color:#eef2f4;border-radius:8px;flex:0 0 64px}.unit-name,.unit-stats input{background:#fff;border:2px solid #ccd3d8;border-radius:6px;outline:none;width:100%;min-width:0;padding:7px 9px}.unit-name{font-size:17px;font-weight:700}.unit-name:focus,.unit-stats input:focus{border-color:var(--blue)}.field-invalid,.field-invalid:focus{border-color:var(--red)!important;background:#fdecec!important}.type-toggle{background:#eef1f3;border-radius:8px;gap:4px;padding:3px;display:flex}.type-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:1;padding:5px 0;font-size:13px;font-weight:700}.type-toggle .type-active{color:#fff;box-shadow:inset 0 -3px #0003}.type-land.type-active{background:#6aa84f}.type-air.type-active{background:var(--blue)}.type-sea.type-active{background:#2f6fb5}.editor-actions[hidden]{display:none}.page-tabs{background:#eef1f3;border-radius:8px;gap:4px;padding:3px;display:flex}.page-tab{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 14px;font-size:16px;font-weight:700}.page-tab:hover{color:var(--text)}.page-tab-active,.page-tab-active:hover{color:var(--text);background:#fff;box-shadow:0 2px #00000014}.buildings-note{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.building-card{align-self:start}.building-card h2{margin:0;font-size:20px}.unit-stats.building-income{grid-template-columns:1fr}.building-note-field{color:var(--muted);text-transform:uppercase;flex-direction:column;gap:3px;font-size:12px;font-weight:700;display:flex}.building-note-field textarea{width:100%;min-height:64px;color:var(--text);font:inherit;text-transform:none;resize:vertical;background:#fff;border:2px solid #ccd3d8;border-radius:6px;outline:none;padding:7px 9px;font-size:14px;font-weight:400}.building-note-field textarea:focus{border-color:var(--blue)}.building-builds-title{color:var(--muted);text-transform:uppercase;margin:0;font-size:12px;font-weight:700}.building-builds{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.building-builds li{background:#f4f6f8;border-radius:6px;align-items:center;gap:8px;padding:3px 6px;font-size:13px;font-weight:700;display:flex}.building-builds .tile-icon{flex:0 0 28px}.building-builds span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.building-builds b{color:var(--muted);font-variant-numeric:tabular-nums}.trait-legend{width:calc(100% - 32px);max-width:1168px;margin:16px auto 0}.trait-legend h3{color:var(--muted);text-transform:uppercase;margin:0;font-size:12px}.trait-legend ul{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 16px;margin:0;padding:0;list-style:none;display:grid}.trait-legend li{color:var(--muted);align-items:flex-start;gap:8px;font-size:13px;display:flex}.trait-legend li .trait{flex:none}.unit-traits{flex-wrap:wrap;align-items:center;gap:6px;min-height:28px;display:flex}.trait{color:#9a6b00;cursor:help;background:#fff4d6;border-radius:999px;align-items:center;gap:4px;padding:3px 8px;font-size:12px;font-weight:700;display:inline-flex;position:relative;box-shadow:inset 0 -2px #00000014}.trait:focus-visible{outline:2px solid var(--blue);outline-offset:1px}.trait-remove{color:inherit;opacity:.6;cursor:pointer;background:0 0;border:0;padding:0;font-size:14px;line-height:1}.trait-remove:hover{opacity:1}.trait-tip{z-index:20;color:#fff;text-align:left;opacity:0;pointer-events:none;background:#333;border-radius:6px;width:max-content;max-width:220px;padding:7px 10px;font-size:12px;font-weight:400;line-height:1.4;transition:opacity .12s,transform .12s;position:absolute;bottom:calc(100% + 8px);left:-4px;transform:translateY(4px)}.trait-tip:after{content:"";border:5px solid #0000;border-top-color:#333;position:absolute;top:100%;left:16px}.trait:hover .trait-tip,.trait:focus-within .trait-tip{opacity:1;transform:translateY(0)}.trait-add{color:var(--muted);cursor:pointer;background:#fff;border:2px dashed #ccd3d8;border-radius:999px;outline:none;padding:3px 6px;font-size:12px;font-weight:700}.trait-add:hover,.trait-add:focus{border-color:var(--blue);color:var(--blue)}.unit-stats{grid-template-columns:1fr 1fr;gap:8px;display:grid}.unit-stats label{color:var(--muted);text-transform:uppercase;flex-direction:column;gap:3px;font-size:12px;font-weight:700;display:flex}.unit-stats input{color:var(--text);text-transform:none;font-size:15px;font-weight:700}@media (width<=760px){.units-colors{order:3;width:100%}.room-layout{flex-direction:column;align-items:stretch}.room-side{flex:none}.room-status{margin-left:0}}