#arrangeScreen { background: rgba(30,18,56,.2); backdrop-filter: none; }
#arrangeScreen .panel { max-width: 1000px; padding: 20px; }
#arrangeTitle { outline: none; }
.arrange-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.arrange-head h2 { text-align:left; }
.arrange-head p { background:#fff4d6; border-radius:12px; padding:8px 12px; white-space:nowrap; }
.arrange-head b { display:block; color:#a36a00; font:600 22px Fredoka; }
.arrange-body { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; text-align:left; }
.arrange-plan { background:#f6f3fc; padding:14px; border-radius:18px; }
.arrange-plan h3, .arrange-inventory h3 { margin:0 0 10px; font:600 20px Fredoka; }
#arrangeGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 24px; position:relative; }
#arrangeGrid::before, #arrangeGrid::after { content:''; position:absolute; width:14px; height:100%; background:repeating-linear-gradient(0deg,#ccebdc 0 8px,#e7f4ec 8px 16px); border-radius:6px; pointer-events:none; }
#arrangeGrid::before { left:calc(33.333% - 11px); } #arrangeGrid::after { right:calc(33.333% - 11px); }
.arrange-slot { border:2px dashed #c9bbdf; background:white; border-radius:10px; min-height:64px; color:var(--ink); cursor:pointer; position:relative; padding:6px 3px; font:800 12px Nunito; }
.arrange-slot > span { display:block; font:600 22px Fredoka; color:var(--purple); }
.arrange-slot small { display:block; font:800 11px Nunito; }.arrange-slot i { font:700 9px Nunito; color:var(--muted); }
.arrange-slot.occupied { border-style:solid; background:#ede5fa; }.arrange-slot.preview { border:3px solid #16864a; background:#e3f7ec; }.arrange-slot.invalid { border:3px solid #ba3037; background:#fde8e8; }
.arrange-corridor { border:0; min-height:44px; border-radius:8px; margin:8px 0; width:100%; color:#236b4a; background:#ddefe3; font:800 12px Nunito; cursor:pointer; }
#arrangeFront { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.arrange-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:14px; max-height:190px; overflow:auto; }
.arrange-options button { min-height:58px; padding:8px; border:2px solid #e2d9ef; border-radius:12px; background:white; text-align:left; color:var(--ink); font:800 13px Nunito; cursor:pointer; }
.arrange-options button span { margin-right:6px; color:var(--purple); }.arrange-options button small { display:block; font:700 11px Nunito; color:var(--muted); }
.arrange-options button[aria-pressed=true] { border-color:var(--purple); background:#f1ecf9; }.arrange-options button:disabled { opacity:.5; cursor:default; }
.arrange-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.arrange-actions button, #arrangeConfirm { min-height:44px; border:2px solid #d6c6ed; background:#f1ecf9; border-radius:10px; color:var(--purple); font:800 13px Nunito; cursor:pointer; padding:8px; }
#arrangeConfirm { width:100%; background:var(--purple); color:white; border-color:var(--purple); }.arrange-actions button:disabled, #arrangeConfirm:disabled { opacity:.45; cursor:default; }
#arrangeMessage { margin:12px 0; padding:10px 12px; border-radius:12px; background:#e3f7ec; color:#13703d; text-align:left; min-height:2.5em; }#arrangeMessage.bad { background:#fde8e8; color:#a3242a; }
#arrangeScreen button:focus-visible { outline:3px solid #2b8fd6; outline-offset:2px; }
.arrange-footer { display:flex; justify-content:space-between; gap:10px; align-items:center; }
#arrangeBack { border:0; padding:12px; background:none; color:var(--purple); font:800 14px Nunito; cursor:pointer; }
#arrangeDone { border:0; border-bottom:4px solid #b95710; border-radius:12px; padding:12px 20px; background:var(--orange); color:white; font:600 20px Fredoka; min-height:48px; cursor:pointer; }
@media(max-width:760px) {
  #arrangeScreen { padding:8px; } #arrangeScreen .panel { padding:14px; margin:auto 0; }
  .arrange-head { align-items:flex-start; position:sticky; top:-14px; z-index:2; background:white; padding:8px 0; }.arrange-head h2 { font-size:25px; }.arrange-head p { font-size:11px; padding:6px; }.arrange-head b { font-size:18px; }
  .arrange-body { grid-template-columns:1fr; gap:12px; }.arrange-plan { padding:10px; }
  .arrange-slot { min-height:44px; padding:3px; }.arrange-slot > span { font-size:18px; }.arrange-slot small { font-size:10px; }
  .arrange-plan h3 { font-size:18px; margin-bottom:4px; }.arrange-plan p { font-size:12px; }
  .arrange-options { max-height:126px; }.arrange-inventory h3 { font-size:18px; }.arrange-options button { min-height:52px; }
  .arrange-footer { position:sticky; bottom:-14px; background:white; padding:10px 0; border-top:1px solid #e2d9ef; }
  #arrangeDone { font-size:17px; padding:10px 14px; }
}
.math-settings { padding:10px 12px; border:2px solid #e2d9ef; border-radius:14px; background:#f6f3fc; color:#7445bb; font:800 13px Nunito; cursor:pointer; margin-bottom:10px; max-width:100%; }
.settings-options { display:grid; gap:8px; margin:12px 0; }.settings-options button { padding:12px; min-height:48px; border:2px solid #e2d9ef; border-radius:12px; background:white; color:#25304c; text-align:left; font:800 16px Nunito; cursor:pointer; }.settings-options small { display:block; color:#6b7390; font:700 13px/1.3 Nunito; margin-top:3px; }.settings-options button[aria-pressed=true] { background:#f1ecf9; border-color:#7445bb; }
.math-settings:focus-visible,.settings-options button:focus-visible { outline:3px solid #2b8fd6; outline-offset:2px; }
@media(max-width:760px) {
  #titleScreen .panel { min-width:0; }
  #titleScreen .btns > .btn:first-child { min-width:0; max-width:100%; font-size:20px; }
}

/* Play first; arranging and detailed management remain easy to reach. */
.home-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 12px; }
.home-links button,.sheet-back { border:0; background:none; color:#7445bb; font:800 13px Nunito,sans-serif; cursor:pointer; min-height:44px; padding:6px 4px; }
.sheet-back { display:block; text-align:left; margin:0 0 4px; }
.stock-suggest { min-height:48px; width:100%; padding:10px 14px; background:#f1ecf9; border:2px solid #7445bb; border-radius:14px; color:#593193; font:800 16px Nunito,sans-serif; cursor:pointer; }
.stock-suggest:focus-visible,.sheet-back:focus-visible,.home-links button:focus-visible { outline:3px solid #2b8fd6; outline-offset:2px; }
.stock-quick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:12px 0; }
.stock-quick div { display:flex; flex-direction:column; align-items:center; gap:2px; border-radius:12px; background:#f6f3fc; padding:8px 2px; font:800 12px Nunito,sans-serif; color:#697185; }
.stock-quick img { width:36px; height:36px; object-fit:contain; }
.stock-quick b { font:600 24px Fredoka,sans-serif; color:#25304c; }
.optional-options { text-align:left; margin:10px 0; }
.optional-options > summary { min-height:44px; align-content:center; color:#7445bb; font:800 13px/1.4 Nunito,sans-serif; cursor:pointer; }
.optional-options[open] > summary { margin-bottom:10px; }
#order6Screen .plan { margin-top:8px; }
.screen .panel p.stock-caption { margin:12px 0 0; font-size:12px; }

/* Direct building in the shop: the stage is the game canvas, controls stay at its edge. */
#arrangeScreen { display:block; padding:0; background:none; backdrop-filter:none; pointer-events:none; overflow:hidden; }
.build-top { position:absolute; top:max(10px,env(safe-area-inset-top)); left:12px; right:12px; display:flex; align-items:center; gap:16px; padding:10px 14px; background:#fffffff5; border-radius:18px; box-shadow:0 4px 20px #30204c25; pointer-events:auto; color:#25304c; }
.build-top h2 { margin:0; font:600 25px Fredoka,sans-serif; }.build-top span { font:700 12px Nunito,sans-serif; color:#697185; }.build-top >div { flex:1; text-align:left; }
.build-top p { margin:0; font:800 12px Nunito,sans-serif; }.build-top p b { display:block; color:#a36a00; font:600 22px Fredoka,sans-serif; }
#arrangeStage { position:absolute; top:100px; left:12px; right:340px; bottom:12px; pointer-events:auto; touch-action:none; }
#arrangeGrid,#arrangeFront { display:contents; position:static; }#arrangeGrid::before,#arrangeGrid::after { display:none; }
#arrangeStage .arrange-slot { position:absolute; transform:translate(-50%,-50%); width:36px; height:36px; min-height:0; padding:0; border:2px solid #fff; border-radius:50%; background:#ffffffd9; box-shadow:0 2px 6px #25304c40; z-index:1; }
#arrangeStage .arrange-slot >span { font-size:19px; }#arrangeStage .arrange-slot.available { border-color:#16864a; background:#e3f7ece0; }#arrangeStage .arrange-slot.unavailable { opacity:.65; border-color:#c47070; }#arrangeStage .arrange-slot.preview { border:3px solid #1a87c1; background:#e3f4ff; }#arrangeStage .arrange-slot.invalid { border:3px solid #ba3037; background:#fde8e8; }
.build-dock { pointer-events:auto; position:absolute; right:12px; width:300px; top:100px; bottom:12px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; background:#fffffff5; padding:14px; border-radius:18px; box-shadow:0 4px 20px #30204c25; text-align:left; }
#arrangeSelection { display:block; margin-bottom:8px; color:#25304c; font:600 20px Fredoka,sans-serif; }
#arrangeMessage { margin:0 0 10px; padding:8px 10px; min-height:0; font:800 12px/1.35 Nunito,sans-serif; }
#arrangeCatalog { grid-template-columns:1fr; max-height:none; }.build-selected #arrangeCatalog { display:none; }
.build-finance { margin:8px 0; padding:10px; border-radius:12px; background:#fff3d9; color:#25304c; font:800 12px/1.35 Nunito,sans-serif; }
.build-finance >div { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }.build-finance b { font:600 19px Fredoka,sans-serif; }
.build-finance p { margin:6px 0 0; }#arrangeTradeoff { color:#216f50; }#arrangeTradeoff.caution { color:#8d5013; }
#arrangeScreen:not(.build-selected) .build-finance,#arrangeScreen:not(.build-selected) .arrange-actions,#arrangeScreen:not(.build-selected) #arrangeConfirm { display:none; }
.build-details { margin-top:10px; font:800 12px/1.4 Nunito,sans-serif; color:#697185; }.build-details summary { min-height:44px; align-content:center; color:#7445bb; cursor:pointer; }.build-details .arrange-options { max-height:160px; }
#arrangeBack { padding:8px 0; min-height:44px; font-size:12px; }#arrangeDone { font-size:18px; min-height:44px; padding:8px 16px; }
@media(max-width:760px) and (min-height:600px) {
 .build-top { gap:10px; padding:8px 10px; left:8px;right:8px; }.build-top h2 {font-size:21px;}.build-top span {display:none;}.build-top p b {font-size:19px;}#arrangeDone {font-size:15px;padding:8px 12px;}
 #arrangeStage {top:88px;left:8px;right:8px;bottom:260px;}
 .build-dock {top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px;width:auto;max-height:240px;padding:10px 12px;}.build-selected .build-dock {max-height:310px;}
 #arrangeCatalog {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:0;}#arrangeCatalog button {padding:6px;font-size:11px;min-height:56px;}#arrangeCatalog button small {font-size:10px;}
 #arrangeMessage {padding:6px 8px;margin-bottom:6px;}#arrangeSelection {font-size:17px;margin-bottom:5px;}.build-finance {padding:6px 8px;margin:6px 0;font-size:11px;}.build-finance >div {display:inline-flex;flex-direction:column;align-items:flex-start;width:48%;gap:1px;margin:0;}.build-finance p {margin-top:4px;}
 .arrange-actions {gap:6px;margin-bottom:6px;}.arrange-actions button {font-size:12px;min-height:40px;padding:6px;}#arrangeConfirm {min-height:44px;padding:8px;}
 .build-details {margin-top:2px;}.build-details summary {min-height:36px;}#arrangeBack {min-height:36px;padding:4px 0;}
}
@media(max-height:599px) { .build-dock {width:260px;top:86px;}#arrangeStage {top:86px;right:288px;}.build-top {padding:6px 12px;} }

.build-progress { width:100%; min-height:44px; padding:8px 10px; margin:4px 0; border:2px solid #cba55a; background:#fff5dd; border-radius:12px; color:#79520f; text-align:left; cursor:pointer; font:800 13px/1.3 Nunito,sans-serif; }
.build-progress[hidden] {display:none!important;}.build-progress:focus-visible {outline:3px solid #2b8fd6;outline-offset:2px;}
.build-benefit { margin:6px 0; color:#245c51; font:800 12px/1.35 Nunito,sans-serif; }.build-benefit:empty {display:none;}
#arrangeScreen.build-selected:not(.build-investment) .build-finance {display:none;}
#arrangeStage .arrange-slot.locked {border-color:#b48b3d;background:#f7ecd3e8;color:#79520f;}
#arrangeStage .arrange-slot.locked span {color:#79520f;}#arrangeStage .arrange-slot.zone-preview {border-color:#1a87c1;background:#e3f4ff;}
@media(max-width:760px) and (min-height:600px) {
 #arrangeStage {bottom:340px;}.build-dock {max-height:300px;}.build-selected .build-dock {max-height:360px;}
 .build-progress {font-size:12px;}.build-benefit {font-size:11px;margin:4px 0;}
}

/* Keep the rescue confirmation usable on a narrow screen. */
#supportScreen .btns { min-width:0; }
#supportConfirm { max-width:100%; white-space:normal; height:auto; min-height:58px; padding:12px 18px; font-size:19px; }
#supportConfirm .t { min-width:0; }
#titleSupport[hidden],#o6Support[hidden],#o6Suggest[hidden],#titleDebt[hidden],#o6Debt[hidden] { display:none; }

/* A single, optional first project replaces the home checklist. */
.first-project { display:grid; gap:5px; margin:10px 0; padding:12px; border-radius:15px; background:#f1ecf9; color:#25304c; text-align:left; font:800 13px/1.3 Nunito,sans-serif; }
.first-project > b { font-size:15px; }.first-project > span,.first-project small { color:#697185; }.first-project small { font:700 12px/1.3 Nunito,sans-serif; }
.first-project progress { appearance:none; width:100%; height:9px; border:0; border-radius:8px; overflow:hidden; background:#ded3ee; }
.first-project progress::-webkit-progress-bar { background:#ded3ee; border-radius:8px; }.first-project progress::-webkit-progress-value { background:#7445bb; border-radius:8px; }.first-project progress::-moz-progress-bar { background:#7445bb; border-radius:8px; }
#firstProject[hidden],#titleSteps[hidden],#e6Project[hidden] { display:none; }
.screen .panel p.journey-next { padding:8px 10px; border-radius:12px; background:#f1ecf9; color:#593193; font-size:13px; }

.build-success { display:grid; gap:6px; padding:12px; margin:0 0 12px; border:2px solid #a0d9b5; border-radius:12px; background:#e3f7ec; color:#13703d; font:800 13px/1.35 Nunito,sans-serif; }
.build-success b {font:600 20px Fredoka,sans-serif;}.build-success small {font:700 12px/1.35 Nunito,sans-serif;}
#arrangeSuccess[hidden] {display:none;}

.build-success-visible #arrangeMessage {display:none;}

.decision-card { margin:12px 0; padding:12px 14px; border-radius:15px; background:#f1ecf9; text-align:left; color:#25304c; }
.decision-card h3 { margin:0 0 6px; font:600 22px Fredoka,sans-serif; }
.screen .panel .decision-card p {font:800 13px/1.35 Nunito,sans-serif;margin:6px 0;}
.decision-card dl {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;margin:10px 0;font:800 13px/1.35 Nunito,sans-serif;}
.decision-card dt,.decision-card dd {margin:0;}.decision-card dd {text-align:right;white-space:nowrap;}.decision-card dt:last-of-type,.decision-card dd:last-of-type {border-top:1px solid #d6c6ed;padding-top:6px;color:#593193;}
.decision-card small {display:block;font:700 11px/1.35 Nunito,sans-serif;color:#697185;}
#e6ProjectBtn[hidden],#m5ProjectBtn[hidden],#m4ProjectBtn[hidden] {display:none;}

.accounts-details { margin:8px 0; text-align:left; }
.accounts-details > summary { min-height:44px; align-content:center; cursor:pointer; color:#7445bb; font:800 13px/1.35 Nunito,sans-serif; }
.accounts-details > summary:focus-visible {outline:3px solid #2b8fd6;outline-offset:2px;border-radius:8px;}
.accounts-details[open] > summary {margin-bottom:6px;}

/* Labels sit beside the extension footprints, with the same click/keyboard target. */
#arrangeStage .arrange-slot.extension-label strong {position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);width:116px;padding:5px 7px;border-radius:8px;background:#fffaf0;color:#593b17;box-shadow:0 2px 6px #25304c30;font:800 11px/1.2 Nunito;pointer-events:none;}
#arrangeStage .arrange-slot.extension-label strong small {font-size:11px;}
@media(max-width:600px){#arrangeStage .arrange-slot.extension-label strong{width:82px;font-size:10px;padding:4px;}#arrangeStage .arrange-slot.extension-label strong small{font-size:10px;}}

@media(max-width:600px){#arrangeStage .arrange-slot.extension-label:not(.locked) strong{width:62px;font-size:9px;}}