* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:#0b1220; color:#e8edf5; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; }
#app { display:flex; flex-direction:column; height:100vh; }
#topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 16px; background:#111a2e; border-bottom:2px solid #24325a; flex-wrap:wrap; }
.logo { font-size:20px; font-weight:bold; }
.stats { display:flex; gap:16px; flex-wrap:wrap; }
.stat { font-size:14px; background:#1a2540; padding:4px 10px; border-radius:6px; }
.stat b { color:#7ee787; }
.stat.rank { background:#3a2a5a; color:#e0c6ff; font-weight:bold; }
.controls button { background:#24325a; color:#e8edf5; border:1px solid #3a4a7a; padding:6px 10px; border-radius:6px; cursor:pointer; margin-left:6px; }
.controls button:hover { background:#324477; }
#main { flex:1; display:flex; overflow:hidden; }
#palette, #log-panel { width:220px; background:#111a2e; padding:10px; overflow-y:auto; flex-shrink:0; }
#palette h2, #log-panel h2 { font-size:14px; color:#8fa5d6; margin:8px 0 6px; }
.tool { display:block; width:100%; text-align:left; background:#1a2540; color:#e8edf5; border:1px solid #2a3a66; border-radius:6px; padding:8px; margin-bottom:6px; cursor:pointer; }
.tool small { color:#8fa5d6; }
.tool.selected { border-color:#7ee787; background:#1f3a2c; }
#btn-addfloor { width:100%; background:#2a4a2e; color:#d5ffd8; border:1px solid #3f7a46; border-radius:6px; padding:8px; cursor:pointer; }
.hint { font-size:12px; color:#8fa5d6; line-height:1.5; }
.mobile-scroll-hint { display:none; }
#legend { list-style:none; padding:0; margin:0; font-size:12px; }
#legend li { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.swatch { width:12px; height:12px; border-radius:2px; display:inline-block; }
#tower-view { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background: radial-gradient(circle at 50% 0%, #16223f, #060a14 80%); display:flex; flex-direction:column-reverse; align-items:center; padding:20px 10px; }
#tower { display:flex; flex-direction:column-reverse; }
.floor-row { display:flex; align-items:stretch; margin-bottom:2px; }
.floor-label { width:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:#8fa5d6; background:#0e1730; border-radius:4px 0 0 4px; }
.floor-cells { display:flex; background:#0e1730; border:1px solid #223055; border-left:none; border-radius:0 4px 4px 0; }
.cell { width:22px; height:34px; border-right:1px solid #16223f; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:rgba(126,231,135,0.35); }
.cell:last-child { border-right:none; }
.cell:hover { outline:1px solid #7ee787; outline-offset:-1px; }
.cell.lobby { background: repeating-linear-gradient(45deg, #2a2440, #2a2440 6px, #332c50 6px, #332c50 12px); cursor:default; }
.cell.office { background:#3f7fc7; }
.cell.condo { background:#5cb85c; }
.cell.shop { background:#e0a83e; }
.cell.restaurant { background:#d9534f; }
.cell.elevator { background:#9b5de5; cursor:pointer; }
.cell.vacant { opacity:0.45; }
.cell.noservice::after { content:"!"; }
.room-first { display:flex; align-items:center; justify-content:center; font-size:11px; color:#0b1220cc; font-weight:bold; }
#log { font-size:12px; line-height:1.6; color:#c7d3ee; }
#log div { border-bottom:1px dashed #223055; padding:3px 0; }
#banner { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#1a2540; border:2px solid #7ee787; color:#d5ffd8; padding:24px 32px; border-radius:12px; font-size:20px; text-align:center; z-index:50; box-shadow:0 0 40px rgba(0,0,0,0.6); }
#banner button { margin-top:14px; background:#2a4a2e; color:#d5ffd8; border:1px solid #3f7a46; border-radius:6px; padding:6px 14px; cursor:pointer; }
button { touch-action:manipulation; -webkit-tap-highlight-color:rgba(126,231,135,0.35); }
@media (max-width: 900px) { #palette, #log-panel { width:150px; } .cell { width:16px; height:26px; } }
@media (max-width: 640px) {
  #topbar { padding:6px 10px; gap:8px; }
  .logo { font-size:16px; }
  .stats { font-size:11px; gap:6px; }
  .controls button { padding:9px 12px; font-size:12px; margin-left:4px; min-height:40px; }
  #main { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #tower-view { order: -1; flex: 0 0 auto; max-height: 46vh; padding:12px 8px; }
  #palette, #log-panel { width:100%; max-height: 160px; overflow-y:auto; flex-shrink:0; border-top:1px solid #24325a; }
  #palette { display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; padding:8px; }
  #palette h2 { flex-basis:100%; margin:2px 0; }
  #palette hr { flex-basis:100%; border-color:#24325a; }
  .tool { flex:1 1 45%; width:auto; margin-bottom:0; padding:12px 8px; min-height:44px; }
  #btn-addfloor { flex-basis:100%; padding:12px; min-height:44px; }
  #selected-tool-info, #floor-cost-hint, #legend { flex-basis:100%; }
  .mobile-scroll-hint { display:block; flex-basis:100%; }
  .cell { width:24px; height:38px; }
}