* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #05070d;
  color: #cfe8ff;
}

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }

.panel {
  background: rgba(12, 18, 32, 0.85);
  border: 1px solid rgba(80, 180, 255, 0.35);
  border-radius: 14px;
  padding: 26px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(40, 130, 255, 0.15), inset 0 0 30px rgba(40, 130, 255, 0.04);
}

.auth-panel { width: 320px; text-align: center; }
.auth-panel h1 { font-size: 26px; letter-spacing: 4px; font-weight: 300; margin-bottom: 4px; }
.auth-panel h1 .glow { color: #5fd4ff; text-shadow: 0 0 16px rgba(95, 212, 255, .8); font-weight: 600; }
.subtitle { color: #6f8bab; font-size: 12px; margin-bottom: 22px; letter-spacing: 1px; }

input {
  width: 100%; padding: 11px 12px; margin-bottom: 10px;
  background: rgba(5, 10, 20, .7); border: 1px solid rgba(80, 150, 220, .3); border-radius: 8px;
  color: #cfe8ff; font-size: 14px;
}
input:focus { outline: none; border-color: #5fd4ff; box-shadow: 0 0 10px rgba(95, 212, 255, .3); }

button {
  padding: 11px 16px; border: 1px solid rgba(95, 212, 255, .4); border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, rgba(60, 150, 230, .35), rgba(30, 90, 160, .35));
  color: #eaf6ff; font-weight: 600; font-size: 13px; letter-spacing: .5px;
  transition: all .15s;
}
button:hover { background: linear-gradient(180deg, rgba(95, 212, 255, .5), rgba(40, 120, 200, .5)); box-shadow: 0 0 14px rgba(95, 212, 255, .4); }
button.secondary { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); }
button.secondary:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.button-row { display: flex; gap: 8px; }
.button-row button { flex: 1; }
.error { color: #ff8a7a; min-height: 18px; font-size: 12px; margin-top: 8px; }

#spaceCanvas { position: fixed; inset: 0; display: block; cursor: grab; }
#spaceCanvas:active { cursor: grabbing; }

#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; pointer-events: none;
}
.hud-resources {
  display: flex; gap: 14px; background: rgba(8, 14, 26, .75); border: 1px solid rgba(80,150,220,.25);
  border-radius: 10px; padding: 8px 16px; backdrop-filter: blur(6px); pointer-events: auto;
}
.res { display: flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.metal { background: #c98f5e; box-shadow: 0 0 6px #c98f5e; }
.dot.gaz { background: #e8c07a; box-shadow: 0 0 6px #e8c07a; }
.dot.cristal { background: #7fb8d0; box-shadow: 0 0 6px #7fb8d0; }
.dot.energie { background: #f0e070; box-shadow: 0 0 6px #f0e070; }
.dot.credits { background: #7fe0a0; box-shadow: 0 0 6px #7fe0a0; }
.res.credits { color: #7fe0a0; font-weight: 600; }

#locationLabel {
  background: rgba(8,14,26,.75); border: 1px solid rgba(80,150,220,.25); border-radius: 10px;
  padding: 8px 16px; font-size: 12px; color: #8fb3d9; backdrop-filter: blur(6px);
}

#viewControls {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 8px;
}
.view-btn { background: rgba(8,14,26,.8); border: 1px solid rgba(80,150,220,.3); }
.view-btn.active { background: rgba(95, 212, 255, .18); border-color: #5fd4ff; box-shadow: 0 0 12px rgba(95,212,255,.3); }

.side-panel {
  position: fixed; top: 70px; right: 16px; bottom: 70px; width: 320px; z-index: 6;
  background: rgba(8, 14, 26, .9); border: 1px solid rgba(80,150,220,.3); border-radius: 12px;
  backdrop-filter: blur(8px); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}

/* Sur petit écran (mobile), le panneau devient une feuille en bas d'écran
   qui ne prend que ~45% de la hauteur — on garde l'étoile et les planètes
   animées visibles en haut, c'est tout l'intérêt visuel du jeu. */
@media (max-width: 560px) {
  .side-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 46vh;
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
}
.side-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid rgba(80,150,220,.2); font-size: 15px; font-weight: 600;
}
.close-btn { background: none; border: none; color: #8fb3d9; font-size: 16px; padding: 2px 6px; }
.close-btn:hover { color: #fff; box-shadow: none; background: none; }

#planetList, #empirePlanetList, #researchList, #notificationList { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.planet-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(80,150,220,.15); border-radius: 10px;
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.planet-swatch { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px currentColor inset; }
.planet-info { flex: 1; min-width: 0; }
.planet-info .name { font-size: 13px; font-weight: 600; }
.planet-info .meta { font-size: 11px; color: #8fb3d9; }
.planet-card button { font-size: 11px; padding: 6px 10px; white-space: nowrap; }
.owned-tag { font-size: 11px; color: #7fe0a0; font-weight: 600; }

.panel-footer { padding: 10px; border-top: 1px solid rgba(80,150,220,.2); }
.panel-footer button { width: 100%; }

.panel-content { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.panel-content h4 { font-size: 12px; color: #8fb3d9; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 8px; }

.ship-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(80,150,220,.15); border-radius: 10px;
  padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.ship-card .icon { font-size: 22px; }
.ship-card .info { flex: 1; min-width: 0; }
.ship-card .info .name { font-size: 13px; font-weight: 600; }
.ship-card .info .stats { color: #8fb3d9; font-size: 11px; }
.ship-card button { font-size: 11px; padding: 6px 10px; white-space: nowrap; }
.ship-card input[type="checkbox"] { width: 16px; height: 16px; }
.ship-card .status-idle { color: #7fe0a0; }
.ship-card .status-moving { color: #ffb85f; }

.send-form { display: flex; gap: 6px; margin-bottom: 8px; }
.send-form input { width: 60px; padding: 8px; margin-bottom: 0; text-align: center; }
.send-form button { flex: 1; }
.hint { font-size: 11px; color: #6f8bab; line-height: 1.4; }

.battle-side { background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.battle-side .who { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.battle-side.lost { border-left: 3px solid #ff6a5a; }
.battle-side.won { border-left: 3px solid #7fe0a0; }
.owned-tag.other { color: #ff9a7a; }

#toast {
  position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: rgba(8,14,26,.95); border: 1px solid #5fd4ff; color: #eaf6ff;
  padding: 9px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .3s;
  pointer-events: none; white-space: nowrap; box-shadow: 0 0 16px rgba(95,212,255,.4);
}
#toast.show { opacity: 1; }

.research-card, .notification-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(80,150,220,.15); border-radius: 10px; padding: 11px 12px;
}
.research-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.research-card .title, .notification-card .title { font-size: 13px; font-weight: 600; }
.research-card .desc, .notification-card .meta { color: #8fb3d9; font-size: 11px; line-height: 1.45; margin-top: 4px; }
.research-card .progress { color: #ffb85f; font-size: 11px; }
.notification-card.unread { border-color: rgba(95,212,255,.45); box-shadow: inset 3px 0 0 #5fd4ff; }
#notifBadge { display:inline-flex; min-width:16px; height:16px; padding:0 4px; align-items:center; justify-content:center; border-radius:8px; font-size:9px; background:rgba(95,212,255,.18); }
.alliance-card,.event-card{background:rgba(255,255,255,.03);border:1px solid rgba(80,150,220,.15);border-radius:10px;padding:11px 12px}
.alliance-card input,.alliance-card button{margin-top:7px;width:100%}
.market-form{display:grid;grid-template-columns:1fr 1fr;gap:6px}.market-form select,.market-form input,.market-form button{width:100%}.market-row,.rank-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid rgba(80,150,220,.15);border-radius:10px;padding:9px 10px;font-size:11px}.market-row .meta,.rank-row span:last-child{color:#8fb3d9}.rank-row{margin-bottom:7px}.event-card .title,.alliance-card .title{font-size:14px;font-weight:700}.event-card .desc,.alliance-card .desc{font-size:11px;color:#8fb3d9;line-height:1.45;margin-top:5px}

.command-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.command-card{padding:10px;border:1px solid rgba(120,180,255,.2);background:rgba(10,18,32,.65);border-radius:10px}.command-card button{margin-top:8px}@media(max-width:800px){.command-grid{grid-template-columns:1fr}}
/* Phase 6 */
#logisticsContent { overflow-y:auto; }
#logisticsContent section { display:flex; flex-direction:column; gap:8px; }
#logisticsContent .market-form { margin-top:6px; }
@media (max-width: 720px) {
  #viewControls { flex-wrap: wrap; max-width: 96vw; justify-content: center; }
  .view-btn { font-size: 11px; padding: 7px 9px; }
}

/* Phase 7 — Civilisation */
.civil-hero{background:linear-gradient(135deg,rgba(95,212,255,.10),rgba(170,110,255,.08));border:1px solid rgba(95,212,255,.22);border-radius:12px;padding:12px}
.civil-hero .title{font-size:15px;font-weight:700}.civil-hero .desc{font-size:11px;color:#8fb3d9;line-height:1.45;margin-top:4px}
.civil-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.civil-metrics span{background:rgba(255,255,255,.03);border-radius:8px;padding:7px;font-size:10px;color:#8fb3d9}.civil-metrics b{display:block;color:#fff;font-size:13px;margin-top:2px}
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.policy-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;background:rgba(255,255,255,.025);border:1px solid rgba(80,150,220,.18);border-radius:9px;padding:9px}.policy-card.selected{border-color:#5fd4ff;box-shadow:0 0 12px rgba(95,212,255,.18)}.policy-card b{font-size:11px}.policy-card small{font-size:10px;line-height:1.35;color:#8fb3d9}.policy-card span{font-size:9px;color:#6f8bab}
.civil-planet{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(80,150,220,.15);border-radius:10px;padding:9px}.civil-planet b{font-size:12px}.civil-planet .meta{font-size:10px;color:#8fb3d9;margin-top:3px}.civil-planet select{width:100%}
@media(max-width:560px){.policy-grid{grid-template-columns:1fr}.civil-metrics{grid-template-columns:1fr 1fr 1fr}.civil-planet{grid-template-columns:1fr}.civil-planet select{margin-top:4px}}


.governance-hero{padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:linear-gradient(135deg,rgba(80,160,255,.14),rgba(255,255,255,.02));margin-bottom:12px}
.crisis-card{padding:12px;border:1px solid rgba(255,190,80,.22);border-radius:12px;background:rgba(255,180,60,.05);margin-bottom:8px}
.crisis-card .button-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.crisis-card button{flex:1;min-width:120px}

/* Phase 1.2 — Factions IA */
.faction-card{padding:11px 12px;border:1px solid rgba(120,180,255,.20);background:rgba(10,18,32,.65);border-radius:10px}.faction-card .title{font-size:14px;font-weight:700}.faction-card .meta,.faction-card .reputation{font-size:10px;color:#8fb3d9;margin-top:5px;line-height:1.45}.faction-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.faction-actions button{font-size:10px;padding:7px}@media(max-width:560px){.faction-actions{grid-template-columns:1fr}}

/* Galaxy 2.0 dashboard */
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.metric{padding:10px;border:1px solid rgba(111,171,230,.18);border-radius:8px;background:rgba(8,18,34,.62)}.metric span{display:block;font-size:10px;opacity:.62;text-transform:uppercase;letter-spacing:.08em}.metric strong{font-size:18px}.list-card{margin:6px 0;padding:9px;border:1px solid rgba(111,171,230,.14);border-radius:8px;background:rgba(7,16,29,.5)}

/* ==========================================================
   SPACE EMPIRE 2.1 · UNIVERSE COMMAND
   Mobile-first command board / Meta Games embedded mode
   ========================================================== */
:root {
  --se-bg:#020711;--se-panel:#07111f;--se-panel-2:#0b1727;--se-line:rgba(105,210,255,.18);
  --se-cyan:#66dcff;--se-blue:#4388ff;--se-text:#edfaff;--se-muted:#86a6bd;--se-green:#57e8b1;
  --se-danger:#ff7187;--se-dock:78px;
}
html,body{width:100%;height:100%;overscroll-behavior:none;background:#020711;color:var(--se-text)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
.screen{inset:0;width:100%;height:100dvh}
#spaceCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;background:#020711}
.game-screen{display:block;overflow:hidden;background:#020711}

/* Login */
.auth-screen{background:radial-gradient(circle at 50% 30%,#0b2b4a 0,transparent 28%),radial-gradient(circle at 10% 10%,#35208055 0,transparent 24%),linear-gradient(155deg,#02050c,#05101d 55%,#02040a);overflow:hidden}
.auth-cosmos{position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(circle,#bcecff 0 1px,transparent 1.3px);background-size:79px 79px;mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.auth-cosmos i{position:absolute;border:1px solid #64dfff20;border-radius:50%;box-shadow:0 0 80px #4dc8ff10}
.auth-cosmos i:nth-child(1){width:460px;height:460px;left:-220px;top:-120px}.auth-cosmos i:nth-child(2){width:360px;height:360px;right:-180px;bottom:-70px}.auth-cosmos i:nth-child(3){width:180px;height:180px;right:14%;top:12%}
.auth-panel{position:relative;width:min(430px,calc(100vw - 28px));padding:30px 26px;border:1px solid #65dbff2c;background:linear-gradient(145deg,#071523e8,#040b14e8);box-shadow:0 34px 90px #000a,inset 0 0 48px #5fdcff0b;backdrop-filter:blur(18px);border-radius:24px;text-align:left}
.brand-kicker{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--se-cyan);margin-bottom:10px}.auth-panel h1{font-size:clamp(30px,8vw,48px);font-weight:850;letter-spacing:-.035em;margin:0}.auth-panel h1 .glow{font-weight:850}.auth-panel .subtitle{font-size:13px;line-height:1.55;margin:7px 0 18px}.auth-status{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #62dfff22;background:#061421;border-radius:999px;color:#9cc3d8;font-size:10px;margin-bottom:20px}.auth-status span{width:7px;height:7px;background:var(--se-green);border-radius:50%;box-shadow:0 0 12px var(--se-green)}
.auth-panel label{display:block;color:#8eafc4;font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;margin-top:10px}.auth-panel label input{margin-top:6px;text-transform:none;letter-spacing:0}.auth-panel input{min-height:48px;border-radius:12px;border:1px solid #70cfff20;background:#020a13c9;padding:12px 14px;color:white;outline:none}.auth-panel input:focus{border-color:#5fdcff80;box-shadow:0 0 0 3px #5fdcff12}.auth-panel .button-row{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-top:12px}.auth-panel button{min-height:46px;border-radius:12px}.auth-foot{display:block;color:#5f7a8c;font-size:10px;margin-top:14px;text-align:center}.error{min-height:18px;margin-top:8px;color:#ff8090;font-size:11px;text-align:center}

/* HUD */
.command-hud{position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:10;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid #69dcff1f;border-radius:16px;background:#04101bd9;backdrop-filter:blur(16px);box-shadow:0 18px 46px #0006}
.brand-block{display:flex;align-items:center;gap:8px;min-width:0}.brand-block small,.brand-block strong{display:block}.brand-block small{font-size:8px;letter-spacing:.17em;color:var(--se-cyan);font-weight:800}.brand-block strong{font-size:11px;letter-spacing:.08em;color:#dff9ff;white-space:nowrap}.brand-orbit{display:grid;place-items:center;width:31px;height:31px;border:1px solid #62dfff35;border-radius:50%;font-size:22px;color:#6ee7ff;box-shadow:inset 0 0 16px #62dfff15}
.hud-resources{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none;gap:5px;justify-content:center}.hud-resources::-webkit-scrollbar{display:none}.res{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:6px 8px;border:1px solid #6ddfff12;border-radius:999px;background:#071827b8;font-size:10px;color:#bfd9e8;font-variant-numeric:tabular-nums}.res b{font-size:8px;color:#668aa0}.dot{width:6px;height:6px}
.hud-actions{display:flex;align-items:center;gap:6px}.game-status{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid #52ecb329;border-radius:999px;color:#8ce8c4;font-size:8px;font-weight:800;letter-spacing:.08em}.game-status i{width:6px;height:6px;border-radius:50%;background:var(--se-green);box-shadow:0 0 8px var(--se-green)}.game-status.offline{color:#ff9aa7;border-color:#ff71872a}.game-status.offline i{background:#ff7187;box-shadow:0 0 8px #ff7187}
#locationLabel{padding:6px 9px;border-radius:999px;font-size:9px;white-space:nowrap}.hud-icon{width:32px;height:32px;padding:0;border-radius:10px;background:#081827;border:1px solid #69ddff19;color:#8eb3c8}

/* Primary dock */
.primary-dock{position:fixed;z-index:11;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(58px,76px));gap:5px;padding:6px;border:1px solid #6cdbff20;border-radius:18px;background:#04101bed;backdrop-filter:blur(18px);box-shadow:0 16px 50px #0008;width:auto;max-width:calc(100vw - 18px)}
.primary-dock .view-btn{min-width:0;height:56px;padding:5px 4px;border:1px solid transparent;border-radius:13px;background:transparent;color:#7799af;display:grid;place-items:center;align-content:center;gap:2px}.primary-dock .view-btn span{font-size:18px;line-height:1}.primary-dock .view-btn small{font-size:9px;font-weight:700}.primary-dock .view-btn.active{color:#dffbff;border-color:#65ddff2c;background:linear-gradient(180deg,#0d3545aa,#071b2aaa);box-shadow:inset 0 0 20px #51dfff0b}

/* Tools */
.universe-tools{position:fixed;right:max(12px,env(safe-area-inset-right));top:92px;z-index:8;display:grid;gap:5px}.universe-tools button{width:36px;height:36px;padding:0;border-radius:12px;border:1px solid #70ddff1f;background:#061522d9;color:#a5cfdf;font-size:18px;backdrop-filter:blur(10px)}

/* Command drawer */
.drawer-backdrop{position:fixed;inset:0;z-index:18;background:#0007;backdrop-filter:blur(2px)}
.command-drawer{position:fixed;z-index:19;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 72px);transform:translateX(-50%);width:min(760px,calc(100vw - 18px));max-height:min(70dvh,620px);overflow:auto;border:1px solid #6be1ff25;border-radius:22px;background:linear-gradient(155deg,#081726f7,#030a13f7);box-shadow:0 32px 90px #000c;backdrop-filter:blur(22px);padding:14px}.command-drawer>header{position:sticky;top:-14px;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:10px 4px 12px;background:linear-gradient(#081726 75%,transparent)}.command-drawer header small,.command-drawer header strong{display:block}.command-drawer header small{color:var(--se-cyan);font-size:8px;letter-spacing:.15em;font-weight:850}.command-drawer header strong{font-size:13px;margin-top:3px}.command-drawer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.drawer-action{min-width:0;min-height:78px;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;column-gap:8px;padding:10px;border:1px solid #69dcff16;border-radius:14px;background:#071523;color:#dff7ff}.drawer-action>span{grid-row:1/3;font-size:22px}.drawer-action b{font-size:11px}.drawer-action small{font-size:9px;color:#7194a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drawer-action:hover{border-color:#68e5ff45;background:#0a2231}.drawer-action.danger{border-color:#ff718721}.drawer-action.core{background:linear-gradient(135deg,#10284a,#081624)}

/* Panels */
.side-panel{top:82px;right:12px;bottom:86px;width:min(390px,calc(100vw - 24px));border-radius:18px;border-color:#68dcff22;background:linear-gradient(160deg,#071522f5,#030a12f5);backdrop-filter:blur(18px);box-shadow:0 28px 80px #000a}.side-panel-header{min-height:52px;padding:12px 14px;border-color:#69ddff15}.side-panel-header span{font-size:12px;letter-spacing:.02em}.close-btn{min-width:34px;min-height:34px;border-radius:10px!important}.panel-content,#planetList,#empirePlanetList,#researchList,#notificationList{padding:11px;gap:8px}.panel-content h4{color:#78dfff;font-size:9px;letter-spacing:.12em;margin:4px 0 8px}.panel-footer{padding:10px 11px}.planet-card,.ship-card,.research-card,.notification-card,.alliance-card,.event-card,.command-card,.faction-card,.list-card,.market-row,.rank-row{border-color:#6ddfff16!important;background:#071522c7!important;border-radius:12px!important}.planet-card,.ship-card{padding:10px}.market-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.market-form input,.market-form select,.market-form button,.send-form input,.send-form button{min-height:40px;margin:0;border-radius:9px}.hint{color:#708fa4}.metric{border-color:#6ddfff18;background:#071522c4}.metric strong{color:#eafcff}

#toast{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 78px);max-width:calc(100vw - 28px);white-space:normal;text-align:center;border-radius:12px;background:#071727f7}

/* Canvas labels / accessibility */
body.embed-mode .auth-foot{display:none}
body.embed-mode .command-hud{top:max(7px,env(safe-area-inset-top))}

@media (max-width: 780px){
  .command-hud{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "resources resources";gap:6px;padding:7px 8px}.brand-block{grid-area:brand}.hud-resources{grid-area:resources;justify-content:flex-start}.hud-actions{grid-area:actions}.brand-block strong{font-size:9px}.brand-orbit{width:28px;height:28px}.game-status{display:none}#locationLabel{max-width:135px;overflow:hidden;text-overflow:ellipsis}.res{padding:5px 7px;font-size:9px}
  .universe-tools{top:112px;right:9px}.universe-tools button{width:34px;height:34px}
  .command-drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-panel{top:auto;left:8px;right:8px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 72px);width:auto;height:min(70dvh,650px);border-radius:20px}
  .side-panel-header{position:sticky;top:0;z-index:3;background:#071522ef;backdrop-filter:blur(14px)}
  .market-form{grid-template-columns:1fr 1fr}.send-form{display:grid;grid-template-columns:64px 64px 1fr}
}
@media (max-width: 460px){
  :root{--se-dock:72px}.primary-dock{grid-template-columns:repeat(5,minmax(0,1fr));width:calc(100vw - 14px);bottom:max(6px,env(safe-area-inset-bottom));padding:5px}.primary-dock .view-btn{height:54px}.primary-dock .view-btn small{font-size:8px}.command-drawer{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 66px);width:calc(100vw - 14px);padding:10px;border-radius:18px}.command-drawer-grid{gap:5px}.drawer-action{min-height:68px;padding:8px;grid-template-columns:27px 1fr}.drawer-action>span{font-size:19px}.drawer-action b{font-size:10px}.drawer-action small{font-size:8px}
  .side-panel{left:6px;right:6px;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 66px);height:min(72dvh,660px)}
  .auth-panel{padding:24px 18px}.auth-panel .button-row{grid-template-columns:1fr}.auth-panel h1{font-size:36px}
}
@media (orientation:landscape) and (max-height:560px){
  .command-hud{top:6px;right:86px}.hud-resources{display:none}.primary-dock{left:8px;bottom:8px;transform:none;grid-template-columns:repeat(5,58px)}.side-panel{top:58px;bottom:8px;right:8px;left:auto;width:min(390px,44vw);height:auto}.command-drawer{left:8px;bottom:74px;transform:none;width:min(620px,70vw);max-height:calc(100dvh - 86px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* SPACE_EMPIRE_V21_POLISH */
#spaceCanvas { touch-action: none; user-select: none; -webkit-user-select: none; }
.planet-quick-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.planet-quick-actions button { min-width:31px; min-height:31px; padding:4px 7px; border-radius:9px; }
.war-hero { padding:14px; border:1px solid #ff7b9424; border-radius:14px; background:linear-gradient(135deg,#37132155,#071522dd); }
.war-hero .title { font-size:14px; font-weight:800; color:#ffd9df; }
.war-hero .desc { color:#91adbd; font-size:10px; line-height:1.5; margin-top:4px; }
pre { max-width:100%; overflow:auto; white-space:pre-wrap; word-break:break-word; color:#9fc5d7; font-size:9px; line-height:1.45; }
@media(max-width:520px){
  .planet-card { align-items:flex-start; flex-wrap:wrap; }
  .planet-info { min-width:140px; }
  .planet-quick-actions { width:100%; justify-content:flex-start; padding-left:38px; }
}

/* Space Empire 4.4 — état Empire avant la première colonie */
.empire-empty-journey { margin: 10px; padding: 14px; border: 1px solid rgba(95,212,255,.2); background: linear-gradient(145deg, rgba(95,212,255,.07), rgba(4,12,24,.55)); color: #9fb6cc; }
.empire-empty-journey > small { display:block; font-size:9px; letter-spacing:.18em; color:#5fd4ff; margin-bottom:5px; }
.empire-empty-journey > b { display:block; color:#fff; font-size:14px; margin-bottom:6px; }
.empire-empty-journey p { font-size:12px; line-height:1.45; margin:0 0 10px; }
.empire-empty-journey > div { display:grid; grid-template-columns:90px 1fr; gap:8px; padding:5px 0; border-top:1px solid rgba(255,255,255,.05); font-size:11px; }
.empire-empty-journey span { color:#6f8bab; }
.empire-empty-journey strong { color:#d9ecfb; font-weight:600; }
.empire-empty-journey button { width:100%; margin-top:10px; padding:9px 11px; border:1px solid rgba(95,212,255,.35); background:rgba(95,212,255,.1); color:#dff6ff; cursor:pointer; }


/* Space Empire 4.5.1 — Strict Account Gate conservé */
.auth-panel { width:min(390px,calc(100vw - 28px)); }
.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px;padding:4px;border:1px solid rgba(95,212,255,.14);border-radius:11px;background:rgba(3,9,18,.55); }
.auth-tabs button { padding:9px 8px;background:transparent;border-color:transparent;color:#7897ad;box-shadow:none; }
.auth-tabs button.active { color:#eafcff;background:rgba(95,212,255,.12);border-color:rgba(95,212,255,.28); }
.auth-panel label { display:block;text-align:left;color:#86a9bf;font-size:10px;letter-spacing:.04em; }
.auth-panel .wide { width:100%; }
.auth-rule { margin:10px 0 0;color:#658499;font-size:10px;line-height:1.45; }
.auth-rule b { color:#9edff1; }
.auth-session,.auth-created { display:grid;gap:9px;text-align:left;padding:14px;border:1px solid rgba(95,212,255,.22);border-radius:13px;background:linear-gradient(145deg,rgba(95,212,255,.08),rgba(4,11,22,.72)); }
.auth-session>small,.auth-created>small { color:#5fd4ff;font-size:9px;letter-spacing:.16em; }
.auth-session>b,.auth-created>b { color:#fff;font-size:20px;letter-spacing:.02em; }
.auth-session>span,.auth-created>span { color:#82a8bf;font-size:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.auth-created p { color:#88a4b6;font-size:11px;line-height:1.5; }
.button-row.compact button { padding:8px 6px;font-size:10px; }