*{box-sizing:border-box}body{margin:0;min-width:1220px;background:#202638;color:#e9edf4;font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:13px}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(135deg,#343c5333,transparent 65%)}main{position:relative;width:1164px;margin:32px auto 20px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font:10px monospace;letter-spacing:2px;color:#92a4bb}h1{font:900 40px monospace;letter-spacing:-2px;margin:9px 0 8px;color:#fff2cf;text-shadow:3px 3px #111829}h1 span{font-size:18px;color:#f4be5e;margin-left:16px}header p{margin:0;color:#a7b5c9}.tag{line-height:1.9;border:2px solid #58647a;padding:10px 18px;background:#30394e;color:#a7b5c9;font:11px monospace}.tag b{font:700 14px sans-serif;color:#f4d999}.tag i{display:inline-block;width:6px;height:6px;background:#85cda8}.layout{display:grid;grid-template-columns:808px 336px;gap:20px}.board,.side{border:2px solid #0f1726;box-shadow:4px 4px 0 #111726;background:#30394c}.board{overflow:hidden}.hud{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#354157;border-bottom:2px solid #121c2b;color:#b9c6d7}.hud b{font:700 20px monospace;color:#fff0c4;margin-left:9px}.hud em{font-style:normal;color:#e9b66a;margin-right:6px}.hud span:first-child em{color:#ef8f91}.hud small{color:#e9b66a}canvas{display:block;image-rendering:pixelated}#game{width:800px;height:520px;margin:0 2px;background:#a5acbb}.bar{display:flex;gap:8px;padding:12px 14px;background:#283247;border-top:2px solid #111b2b}button{font:700 12px inherit;cursor:pointer;color:#dce6f3;background:#45526c;border:2px solid #182132;border-top-color:#77849a;border-left-color:#77849a;box-shadow:0 3px 0 #151d2d;padding:10px 13px;transition:background .1s,transform .1s}button:hover{background:#586981}button:active{transform:translateY(2px);box-shadow:0 1px 0 #151d2d}button:focus-visible{outline:2px solid #ffe4a3;outline-offset:3px}button:disabled{cursor:default;opacity:.45;transform:none}.primary{background:#e4af57;color:#302a28;border-top-color:#ffe4a0;border-left-color:#ffe4a0;border-right-color:#9d7038;border-bottom-color:#9d7038}.primary:hover{background:#f4c578}#start{margin-left:auto;min-width:205px}#message{height:42px;padding:12px 16px;font-size:12px;color:#aabbd0;border-top:1px solid #43516b}.side{padding:19px 16px}.side-heading{display:flex;align-items:center;justify-content:space-between}h2{font-size:18px;color:#fff0cf;margin:0 0 10px}.side-heading span{font:10px monospace;color:#8395b0}.sub{color:#a9b8cc;font-size:11px;line-height:1.9}.cards{display:grid;gap:10px;margin:16px 0}.card{display:flex;align-items:center;gap:10px;text-align:left;padding:7px 8px;width:100%;background:#3a465c;min-height:92px}.card canvas{width:74px;height:72px;background:#273347;border:2px solid #57637b}.card strong{display:block;font-size:13px;color:#edf2fb}.card small{display:block;font-size:10px;font-weight:400;color:#b1bfd0;margin:7px 0}.price{font:700 12px monospace;color:#f4ca77}.card.active{background:#4b5265;border-color:#f4c574;box-shadow:0 3px 0 #9c753b}.card.poor{opacity:.55}#detail{min-height:130px;border:2px solid #202b3d;background:#273347;padding:13px}#detail strong{font-size:12px;color:#fff0ca}#detail p{margin:8px 0}#upgrade{width:100%}.goal{margin-top:16px;padding-top:13px;border-top:1px solid #526078}.goal b{font:10px monospace;letter-spacing:1px;color:#d3b478}.visual-settings{margin-top:12px;font-size:11px;color:#a5b5cc}.visual-settings input{accent-color:#e4af57}.instructions{display:flex;gap:28px;padding:22px 0 10px;color:#a3b2c7;font-size:11px}.instructions b{font:11px monospace;color:#f0c075;margin-right:7px}.instructions span:last-child{margin-left:auto;color:#7489a5}footer{color:#657b99;font:9px monospace;letter-spacing:2px;margin-top:12px}.modal{position:fixed;inset:0;display:grid;place-items:center;background:#111828c9;z-index:5}.modal[hidden]{display:none}.dialog{width:400px;text-align:center;background:#344158;border:3px solid #e5ba73;box-shadow:8px 8px #111b2c;padding:28px}.dialog canvas{margin:auto;width:240px;height:180px}.dialog h2{font-size:26px;margin:12px 0}.dialog p{line-height:1.8;color:#b7c8df;font-size:13px;margin-bottom:22px}.hud b.changed{animation:pulse .25s steps(3)}@keyframes pulse{50%{color:#fff;transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.card{min-height:76px;padding:4px 8px}.card canvas{width:54px;height:56px}.cards{gap:7px;margin:12px 0}.card:disabled{opacity:.43;background:#293346;filter:saturate(.45)}.card:disabled .price{font-size:9px}.skills-heading{display:flex;justify-content:space-between;font-size:12px;font-weight:bold;color:#f1ddaf;margin:15px 0 8px}.skills-heading span{font:9px monospace;color:#879bb5}#skills{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}.skill{text-align:left;padding:9px 8px;background:#435673}.skill strong{display:block;color:#fff0c3;font-size:12px}.skill small{display:block;font-size:9px;line-height:1.7;font-weight:400;color:#c2cfdf;margin:5px 0}.skill span{font:11px monospace;color:#f1c673}.side{padding:16px}#detail{min-height:106px}.goal{margin-top:12px;padding-top:10px} .hud b{font-size:19px}
/* Desktop control panel: six compact cards, two columns and three rows. */
body{min-width:1320px}main{width:1280px;margin-top:24px}.layout{grid-template-columns:888px 372px;align-items:start}#game{width:880px;height:572px}.side{padding:14px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px;min-width:0;min-height:88px;padding:6px;text-align:left}.card canvas{width:36px;height:38px}.card>div{min-width:0}.card strong{font-size:11px;line-height:1.5}.card small{font-size:9px;line-height:1.5;margin:4px 0;overflow-wrap:anywhere}.card .price{font-size:11px}.card:disabled .price{font-size:8px}.side-heading h2{margin-bottom:7px}.side>.sub{font-size:10px;line-height:1.7}.skills-heading{margin-top:12px}#skills{margin-bottom:10px}.skill{padding:8px}#detail{min-height:104px;padding:11px}#detail .sub{font-size:10px}.goal{font-size:10px;line-height:1.7;margin-top:10px;padding-top:10px}.visual-settings{margin-top:8px}.instructions{padding-top:17px}

/* Compact map with wider two-column employee cards. */
body{min-width:1270px}main{width:1232px}.layout{grid-template-columns:768px 444px}#game{width:760px;height:494px}.cards{gap:8px}.card{grid-template-columns:42px minmax(0,1fr);min-height:88px;padding:7px;gap:8px}.card canvas{width:42px;height:44px}.card strong{font-size:12px;white-space:nowrap}.card small{font-size:10px;line-height:1.6;overflow-wrap:normal;word-break:keep-all}.card:disabled .price{font-size:9px}.card .price{white-space:nowrap}.goal{line-height:1.65}

.visual-settings{display:flex;gap:16px}.visual-settings label{cursor:pointer}#nextStage{width:100%;margin-bottom:12px}.hud b{font-size:17px}.card small{font-size:9px;line-height:1.55}.card .price,.card:disabled .price{font-size:10px}.card{min-height:94px}.goal{font-size:9px;line-height:1.65}.skill small{min-height:30px}.dialog #restart{width:100%}#game{touch-action:none}

/* Native-resolution pixels and a 50px world grid. */
body{min-width:1310px}main{width:1272px;margin-top:22px}.layout{grid-template-columns:808px 444px}header{margin-bottom:18px}h1{margin:0 0 8px}#game{width:800px;height:500px}.hud{padding:0 15px;gap:10px}.hud b{font-size:16px;margin-left:6px}.hud em{margin-right:3px}.hud .map-chip{margin-left:auto;border-left:1px solid #5d6e82;padding-left:12px}.hud .map-chip b{font-size:13px;color:#c6d9d1;margin-left:0}.card canvas{width:46px;height:48px}.card{grid-template-columns:46px minmax(0,1fr)}.goal{font-size:9px;line-height:1.6}#entryDialog{width:410px;max-width:none;color:#e8edf5;background:#303d53;border:3px solid #e3b968;box-shadow:8px 8px #111c2c;padding:28px}#entryDialog::backdrop{background:#111827dc}#entryDialog .entry-kicker{font:10px monospace;letter-spacing:1px;color:#cba66d;margin-bottom:14px}#entryDialog h2{font-size:22px;margin:0 0 10px}#entryDialog p{font-size:12px;line-height:1.8;color:#b3c3d7;margin:0 0 14px}#entryDialog label{display:block;margin:13px 0 6px;font-size:12px;font-weight:bold;color:#e7d9bc}#entryDialog input{display:block;width:100%;background:#202f44;border:2px solid #62748a;color:#f5eedc;padding:11px 12px;font:14px inherit;border-radius:0}#entryDialog input:focus{outline:2px solid #e1b96d;outline-offset:2px}#entryDialog #entryError{color:#eda9a9;min-height:15px;margin:8px 0 0;font-size:11px}#entryDialog .entry-note{font-size:10px;line-height:1.7;color:#91a8c0;margin:9px 0 16px}#entryDialog button{width:100%;padding:12px}#entryDialog:not([open]){display:none}

.hud{gap:20px}.hud span{white-space:nowrap}

/* Integer-sized portrait pixels; square-pixel canvas at native resolution. */
.card canvas{width:40px;height:48px;object-fit:contain}.card{grid-template-columns:40px minmax(0,1fr)}canvas{image-rendering:pixelated;image-rendering:crisp-edges}#game{image-rendering:pixelated}button{transition:background .1s steps(2),transform .1s steps(2)}

body:before{background:none}

/* Desktop sections: navigation, three-band arena, shared ranking table. */
html{scroll-behavior:smooth;scroll-padding-top:20px}header{justify-content:flex-start;gap:52px;align-items:flex-start}h1{font:800 26px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;letter-spacing:-1px;margin:0 0 10px}h1 span{font-size:12px;margin-left:10px}header p{font-size:12px}nav{display:flex;gap:12px;padding-top:3px}.nav-tab{display:block;padding:9px 16px;color:#b9c7d8;text-decoration:none;font:bold 13px monospace;border-bottom:2px solid transparent}.nav-tab:hover,.nav-tab[aria-current="page"]{color:#f0cc86;border-bottom-color:#e1b56e;background:#303b50}.nav-tab:focus-visible{outline:2px solid #e1b56e;outline-offset:2px}.goal ul{list-style:none;margin:9px 0 0;padding:0}.goal li{font-size:10px;line-height:2;white-space:nowrap}.ranking{margin-top:22px;border:2px solid #111b2b;background:#2c384d;padding:24px;box-shadow:4px 4px #111726;scroll-margin-top:20px}.ranking-heading{display:flex;justify-content:space-between;align-items:center}.ranking h2{font:700 24px monospace;color:#f0d099;margin:9px 0}.ranking p{color:#a9bed0;font-size:12px}.ranking table{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:16px}.ranking caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.ranking th,.ranking td{padding:14px 16px;text-align:left;border-bottom:1px solid #435269;overflow-wrap:anywhere}.ranking th{background:#223146;color:#9fb8c9;font-size:11px}.ranking td{color:#dce5e9;font-size:13px}.ranking th:first-child{width:7%}.ranking th:nth-child(5){width:17%}.ranking th:last-child{width:15%;text-align:right}.ranking td:last-child{text-align:right;font:700 16px monospace;color:#f0cb83}.ranking td:first-child{font:bold 16px monospace;color:#a5b9ca}.ranking tr:nth-child(-n+3) td:first-child{color:#f0cb83}.ranking tr:nth-child(even){background:#303d52}.ranking .ranking-note{font-size:10px;margin-bottom:0}#rankingStatus{min-height:16px}.ranking .empty{text-align:center;color:#9bafc2;padding:30px}.ranking .mine{background:#3b4d58!important}.visual-settings{margin-top:12px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hud{gap:12px;padding:0 14px}.hud .map-chip{padding-left:10px}.hud .map-chip b{font-size:12px}.dialog h2{font-size:23px;word-break:keep-all}.dialog p{word-break:keep-all}

/* Equal panel bottoms; the status board absorbs free space without scaling the map. */
.layout{align-items:stretch}.board{display:flex;flex-direction:column;min-width:0}.board>.hud,.board>#game,.board>.bar{flex-shrink:0}.board>#message{flex:1;height:auto;min-height:42px;line-height:1.8}.ranking h2{font:700 22px "Malgun Gothic","Apple SD Gothic Neo",sans-serif;letter-spacing:-.5px}.ranking #rankingStatus:empty{display:none}

.board{align-self:start}

/* Match the full employee panel, remove the map label divider, unify section headings. */
.hud .map-chip{border-left:0;padding-left:0}.side-heading h2,.skills-heading{font-size:18px;font-weight:700;line-height:1.4}.skills-heading span{align-self:center}.ranking #refreshRanking:disabled{cursor:default}