/* Cabin Planner, direction C: dark pills, cream panels, Fredoka, Jacaranda purple. No orange anywhere */
@font-face { font-family:"Fredoka"; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/fredoka-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Pixelify Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/pixelify-sans-latin.woff2) format("woff2"); }
@font-face { font-family:"Fredoka"; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/fredoka-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --ink:#2b2622; --paper:#fdfaf1; --paper2:#efe3cc; --line:#e2d6bf; --accent:#7856c2; --green:#3f8f5b; --red:#a61e1e; --blue:#3b8bd6; --shadow:0 6px 0 rgba(43,38,34,.18);
  --jac-300:#b7a2e6; --jac-500:#7856c2; --jac-700:#4b3384; --wat-300:#f2d98a; --wat-500:#d4a21b; --wat-700:#6e5208; --ledger:#a61e1e; --hl:#ffe45e;
  --leaf:#a6d98c; --leaf-300:#bfe3c4; --leaf-500:#3f8f5b; --leaf-700:#2a6a3e;
  --char:#2f2b28; --slot:#3d3833; --dot:#4b4540; --cream:#f6efe3; --well:#efe3cc; --ctext:#efe6d6; --cmuted:#b8ad9c; --muted-g:#7a6f60; --grid:#d8e3e7;
  --f-c:"Fredoka","Arial Rounded MT Bold","Avenir Next",system-ui,sans-serif; --f-pixel:"Pixelify Sans","Courier New",monospace; --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.2,.9,.3,1.06);
  --pshadow:0 4px 0 rgba(20,16,12,.28); --tshadow:0 5px 0 rgba(20,16,12,.25); --cshadow:0 10px 0 rgba(20,16,12,.18),0 20px 30px -14px rgba(20,16,12,.5);
  --bubw:520px; --gut:16px;
  /* the felt marker: one ragged highlighter stroke, masked from this shape */
  --mk-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M8 27C16 15 42 12 82 13c40 1 88-4 130-2 12 1 19 5 21 11 2 6 1 13-2 18-3 6-10 9-20 10-46 3-96 0-146 3-26 1-48 2-58-3-6-3-9-9-8-15 0-3 4-6 9-8z' fill-opacity='.56'/%3E%3Cpath d='M102 17c40-5 88-6 126-2 5 6 5 14 0 19-38 3-86 2-122 4-6-4-8-16-4-21z' fill-opacity='.5'/%3E%3Cpath d='M18 23c56-4 134-6 208-4M16 45c68 0 146-2 210-4M22 34c70-2 138-4 196-4' stroke='black' stroke-opacity='.34' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --mk-shape-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M8 27C16 15 42 12 82 13c40 1 88-4 130-2 12 1 19 5 21 11 2 6 1 13-2 18-3 6-10 9-20 10-46 3-96 0-146 3-26 1-48 2-58-3-6-3-9-9-8-15 0-3 4-6 9-8z' fill-opacity='.94'/%3E%3Cpath d='M102 17c40-5 88-6 126-2 5 6 5 14 0 19-38 3-86 2-122 4-6-4-8-16-4-21z' fill-opacity='.2'/%3E%3Cpath d='M18 23c56-4 134-6 208-4M16 45c68 0 146-2 210-4M22 34c70-2 138-4 196-4' stroke='black' stroke-opacity='.12' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; overflow:hidden; background:#2b2622; color:var(--ink); font-family:var(--f-c); font-size:14px; -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font:inherit; color:inherit; }
/* buttons on cream: a well with a soft drop; HUD controls restyle themselves below */
button { cursor:pointer; border:0; background:var(--well); color:var(--ink); border-radius:12px; padding:8px 14px; font-weight:600; box-shadow:0 3px 0 #d3c4a8; transition:transform .16s var(--ease), box-shadow .16s, background-color .16s; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
button:hover { transform:translateY(-1px); }
button:active { transform:translateY(2px); box-shadow:0 1px 0 #d3c4a8; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--jac-500); outline-offset:2px; }
button.primary { background:var(--jac-500); color:#fff; box-shadow:0 3px 0 var(--jac-700); }
button.on { background:var(--char); color:var(--cream); box-shadow:0 3px 0 #1d1a17; }
.ti { display:block; width:20px; height:20px; flex:none; } .ti path { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.px { display:block; width:20px; height:20px; flex:none; image-rendering:pixelated; }
.spacer { flex:1 1 auto; }
kbd.kc { display:inline-grid; place-items:center; min-width:28px; height:22px; padding:0 6px; border-radius:6px; font:600 11px/1 var(--f-c); background:var(--ink); color:var(--cream); box-shadow:inset 0 -2px 0 rgba(0,0,0,.35); }
#app { position:fixed; inset:0; }
#stage { position:absolute; inset:0; min-width:0; }
#canvas { width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; cursor:crosshair; }
#canvas3 { position:absolute; inset:0; width:100%; height:100%; display:none; pointer-events:none; } #canvas3.on { display:block; } #canvas3.pixel { image-rendering:pixelated; image-rendering:crisp-edges; }
.muted { color:var(--muted-g); font-size:12.5px; }
.src { display:inline-block; font:600 11px/1 var(--f-c); padding:4px 8px; border-radius:999px; background:#ddd; width:max-content; color:var(--ink); }
.src.bunnings { background:#d9342b; color:#fff; } .src.specialist { background:#3b6ea8; color:#fff; } .src.salvage { background:#8a6a45; color:#fff; } .src.nursery { background:#4f9a3f; color:#fff; } .src.sky-tag { background:#ece4d4; color:#5a4e40; }
.price { font-size:12px; color:#5a4f40; } .price i { font-style:normal; color:#9a8f80; }
/* modals */
.modal { position:fixed; inset:0; background:rgba(30,22,16,.55); display:none; align-items:center; justify-content:center; z-index:20; padding:20px; }
.modal.open { display:flex; }
.modal-card { background:var(--paper); border:3px solid var(--ink); border-radius:18px; box-shadow:0 10px 0 rgba(0,0,0,.25); max-height:100%; overflow:auto; }
.modal-bar { display:flex; gap:10px; align-items:center; padding:10px 14px; border-bottom:2px dashed var(--line); position:sticky; top:0; background:var(--paper); z-index:2; flex-wrap:wrap; }
.modal-bar b { flex:1; font-size:16px; }
.modal-bar input { width:80px; border:2px solid var(--line); border-radius:8px; padding:3px 6px; }
.help-card { max-width:560px; }
.help-body { padding:14px 18px; line-height:1.45; }
.help-body p { margin:0 0 10px; }
.muted { color:#7a6f60; font-size:12.5px; }
/* splash */
#splash { background:radial-gradient(ellipse at top, #f6e7d8, #8fbf7a 70%, #5a8a4a); overflow:auto; align-items:flex-start; }
.splash-card { background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:20px 26px 18px; max-width:860px; width:100%; margin:auto; box-shadow:0 10px 0 rgba(0,0,0,.2); }
.brand { display:flex; gap:20px; align-items:center; margin-bottom:10px; }
.brand canvas { image-rendering:pixelated; border:3px solid var(--ink); border-radius:14px; background:#cfe0d6; flex:none; }
.brand h1 { margin:0 0 4px; font-size:30px; letter-spacing:-.01em; }
.brand p { margin:0; color:#5a4f40; }
.splash-card h2 { font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:#7a6f60; margin:16px 0 8px; }
.choices { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.choice { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:8px; gap:4px; box-shadow:none; border-color:var(--line); background:#fff; border-radius:14px; }
.choice canvas { image-rendering:pixelated; width:100%; height:auto; border-radius:8px; background:var(--paper2); }
.choice b { font-size:13px; } .choice span { font-size:11px; color:#7a6f60; line-height:1.25; }
.choice.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; background:#f1ecfb; color:var(--ink); }
.choice.on b { color:var(--ink); } .choice.on span { color:#6a5f50; }
.splash-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; align-items:center; }
.big { padding:12px 20px; font-size:15px; }
.file-btn { border:2px solid var(--ink); border-radius:10px; background:var(--paper); box-shadow:0 3px 0 var(--ink); cursor:pointer; }
.file-btn input { display:none; }
.fine { font-size:11.5px; color:#7a6f60; margin:12px 0 0; } .budget-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .budget-field { display:flex; align-items:center; gap:4px; background:#fff; border:2px solid var(--ink); border-radius:12px; padding:6px 10px; font-weight:700; font-size:18px; box-shadow:0 3px 0 var(--ink); } .budget-field input { font:inherit; font-weight:700; width:120px; border:0; outline:0; background:transparent; } .budget-title b { display:block; font-size:15px; } .budget-title span { font-size:12px; color:#7a6f60; max-width:520px; display:block; } #money .krow.done kbd { color:#2f6a2a; background:#e2f0d0; } #money .krow.todo span { color:#9a8f80; }
/* plan */
.plan-card { max-width:1100px; width:100%; }
.plan { padding:18px 26px 26px; }
.plan header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.plan h1 { margin:0; font-size:26px; } .plan .sub { margin:4px 0 0; color:#5a4f40; }
.plan .total { text-align:right; } .plan .total span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#7a6f60; } .plan .total b { font-size:26px; }
.plan h2 { font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:#7a6f60; margin:22px 0 8px; border-bottom:2px dashed var(--line); padding-bottom:4px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(100px,1fr)); gap:8px; margin-top:14px; }
.stats div { background:var(--paper2); border-radius:10px; padding:8px; text-align:center; } .stats b { display:block; font-size:18px; } .stats span { font-size:11px; color:#7a6f60; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.checks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.checks li { padding:6px 10px 6px 28px; border-radius:8px; position:relative; font-size:13px; line-height:1.35; background:#eef3e6; }
.checks li::before { content:"✓"; position:absolute; left:9px; top:6px; font-weight:700; }
.checks li.warn { background:#fff1d6; } .checks li.warn::before { content:"!"; }
.checks li.bad { background:#f8dcd6; } .checks li.bad::before { content:"×"; }
.drawings { display:grid; grid-template-columns:1fr; gap:10px; }
.drawings figure { margin:0; } .drawings canvas { width:100%; height:auto; border:2px solid var(--line); border-radius:8px; background:#fff; } .drawings figcaption { font-size:11px; color:#7a6f60; text-align:left; margin-top:4px; } .drawings figcaption b { display:block; text-align:center; margin-bottom:3px; } .legend { margin:0; padding:0 0 0 18px; columns:2; column-gap:14px; } .legend li { margin:0 0 1px; break-inside:avoid; }
.plan table { width:100%; border-collapse:collapse; font-size:12.5px; }
.plan th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#7a6f60; padding:6px 6px; border-bottom:2px solid var(--line); }
.plan td { padding:6px; border-bottom:1px solid var(--line); vertical-align:top; }
.plan td .note { font-size:11px; color:#7a6f60; margin-top:2px; max-width:420px; }
.plan .r { text-align:right; white-space:nowrap; }
.plan tfoot td { font-weight:700; border-top:2px solid var(--ink); } .plan tfoot tr.sub td { font-weight:400; color:#7a6f60; border:none; font-size:12px; padding-top:2px; padding-bottom:2px; }
.seq { padding-left:20px; } .seq li { margin:0 0 6px; line-height:1.4; font-size:13px; }
.plan footer { margin-top:24px; font-size:11.5px; color:#7a6f60; border-top:2px dashed var(--line); padding-top:10px; }
.notes { padding:0 26px 20px; } .notes label { font-size:12px; color:#7a6f60; display:block; } .notes textarea { width:100%; border:2px solid var(--line); border-radius:10px; padding:8px; margin-top:4px; }
@media print {
  body { overflow:visible; background:#fff; }
  #app, .no-print, #splash, #help { display:none !important; }
  .modal { position:static; display:block !important; padding:0; background:none; }
  .modal-card { border:none; box-shadow:none; max-height:none; overflow:visible; }
  .plan { padding:0; } .two { grid-template-columns:1fr 1fr; }
  .plan tr { page-break-inside:avoid; }
}
/* splash pre-roll and fade */
#splash.open { animation:fadein .9s ease both; }
@keyframes fadein { from { opacity:0 } to { opacity:1 } }
.splash-card { transition:opacity 1s ease, transform 1s ease; }
.splash-card.hidden-card { opacity:0; transform:translateY(10px); pointer-events:none; }
.preroll { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:30; cursor:pointer; color:var(--ink); font-family:"Avenir Next","Segoe UI",system-ui,sans-serif; text-align:center; transition:opacity .9s ease; background:radial-gradient(ellipse at top, #f6e7d8, #8fbf7a 70%, #5a8a4a); }
.preroll.out { opacity:0; pointer-events:none; }
.preroll > * { opacity:0; transition:opacity .8s ease, transform .8s ease; transform:translateY(6px); }
.preroll[data-step="presents"] .pr-presents { opacity:1; transform:none; }
.preroll[data-step="title"] .pr-title, .preroll[data-step="title"] .pr-flourish, .preroll[data-step="title"] .pr-by, .preroll[data-step="title"] .pr-skip { opacity:1; transform:none; }
.pr-presents { font-size:clamp(16px,2.4vw,24px); letter-spacing:.3em; font-weight:700; color:#5a4f40; }
.pr-title { font-size:clamp(36px,7vw,84px); font-weight:800; letter-spacing:.02em; text-shadow:0 4px 0 rgba(43,38,34,.18); } .pr-title sup { font-size:.3em; vertical-align:top; } .pr-title .sp { color:var(--accent); font-size:.5em; vertical-align:middle; animation:twinkle 1.2s steps(2) infinite; }
@keyframes twinkle { 50% { opacity:.3 } }
.pr-flourish { display:flex; align-items:center; gap:8px; color:var(--accent); } .pr-flourish i { display:block; width:min(44vw,320px); height:3px; background:var(--ink); border-radius:2px; }
.pr-by { font-size:clamp(14px,1.8vw,20px); font-weight:600; color:#5a4f40; letter-spacing:.08em; }
.pr-skip { font-size:11px; color:#7a6f60; margin-top:24px; }
.credit { font-size:11px; color:#7a6f60; text-align:center; margin:14px 0 0; letter-spacing:.06em; }
.brand h1 sup { font-size:.4em; vertical-align:top; color:#7a6f60; }
#dissolve { position:fixed; inset:0; width:100%; height:100%; z-index:25; pointer-events:none; image-rendering:pixelated; display:none; }
#dissolve.on { display:block; }
/* the computer: a level further in than the room. A clear shelled folding deck fills the view, on whatever it really sits on */
#computer { display:none; position:fixed; inset:0; z-index:60; align-items:center; justify-content:center; background:var(--desk, #d9bf8f); background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 26px), radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.18), rgba(0,0,0,.35)); }
#computer.open { display:flex; } #computer { overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#dos-close { position:fixed; top:12px; right:12px; z-index:61; font:600 14px/1 "Avenir Next","Segoe UI",system-ui,sans-serif; color:#2b2622; background:rgba(245,240,228,.95); border:1px solid rgba(0,0,0,.25); border-radius:999px; padding:12px 18px; box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; }
#computer .desk { position:relative; width:min(92vw, 1040px); padding:0; perspective:2600px; perspective-origin:50% 36%; }
#computer .deck { transform-style:preserve-3d; transform:rotateX(8deg); }
#computer.on-floor { background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 48px), radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.14), rgba(0,0,0,.4)); }
/* the lid: a clear polycarbonate shell you can see the board through, leaning back a touch */
#computer .lid { position:relative; transform-style:preserve-3d; transform:rotateX(-12deg); transform-origin:50% 100%; }
#computer .lid::before { content:""; position:absolute; left:-12px; top:0; bottom:0; width:12px; transform-origin:100% 50%; transform:rotateY(-90deg); background:linear-gradient(90deg, #b3ad9d, #d6d0be); border-radius:3px 0 0 3px; } /* the lid's thickness: left side */
#computer .lid::after { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; transform-origin:50% 100%; transform:rotateX(90deg); background:linear-gradient(180deg, #c9c3b1, #e4dfce); border-radius:12px 12px 0 0; } /* and the top */
#computer .lid .edge { position:absolute; right:-12px; top:0; bottom:0; width:12px; transform-origin:0 50%; transform:rotateY(90deg); background:linear-gradient(90deg, #d6d0be, #a9a393); border-radius:0 3px 3px 0; } #computer .base .edge { position:absolute; right:-24px; top:0; bottom:0; width:24px; transform-origin:0 50%; transform:rotateY(90deg); background:linear-gradient(90deg, #c9c3b1, #9d9685); border-radius:0 0 10px 0; }
#computer .crt { background:linear-gradient(180deg, rgba(240,236,226,.72), rgba(214,208,192,.66)); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,.55); border-radius:18px 18px 6px 6px; padding:26px 30px 20px; box-shadow:inset 0 2px 0 rgba(255,255,255,.6), inset 0 -6px 0 rgba(0,0,0,.12), 0 30px 50px rgba(0,0,0,.5); position:relative; overflow:hidden; }
#computer .crt::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; background:repeating-linear-gradient(90deg, rgba(60,90,70,.35) 0 1px, transparent 1px 11px), repeating-linear-gradient(0deg, rgba(60,90,70,.3) 0 1px, transparent 1px 13px), radial-gradient(circle at 12% 18%, rgba(40,60,50,.6) 0 6px, transparent 7px), radial-gradient(circle at 88% 14%, rgba(40,60,50,.6) 0 6px, transparent 7px); }
#computer .crt::after { content:"CABIN 486 · 1994 · CLEAR SHELL"; position:absolute; right:40px; top:8px; font:9px/1 "Courier New", monospace; letter-spacing:.14em; color:#5f5a4c; }
#computer .bezel { background:#031a08; border-radius:6px; padding:16px 18px; box-shadow:inset 0 0 50px rgba(0,0,0,.85), inset 0 0 2px #3ad17a, 0 0 0 6px #2f2c27, 0 0 0 7px rgba(143,136,118,.8); position:relative; overflow:hidden; }
#computer .bezel::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35)); mix-blend-mode:multiply; }
/* the base: in perspective, so the keyboard recedes like a real deck; the shell is clear here too */
#computer .base::after { content:""; position:absolute; left:0; right:0; top:100%; height:24px; transform-origin:50% 0; transform:rotateX(-90deg); border-radius:0 0 10px 10px; box-shadow:0 26px 36px rgba(0,0,0,.42); background-image:linear-gradient(90deg, transparent 0 8%, #4a4642 8% 9%, transparent 9% 11%, #4a4642 11% 12%, transparent 12% 68%, #3a3632 68% 86%, transparent 86%), linear-gradient(180deg, #d9d3c1, #aca48f); } /* the front edge: floppy slot, vents, and the deck's shadow on the desk */
#computer .base { margin-top:-1px; transform-style:preserve-3d; transform:rotateX(64deg); transform-origin:50% 0; border:1px solid rgba(255,255,255,.5); border-radius:0 0 22px 22px; padding:12px 40px 24px; box-shadow:inset 0 6px 0 rgba(0,0,0,.1); position:relative; background-image:linear-gradient(90deg, transparent 0 6%, rgba(42,42,42,.3) 6% 12%, transparent 12% 30%, rgba(42,42,42,.3) 30% 40%, transparent 40% 62%, rgba(201,201,201,.3) 62% 66%, transparent 66% 80%, rgba(42,42,42,.3) 80% 86%, transparent 86%), repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(222,216,200,.84), rgba(198,190,172,.82)); background-color:#2a6b3e; } /* the base: a clear shell over a green board, seen from a little above */
#computer .hinge { display:flex; justify-content:space-between; margin:0 50px 10px; } #computer .hinge i { display:block; width:90px; height:12px; border-radius:6px; background:linear-gradient(180deg, #8a8478, #4a463f 60%, #6a6458); box-shadow:0 1px 0 rgba(255,255,255,.2); }
#computer .keys { display:grid; grid-template-columns:repeat(14, 1fr); gap:4px; }
#computer .keys i { display:block; height:18px; background:linear-gradient(180deg, #f2ede0, #d9d2bd); border-radius:3px; box-shadow:0 2px 0 #9a9280; }
#computer .keys i.wide { grid-column:span 3; } #computer .keys i.space { grid-column:span 8; }
#computer .trackball { position:absolute; right:40px; bottom:18px; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #9a9490, #3a3734); box-shadow:inset 0 0 0 4px #b8b19e, 0 0 0 2px #8f8876; }
#computer .speaker { position:absolute; left:46px; bottom:20px; width:60px; height:20px; background:repeating-linear-gradient(90deg, #8f8876 0 2px, transparent 2px 5px); opacity:.6; }
#computer .sticker { position:absolute; left:18px; top:8px; transform:rotate(-8deg); font:bold 9px/1.1 sans-serif; color:#fff; background:#d84a3a; padding:3px 6px; border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,.3); }
/* the screen: the ledger on the left, the keys you can press on the right. Green is live state, yellow is a key, blue is a note with nothing behind it */
.dos-cols { display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:20px; align-items:start; }
#dos-text { margin:0; font:15px/1.5 "Courier New", ui-monospace, monospace; color:#5df09a; text-shadow:0 0 6px rgba(93,240,154,.55); white-space:pre-wrap; overflow:auto; }
#dos-text .dim { color:#2f8f55; } #dos-text .key, #dos-keys .key { color:#f6e27a; } #dos-text .note, #dos-keys .note { color:#6fb3ff; text-shadow:0 0 6px rgba(111,179,255,.45); }
#dos-keys { font:15px/1.5 "Courier New", ui-monospace, monospace; color:#9ae8b8; border-left:1px solid #1d6b3a; padding-left:16px; min-height:100%; }
#dos-keys .head { color:#2f8f55; margin-bottom:4px; } #dos-keys button { display:block; width:100%; text-align:left; font:inherit; color:inherit; background:transparent; border:0; padding:1px 4px; cursor:pointer; white-space:pre; } #dos-keys button:hover, #dos-keys button:focus { background:#0a3a18; color:#dfffea; outline:0; } #dos-keys button[disabled] { color:#2f8f55; cursor:default; } #dos-keys button[disabled] .key { color:#8a8a3a; }
#dos-msg { font:15px/1.4 "Courier New", ui-monospace, monospace; color:#f6e27a; min-height:18px; margin-top:10px; }
#dos-msg::after { content:"_"; animation:blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity:0; } }
@media (max-width: 760px) { .dos-cols { grid-template-columns:1fr; } #dos-keys { border-left:0; border-top:1px solid #1d6b3a; padding:10px 0 0; } #dos-keys button { padding:8px 4px; } #computer .base { display:none; } #computer { align-items:flex-start; padding:60px 0 30px; } #computer .desk { width:100vw; perspective:none; } #computer .deck, #computer .lid { transform:none; } #computer .lid::before, #computer .lid::after, #computer .lid .edge { display:none; } #computer .crt { border-radius:0; padding:18px 10px 14px; } #dos-text { font-size:13px; } }
body.at-laptop #hud-top, body.at-laptop #hud-left, body.at-laptop #hud-right, body.at-laptop #hint, body.at-laptop #eyes { visibility:hidden; }
#guide .scroll { font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; background:linear-gradient(90deg, #e9d9b2, #f7eccf 12%, #f9f0d8 50%, #f7eccf 88%, #e9d9b2), repeating-linear-gradient(180deg, rgba(120,90,50,.035) 0 2px, transparent 2px 9px); max-width:560px; width:92vw; max-height:80vh; overflow:auto; padding:30px 34px 34px; margin:auto; color:#3a2a18; position:relative; border-radius:4px; box-shadow:0 18px 30px rgba(0,0,0,.45); font-size:15px; }
#guide .scroll::before, #guide .scroll::after { content:''; position:absolute; left:-14px; right:-14px; height:22px; border-radius:11px; background:linear-gradient(180deg, #d9c08c, #a7804e 55%, #6e4f2c); box-shadow:0 3px 0 #4e3619, inset 0 2px 0 rgba(255,255,255,.35); } #guide .scroll::before { top:-11px; } #guide .scroll::after { bottom:-11px; }
#guide .g-head { display:grid; grid-template-columns:1fr auto; grid-template-areas:"stars close" "title close" "pay close"; align-items:center; margin-bottom:8px; } #guide .g-stars { grid-area:stars; font-size:30px; letter-spacing:4px; line-height:1; } #guide .gstar { color:#d9cfb4; text-shadow:0 1px 0 #fff; } #guide .gstar.on { color:#e9a515; text-shadow:0 1px 0 #fff3c0, 0 2px 0 #9a6a0a; }
#guide h2 { grid-area:title; margin:4px 0 0; font-size:26px; font-weight:normal; letter-spacing:.01em; } #guide .g-pay { grid-area:pay; color:#6a4a2a; } #guide .close { grid-area:close; align-self:start; font:inherit; font-size:13px; background:transparent; border:1px solid #9a7a55; border-radius:6px; padding:4px 10px; cursor:pointer; color:#3a2a18; }
#guide h3 { margin:16px 0 6px; font-size:13px; font-weight:normal; text-transform:uppercase; letter-spacing:.14em; color:#8a6a3a; border-bottom:1px solid rgba(138,106,58,.4); padding-bottom:4px; }
#guide .g-reqs { list-style:none; margin:0; padding:0; } #guide .g-reqs li { display:grid; grid-template-columns:52px 1fr 24px; align-items:center; gap:10px; padding:5px 0; border-bottom:1px dotted rgba(138,106,58,.3); } #guide .g-reqs .pic { width:48px; height:48px; background:rgba(255,255,255,.35); border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(138,106,58,.25); } #guide .thumb { image-rendering:pixelated; } #guide .g-reqs .tick { color:#3a8a3a; font-size:20px; text-align:center; } #guide .g-reqs li.ok .txt { color:#7a6a52; text-decoration:line-through; text-decoration-color:rgba(122,106,82,.5); }
#guide .g-wait { margin:10px 0 0; color:#6a4a2a; font-style:italic; } #guide .g-tip { margin:22px 0 0; line-height:1.5; color:#5a4530; font-style:italic; }
#kind-row .kind.guide { background:#f6ecd2; border-color:#9a7a55; }
.plan h3 { font-size:13.5px; margin:16px 0 6px; } .plan .sky-plan { overflow-x:auto; margin:4px 0 8px; } .plan .sky-plan svg { max-width:100%; height:auto; }
.own-land { margin:10px 0 2px; padding:10px 12px; border:2px dashed var(--accent); border-radius:14px; background:#fffaf0; }
.own-land[hidden] { display:none; }
.own-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.own-row input[type=text] { flex:1 1 220px; min-width:0; font:inherit; font-size:15px; padding:8px 10px; border:2px solid var(--ink); border-radius:10px; background:#fff; }
.own-size { margin-top:6px; font-size:12px; color:#7a6f60; } .own-size label { display:flex; align-items:center; gap:4px; } .own-size input { width:64px; font:inherit; padding:4px 6px; border:1.5px solid var(--line); border-radius:8px; background:#fff; }
.own-status { font-size:12px; color:#6a5f50; margin:8px 0 0; line-height:1.35; } .own-status.warn { color:#9a4a20; }
/* ================= the HUD, direction C ================= */
/* the felt marker: a yellow stroke under one hovered or focused label at a time (ui.js keeps it to one) */
.mk { position:relative; isolation:isolate; }
.mk > .ml { position:relative; transition:color .2s; }
.mk > .ml::before { content:""; position:absolute; left:-.5em; right:-.5em; top:-.18em; bottom:-.22em; z-index:-1; background:var(--hl); -webkit-mask:var(--mk-shape) center / 100% 100% no-repeat; mask:var(--mk-shape) center / 100% 100% no-repeat; clip-path:inset(0 100% 0 0); transform:rotate(-1.6deg); transition:clip-path .32s cubic-bezier(.25,.8,.3,1); pointer-events:none; }
.mk.hot > .ml::before { clip-path:inset(0 0 0 0); }
.dk .mk > .ml::before { -webkit-mask-image:var(--mk-shape-dark); mask-image:var(--mk-shape-dark); }
.dk .mk.hot > .ml { color:var(--ink); }
.mk.prim > .ml::before { background:var(--jac-700); -webkit-mask-image:var(--mk-shape-dark); mask-image:var(--mk-shape-dark); }
.mk.prim.hot > .ml { color:#fff; }

/* the top line: status on the left; Vitals, issues, help, Build, Bank and Yield on the right */
#hud-status { position:absolute; left:var(--gut); top:14px; display:flex; gap:8px; align-items:center; z-index:5; pointer-events:none; }
.soft { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:15px; background:rgba(47,43,40,.82); color:var(--ctext); font:500 12.5px/1 var(--f-c); white-space:nowrap; pointer-events:auto; }
.soft span { font-variant-numeric:tabular-nums; } .soft b { font-weight:500; font-variant-numeric:tabular-nums; } .soft .sep { width:3px; height:3px; border-radius:50%; background:var(--cmuted); }
#clock .moon { display:inline-block; width:13px; height:13px; margin-left:-2px; background-size:13px 13px; image-rendering:pixelated; filter:drop-shadow(0 0 3px rgba(220,230,255,.55)); }
.soft.jobs { position:relative; overflow:hidden; } .soft.jobs i { position:absolute; left:0; top:0; bottom:0; background:rgba(120,86,194,.6); } .soft.jobs span, .soft.jobs b { position:relative; }
#hud-top { position:absolute; right:14px; top:14px; display:flex; gap:8px; align-items:center; z-index:6; }
.pw { position:relative; }
.pill { position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; height:40px; padding:4px 14px 4px 4px; border:0; border-radius:20px; background:var(--char); color:var(--ctext); font:500 14px/1 var(--f-c); white-space:nowrap; box-shadow:var(--pshadow); cursor:pointer; }
.pill:hover { transform:translateY(-1px); } .pill:active { transform:translateY(1px); box-shadow:0 2px 0 rgba(20,16,12,.28); }
.pill .well { width:32px; height:32px; border-radius:16px; background:var(--slot); display:grid; place-items:center; flex:none; } .pill .well .px { width:20px; height:20px; }
.pill .pl { font-size:12px; color:var(--cmuted); } .pill b { font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; } .pill .of { font-size:12px; color:var(--cmuted); } .pill .up { font-size:12px; color:var(--leaf); font-weight:600; } .pill .up:empty { display:none; } .pill .g { color:var(--leaf); }
.pill .bar { display:inline-block; width:40px; height:6px; border-radius:3px; background:var(--dot); overflow:hidden; } .pill .bar i { display:block; height:100%; width:0; background:var(--jac-300); border-radius:3px; transition:width .5s var(--ease); }
.pill.close .bar i { background:var(--wat-500); } .pill.over .bar i { background:#e06464; width:100% !important; } .pill.over b { color:#f3b9b0; }
.pill.yp { padding-right:14px; gap:6px; } .pill.yp .pin { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 2px 0 0; background:none; border:0; box-shadow:none; color:inherit; border-radius:16px; } .pill.yp .pin:hover, .pill.yp .pin:active { transform:none; box-shadow:none; }
.stars { display:inline-flex; gap:1px; align-items:center; padding:2px; background:none; border:0; box-shadow:none; border-radius:10px; } .stars:hover { transform:translateY(-1px); box-shadow:none; } .stars svg { width:19px; height:19px; display:block; }
.stars svg.won { filter:drop-shadow(0 0 3px rgba(242,217,138,.55)); }
.igroup { position:relative; z-index:7; display:flex; gap:6px; height:32px; }
.isl, .iss, .hlp { height:32px; border:0; border-radius:16px; background:rgba(47,43,40,.92); color:var(--ctext); box-shadow:0 3px 0 rgba(20,16,12,.22); flex:none; padding:0; }
.isl { display:inline-flex; align-items:center; gap:7px; padding:0 13px 0 11px; font:600 13px/1 var(--f-c); position:relative; z-index:2; }
.vdot { width:9px; height:9px; border-radius:50%; background:var(--leaf-500); box-shadow:0 0 0 3px rgba(63,143,91,.25),0 0 7px rgba(63,143,91,.6); flex:none; }
.vdot.warn { background:var(--wat-500); box-shadow:0 0 0 3px rgba(212,162,27,.25),0 0 7px rgba(212,162,27,.6); }
#btn-vitals.wet .vdot { animation:wetblink 1.1s ease; } @keyframes wetblink { 25% { transform:scale(1.7); background:#5f86de; box-shadow:0 0 0 4px rgba(95,134,222,.3),0 0 10px rgba(95,134,222,.7); } } /* water just reached a bed or a tap */
.iss { display:inline-flex; align-items:center; gap:6px; padding:0 12px 0 5px; font:600 12.5px/1 var(--f-c); white-space:nowrap; }
.iss b { display:grid; place-items:center; width:22px; height:22px; border-radius:11px; background:var(--wat-500); color:var(--ink); font-size:12px; }
.hlp { width:32px; display:grid; place-items:center; font:600 15px/1 var(--f-c); }
/* Vitals opens out of its own pill into a dark panel with the four figures */
.isl-x { position:absolute; left:0; top:0; width:var(--iw,84px); height:32px; border-radius:16px; background:#1d1a17; box-shadow:0 12px 26px -10px rgba(0,0,0,.6); opacity:0; visibility:hidden; overflow:hidden; z-index:3; cursor:pointer; transition:width .36s cubic-bezier(.4,0,.2,1), height .36s cubic-bezier(.4,0,.2,1), border-radius .36s, opacity .12s .24s, visibility 0s .36s; }
.igroup.open .isl-x { width:440px; height:112px; border-radius:26px; opacity:1; visibility:visible; transition:width .44s cubic-bezier(.3,1.3,.5,1), height .44s cubic-bezier(.3,1.3,.5,1), border-radius .44s, opacity .06s, visibility 0s; }
.isl-in { position:absolute; left:0; top:0; width:440px; height:112px; padding:14px 16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; opacity:0; transition:opacity .1s; }
.igroup.open .isl-in { opacity:1; transition:opacity .2s .16s; }
.isl-in .st { display:grid; gap:4px; align-content:start; min-width:0; } .isl-in .st .px { width:20px; height:20px; }
.isl-in .st b { font:600 19px/1 var(--f-c); color:#fff; white-space:nowrap; } .isl-in .st b small { font-size:12px; font-weight:500; color:var(--cmuted); margin-left:2px; }
.isl-in .st span { font:500 11.5px/1.25 var(--f-c); color:var(--cmuted); }
.isl-in .st i { display:block; height:4px; border-radius:2px; background:var(--dot); overflow:hidden; margin-top:2px; } .isl-in .st i em { display:block; height:100%; border-radius:2px; background:var(--leaf); }
/* cream panels that hang from a pill or a tray */
.hpanel { display:none; position:absolute; left:0; top:calc(100% + 10px); width:320px; max-height:min(70vh, 560px); overflow:auto; background:var(--cream); color:var(--ink); border-radius:22px; padding:14px 16px 16px; box-shadow:var(--cshadow); font:400 13.5px/1.35 var(--f-c); z-index:30; text-align:left; overscroll-behavior:contain; }
.hpanel.open { display:block; animation:panelin .24s var(--ease) both; } .hpanel.right { left:auto; right:0; } .hpanel.up { top:auto; bottom:calc(100% + 12px); }
@keyframes panelin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.hpanel.up.open { animation-name:panelup; } @keyframes panelup { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.hpanel > b { display:block; font:600 15px/1.25 var(--f-c); margin-bottom:6px; }
.hpanel i { display:block; font:600 12px/1 var(--f-c); font-style:normal; color:var(--muted-g); margin:12px 0 4px; }
.hpanel .krow { display:flex; gap:8px; align-items:center; padding:6px 0; border-top:1px solid #e6dcc8; }
.hpanel i + .krow, .hpanel b + .krow { border-top:0; }
.hpanel kbd { font:600 13px/1 var(--f-c); font-variant-numeric:tabular-nums; min-width:44px; text-align:right; order:3; margin-left:auto; color:var(--ink); }
.hpanel .krow span { color:#4a4036; flex:1; } .hpanel .ico { width:20px; height:20px; image-rendering:pixelated; flex:none; }
.hpanel .krow.done kbd { color:var(--leaf-700); } .hpanel .krow.todo span { color:#9a8f80; }
.mini { font:600 13px/1 var(--f-c); background:var(--jac-500); color:#fff; border:0; border-radius:12px; padding:10px 14px; box-shadow:0 3px 0 var(--jac-700); cursor:pointer; }
#spend .srow { display:flex; gap:8px; align-items:baseline; padding:4px 0; border-top:1px solid #ece2cf; } #spend .srow span { flex:1; color:#4a4036; } #spend .srow em { font-style:normal; color:#9a8f80; font-size:12px; white-space:nowrap; } #spend .srow kbd { min-width:58px; }
#spend .warn { background:#fbf0cf; border-radius:12px; padding:8px 10px; margin:8px 0; color:var(--wat-700); }
#spend .tot { display:flex; justify-content:space-between; font-weight:600; margin-top:8px; padding-top:8px; border-top:1.5px solid #4a4036; }
#issues { width:340px; } #issues .irow { padding:8px 0; border-top:1px solid #e6dcc8; } #issues .irow:first-of-type { border-top:0; } #issues .irow b { display:block; font-weight:600; } #issues .irow span { color:#4a4036; }
#keys { width:260px; } #keys .krow kbd { order:0; margin:0; min-width:64px; text-align:center; font:600 11px/1 var(--f-c); padding:5px 6px; border-radius:6px; background:var(--ink); color:var(--cream); box-shadow:inset 0 -2px 0 rgba(0,0,0,.35); }
.gives { position:relative; background:#eef5e6; border-radius:12px; padding:7px 10px 7px 30px; font-size:13px; margin:8px 0 4px; color:#2f4a2a; } .gives::before { content:''; position:absolute; left:10px; top:10px; width:12px; height:12px; border-radius:50%; background:var(--leaf-500); box-shadow:0 0 0 3px rgba(63,143,91,.2); }
.gives.dim { background:var(--well); color:var(--muted-g); } .gives.dim::before { background:#b8ad9c; box-shadow:none; } .gives b { font-weight:600; margin-right:4px; color:var(--leaf-700); } .gives.dim b { color:#6a6050; }

/* the build menu: a dark bubble with the parts as round chips, the things as round slots, and a cream card */
.bubble { position:absolute; left:var(--gut); top:64px; max-height:calc(100% - 150px); width:var(--bubw); z-index:4; display:flex; flex-direction:column; padding:14px 14px 14px; border-radius:42px; background:var(--char); color:var(--ctext); box-shadow:0 10px 0 rgba(20,16,12,.22),0 26px 40px -16px rgba(20,16,12,.55); transition:width .3s var(--pop), border-radius .3s; }
.bhead { display:flex; align-items:center; gap:6px; padding:0 2px; }
.chips { display:flex; gap:5px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; padding:4px 2px; margin:-4px 0; } .chips::-webkit-scrollbar { display:none; } body.lay-desk .bubble:not(.tucked) .chips { -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); mask-image:linear-gradient(90deg,#000 90%,transparent); }
.chip { width:37px; height:37px; border-radius:50%; padding:0; border:0; background:var(--slot); display:grid; place-items:center; flex:none; box-shadow:none; }
.chip:hover { transform:translateY(-3px); } .chip .px { width:24px; height:24px; }
.chip.on { background:var(--cream); box-shadow:0 0 0 3px var(--jac-300),0 4px 0 3px rgba(0,0,0,.28); }
.tog { display:grid; place-items:center; width:38px; height:38px; border-radius:19px; padding:0; border:0; background:var(--cream); color:var(--ink); flex:none; box-shadow:0 3px 0 rgba(0,0,0,.3); }
.catname { display:flex; align-items:center; gap:10px; margin:12px 6px 6px; min-width:0; }
.catname b { font:600 19px/1.1 var(--f-c); color:var(--cream); white-space:nowrap; }
.cat-hint { font:400 13.5px/1.2 var(--f-c); color:var(--cmuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.find { display:flex; align-items:center; gap:4px; height:30px; padding:0 4px 0 8px; border-radius:15px; background:var(--slot); color:var(--cmuted); flex:none; }
.find .ti { width:16px; height:16px; } .find input { width:74px; border:0; outline:0; background:transparent; color:var(--cream); font:500 13px/1 var(--f-c); padding:0; transition:width .25s var(--ease); } .find input:focus { width:130px; } .find input::placeholder { color:var(--cmuted); }
.filters { display:flex; flex-direction:column; gap:6px; margin:0 4px 6px; } .filters > div:empty { display:none; }
.decor-row { display:flex; flex-wrap:nowrap; gap:5px; align-items:center; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); padding-right:24px; } .decor-row::-webkit-scrollbar { display:none; } .decor-row > * { flex:none; }
.decor-row .lbl, .seg .lbl { font:500 12px/1 var(--f-c); color:var(--cmuted); margin-right:4px; }
.kind, .decor { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border:0; border-radius:14px; background:var(--slot); color:var(--ctext); font:500 12.5px/1 var(--f-c); box-shadow:none; }
.kind:hover, .decor:hover { background:#4a443e; } .kind.on, .decor.on { background:var(--cream); color:var(--ink); }
.kind.learned { box-shadow:inset 0 0 0 1.5px var(--leaf-500); } .kind.guide { box-shadow:inset 0 0 0 1.5px var(--wat-500); }
.decor i { width:10px; height:10px; border-radius:50%; border:2px solid; display:inline-block; }
.seg { display:flex; align-items:center; gap:4px; } .seg select { height:28px; border:0; border-radius:14px; padding:0 10px; background:var(--slot); color:var(--ctext); font:500 12.5px/1 var(--f-c); }
.panel-body { flex:0 1 auto; min-height:190px; overflow-y:auto; overflow-x:hidden; padding:8px 0 22px; margin:0 -6px; scrollbar-width:thin; scrollbar-color:var(--dot) transparent; overscroll-behavior:contain; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, 84px); gap:16px 14px; justify-content:center; padding:4px 6px 0; }
/* a slot: the thing's own pixel picture in a round well, its price under it, its name on a bubble once chosen */
.item { position:relative; width:84px; height:84px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 50%, var(--slot) 0 58%, transparent 59%); box-shadow:none; color:var(--ctext); }
.item:hover { transform:translateY(-3px); } .item:active { transform:translateY(-1px); box-shadow:none; }
.item canvas { width:52px; height:52px; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.item .sp { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); font:600 13px/1 var(--f-pixel); color:var(--cmuted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.item .nm { display:none; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); max-width:150px; overflow:hidden; text-overflow:ellipsis; background:var(--cream); color:var(--ink); font:600 13px/1 var(--f-c); padding:6px 11px 5px; border-radius:999px; white-space:nowrap; box-shadow:0 3px 0 rgba(0,0,0,.3); z-index:2; }
.item.on { background:radial-gradient(circle at 50% 50%, var(--cream) 0 58%, transparent 59%); transform:translateY(-4px); z-index:3; animation:pick .42s both; }
.item.on::before { content:""; position:absolute; inset:6px; border-radius:50%; box-shadow:0 0 0 3px var(--jac-300),0 5px 0 2px rgba(0,0,0,.25); animation:ring .26s var(--ease) both; }
.item.on .sp { display:none; } .item.on .nm { display:block; }
@keyframes pick { 0% { transform:none; animation-timing-function:cubic-bezier(.2,.8,.2,1); } 55% { transform:translateY(-4px) scale(1.06); animation-timing-function:cubic-bezier(.45,0,.55,1); } 100% { transform:translateY(-4px) scale(1); } }
@keyframes ring { from { transform:scale(1.06); opacity:0; } to { transform:none; opacity:1; } }
.item .stack { position:absolute; right:4px; top:6px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--cream); color:var(--ink); font:600 12px/22px var(--f-c); text-align:center; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.item.locked canvas { opacity:.55; filter:grayscale(.6) drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.item .lockb { position:absolute; right:2px; bottom:10px; width:24px; height:24px; border-radius:12px; background:var(--cream); display:grid; place-items:center; box-shadow:0 2px 0 rgba(0,0,0,.35); } .item .lockb .px { width:16px; height:16px; }
.item.fav::after { content:"★"; position:absolute; left:8px; top:6px; color:var(--wat-500); font-size:12px; text-shadow:0 1px 0 rgba(0,0,0,.4); }
.item.sky-head.open { background:radial-gradient(circle at 50% 50%, #4a443e 0 58%, transparent 59%); }
/* a family's tray: its sizes as cream cards, opening under the row its slot sits in */
.ftray { grid-column:1 / -1; position:relative; margin:4px 0 6px; padding:8px; border-radius:22px; background:var(--cream); color:var(--ink); display:flex; gap:6px; justify-content:center; flex-wrap:wrap; box-shadow:0 6px 0 rgba(0,0,0,.28),0 18px 24px -12px rgba(0,0,0,.5); transform-origin:var(--tx,50%) 0; animation:tray .24s var(--ease) both; }
.ftray::before { content:""; position:absolute; left:var(--tx,50%); top:-7px; width:16px; height:16px; margin-left:-8px; background:var(--cream); transform:rotate(45deg); border-radius:3px; }
@keyframes tray { from { transform:scale(.94); opacity:0; } to { transform:none; opacity:1; } }
.vt { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; width:112px; padding:6px 4px 8px; border:0; border-radius:14px; background:var(--well); color:var(--ink); box-shadow:none; animation:chipin .26s var(--ease) both; }
.vt:nth-child(2) { animation-delay:.04s; } .vt:nth-child(3) { animation-delay:.08s; } .vt:nth-child(4) { animation-delay:.12s; }
@keyframes chipin { from { transform:translateY(6px); opacity:0; } to { transform:none; opacity:1; } }
.vt:hover { transform:translateY(-2px); } .vt canvas, .vt svg { width:72px; height:58px; image-rendering:pixelated; }
.vt .vl { font:600 13px/1.1 var(--f-c); } .vt .vp { font:600 12px/1 var(--f-pixel); color:var(--muted-g); }
.vt .kc { position:absolute; top:-6px; right:-4px; }
.vt.on { background:#fff; box-shadow:inset 0 0 0 2.5px var(--jac-500); } .vt.on .vl { color:var(--jac-700); }
.vt.locked { opacity:.6; }
/* the card: what you picked, what it costs, and Place */
.card { position:relative; flex:none; margin-top:10px; background:var(--cream); color:var(--ink); border-radius:30px; padding:16px; display:grid; grid-template-columns:76px minmax(0,1fr); gap:4px 16px; max-height:42%; overflow:auto; scrollbar-width:thin; animation:cardin .26s var(--ease) both; }
.card:empty { display:none; }
@keyframes cardin { from { transform:translateY(10px); opacity:0; } to { transform:none; opacity:1; } }
.card .grab { position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:#d8ccb6; }
.card .cbig { width:76px; height:76px; border-radius:14px; background:var(--well); display:grid; place-items:center; } .card .cbig canvas { width:56px; height:56px; image-rendering:pixelated; }
.card .ttl { font:600 20px/1.12 var(--f-c); margin-top:4px; }
.card .meta { display:flex; gap:8px; align-items:center; font:500 15px/1 var(--f-c); margin-top:6px; color:#4a4036; flex-wrap:wrap; }
.card p { grid-column:1 / -1; margin:6px 0 0; font:400 14.5px/1.4 var(--f-c); color:#4a4036; }
.card p.how { color:var(--muted-g); font-size:13.5px; } .card p.gives { margin:8px 0 0; }
.card .needs { grid-column:1 / -1; justify-self:start; margin-top:6px; font:600 12.5px/1 var(--f-c); padding:7px 10px; border-radius:10px; background:var(--well); color:var(--jac-700); }
.card .row { grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:12px; position:sticky; bottom:-16px; background:var(--cream); padding:4px 0 0; }
.card .sum { font:600 18px/1.1 var(--f-c); color:var(--jac-700); }
.rbtn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border:0; border-radius:14px; font:600 16px/1 var(--f-c); }
.rbtn.go { background:var(--jac-500); color:#fff; box-shadow:0 4px 0 var(--jac-700); } .rbtn.alt { background:var(--well); color:var(--ink); box-shadow:0 4px 0 #d3c4a8; padding-left:10px; }
.rbtn:hover { transform:translateY(-2px); } .rbtn[disabled] { opacity:.45; cursor:default; transform:none; }
.card .chips2 { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:8px; } .card .chips2 .lbl { font:500 12px/1 var(--f-c); color:var(--muted-g); margin-right:2px; }
.card .chip2 { height:30px; padding:0 12px; border-radius:12px; background:var(--well); color:var(--ink); font:600 13px/1 var(--f-c); box-shadow:none; } .card .chip2.on { background:var(--jac-500); color:#fff; box-shadow:0 3px 0 var(--jac-700); }
/* tucked away: the bubble folds to a rail of the part chips */
body:not(.lay-port) .bubble.tucked { width:60px; border-radius:30px; padding:8px 0; align-items:center; overflow:visible; }
body:not(.lay-port) .bubble.tucked .bhead { flex-direction:column-reverse; gap:6px; padding:0; min-height:0; overflow:hidden; } body:not(.lay-port) .bubble.tucked .chips { flex-direction:column; align-items:center; gap:6px; overflow:hidden; }
body:not(.lay-port) .bubble.tucked .catname, body:not(.lay-port) .bubble.tucked .filters, body:not(.lay-port) .bubble.tucked .panel-body { display:none; }
body:not(.lay-port) .bubble.tucked .chip.on { box-shadow:0 0 0 3px var(--jac-300); }

/* the bottom line: tools on the left; turn and zoom, the views, Save and Plan on the right */
.tools { position:absolute; left:var(--gut); bottom:14px; display:flex; gap:4px; padding:6px; border-radius:22px; background:var(--char); box-shadow:var(--tshadow); z-index:5; }
.tool { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:56px; height:54px; padding:0; border:0; border-radius:16px; background:transparent; color:var(--cream); font:500 12px/1 var(--f-c); box-shadow:none; }
.tool:hover { transform:translateY(-3px); background:var(--slot); } .tool:active { transform:translateY(-1px); box-shadow:none; }
.tool.on { background:var(--jac-500); color:#fff; box-shadow:0 3px 0 var(--jac-700); }
.tsep { width:1px; margin:8px 3px; background:var(--dot); flex:none; }
#btn-redo { animation:slidein .26s var(--ease) both; } @keyframes slidein { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
#btn-undo.hold { box-shadow:0 0 0 3px var(--jac-300); }
.uscrub { position:absolute; bottom:calc(100% + 12px); left:var(--ux,300px); transform:translateX(-50%); display:grid; gap:4px; justify-items:center; padding:10px 14px; border-radius:18px; background:var(--cream); color:var(--ink); font:500 12.5px/1.2 var(--f-c); box-shadow:0 6px 0 rgba(20,16,12,.18); white-space:nowrap; z-index:8; }
.uscrub b { font:600 13.5px var(--f-c); }
.tbar { position:absolute; right:0; bottom:calc(100% + 10px); display:flex; gap:4px; padding:6px; border-radius:20px; background:var(--char); box-shadow:var(--tshadow); animation:panelup .2s var(--ease) both; }
.rb { display:flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 12px; border:0; border-radius:16px; background:var(--slot); color:var(--ctext); font:500 12.5px/1 var(--f-c); white-space:nowrap; box-shadow:none; }
.rb:hover { transform:translateY(-2px); background:#4a443e; } .rb:active { transform:none; box-shadow:none; }
.rb.on { background:var(--cream); color:var(--ink); } .rb .ti { width:18px; height:18px; }
.rb.ic { width:36px; padding:0; } .rb.ic .ti { width:19px; height:19px; }
.rb.wide { padding:0 14px 0 10px; } .rb.off .lb { text-decoration:line-through; opacity:.7; }
#btn-critters.off { opacity:1; }
.brow { position:absolute; right:14px; bottom:14px; display:flex; gap:10px; align-items:flex-end; z-index:5; }
.vtray, .ltray { position:relative; display:flex; gap:4px; padding:6px; height:48px; border-radius:22px; background:var(--char); box-shadow:var(--tshadow); align-items:center; }
.vsep { width:1px; height:22px; background:var(--dot); margin:0 2px; flex:none; }
.vmore { display:none; position:absolute; left:0; bottom:calc(100% + 10px); width:340px; padding:8px; border-radius:22px; background:var(--char); box-shadow:0 6px 0 rgba(20,16,12,.25),0 20px 30px -14px rgba(20,16,12,.5); gap:4px; z-index:9; }
.vmore.open { display:grid; animation:panelup .22s var(--ease) both; }
.vmore .rt { font:500 11.5px/1 var(--f-c); color:var(--cmuted); padding:6px 6px 2px; }
.rrow { display:grid; gap:4px; } .rrow.r4, .radio-row { grid-template-columns:repeat(4,1fr); } .rrow.r2 { grid-template-columns:1fr 1fr; }
.rrow .rb { font-size:12px; gap:4px; padding:0 4px; } .rrow .rb .ti { width:16px; height:16px; }
.radio-row .rb.on { background:var(--wat-300); color:var(--ink); }
.site-row { grid-template-columns:minmax(0,1fr) auto; } .site-row input { height:36px; border:0; border-radius:16px; padding:0 12px; background:var(--slot); color:var(--cream); font:600 13px/1 var(--f-c); min-width:0; } .site-row input:focus { outline:2px solid var(--jac-300); } .site-row .rb { padding:0 12px; }
.rb.more.on { background:var(--cream); color:var(--ink); }
.save { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border:0; border-radius:24px; background:var(--char); color:var(--cream); box-shadow:var(--pshadow); position:relative; transition:transform .09s ease-out, background-color .2s, box-shadow .2s; }
.save .ti { width:22px; height:22px; } .save:hover { transform:translateY(-2px); } .save.down { transform:scale(.9); }
.save.ok { background:var(--leaf-500); box-shadow:0 4px 0 var(--leaf-700); }
.fileslip { position:absolute; right:0; bottom:calc(100% + 6px); width:150px; padding:8px 10px; border-radius:6px; background-color:var(--paper); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:8px 8px; color:#4a4036; font:600 11.5px/1.3 var(--f-c); box-shadow:0 6px 10px -4px rgba(43,38,34,.4); pointer-events:none; animation:slip .9s cubic-bezier(.2,.9,.3,1.1) both; }
.fileslip small { display:block; font-weight:500; color:var(--muted-g); }
@keyframes slip { 0% { opacity:0; transform:translateY(30px) scale(.6); } 35% { opacity:1; transform:none; } 70% { opacity:1; transform:none; } 100% { opacity:0; transform:translate(60px,-30px) rotate(8deg) scale(.5); } }
.planslot { position:relative; display:block; height:48px; width:var(--pw,104px); flex:none; }
.planb { position:absolute; right:0; top:0; z-index:2; display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 18px 0 14px; border:0; border-radius:24px; background:var(--jac-500); color:#fff; font:600 16px/1 var(--f-c); box-shadow:0 4px 0 var(--jac-700); white-space:nowrap; }
.planb:hover { transform:translateY(-2px); } .planb:active { transform:translateY(1px); box-shadow:0 2px 0 var(--jac-700); }
.planb .pw2 { position:relative; display:block; height:20px; width:var(--ws,36px); transition:width .26s cubic-bezier(.2,.9,.3,1.1); }
.planb .pw2 > span { position:absolute; left:0; top:1px; white-space:nowrap; transition:opacity .16s; } .planb .pf { opacity:0; }
.planb:hover .pw2, .planb:focus-visible .pw2, .planb.x .pw2 { width:var(--wl,110px); } .planb:hover .ps, .planb:focus-visible .ps, .planb.x .ps { opacity:0; } .planb:hover .pf, .planb:focus-visible .pf, .planb.x .pf { opacity:1; }
.planb:focus-visible, .save:focus-visible, .isl:focus-visible, .tool:focus-visible, .rb:focus-visible, .chip:focus-visible, .item:focus-visible, .pill:focus-visible { outline:2px solid var(--jac-300); outline-offset:3px; }

/* hints, toasts and the next step */
#hint { position:absolute; left:50%; bottom:86px; transform:translateX(-50%); background:rgba(47,43,40,.86); color:var(--cream); padding:7px 14px; border-radius:999px; font:500 13px/1.25 var(--f-c); pointer-events:none; max-width:min(60%, 560px); text-align:center; z-index:4; }
#hint:empty { display:none; }
#toasts { position:absolute; top:64px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; pointer-events:none; align-items:center; z-index:8; width:max-content; max-width:min(440px, calc(100vw - 32px)); }
.toast { background:var(--cream); color:var(--ink); border-radius:18px; padding:9px 15px; box-shadow:0 6px 0 rgba(20,16,12,.18),0 14px 24px -12px rgba(20,16,12,.5); opacity:0; transform:translateY(-8px); transition:opacity .3s, transform .3s var(--pop); font:500 13.5px/1.3 var(--f-c); text-align:center; }
.toast.show { opacity:1; transform:none; }
.toast.critter { background:#eef5e6; } .toast.milestone { background:#fbf0cf; font-weight:600; } .toast.warn { background:#f6e3df; color:#5a1a14; } .toast.gain { background:var(--leaf-500); color:#fff; font-weight:600; }
#next { position:absolute; left:calc(var(--gut) + var(--bubw) + 14px); top:64px; width:240px; text-align:left; background:var(--cream); color:var(--ink); border:0; border-radius:18px; padding:10px 14px 12px; box-shadow:0 6px 0 rgba(20,16,12,.18); font:400 12.5px/1.3 var(--f-c); display:flex; flex-direction:column; gap:3px; z-index:4; transition:left .3s var(--pop); }
#next .lbl { font:600 11.5px/1 var(--f-c); color:var(--jac-700); } #next b { font:600 14.5px/1.2 var(--f-c); } #next .d { color:#4a4036; }
#next.pop { animation:nextpop .7s ease; } @keyframes nextpop { 30% { transform:scale(1.05); } }
#next .x { position:absolute; right:8px; top:6px; width:20px; height:20px; line-height:18px; text-align:center; border-radius:50%; color:var(--muted-g); font-weight:600; font-size:15px; } #next .x:hover { background:var(--well); }
#next.min { width:auto; padding:7px 30px 7px 12px; border-radius:999px; gap:0; } #next.min b, #next.min .d { display:none; } #next.min .x { top:5px; font-size:0; } #next.min .x::before { content:"+"; font-size:15px; }
body.tucked #next { left:calc(var(--gut) + 60px + 14px); }
body.inside #next { display:none; }
body.at-laptop #hud-top, body.at-laptop #hud-status, body.at-laptop #panel, body.at-laptop #hud-left, body.at-laptop #hud-right, body.at-laptop #hint, body.at-laptop #next { visibility:hidden; }
/* the use panel */
#use { left:0; width:330px; } #use .use-row { display:flex; gap:8px; align-items:center; width:100%; text-align:left; padding:6px 8px; border-radius:12px; background:var(--well); margin:4px 0; box-shadow:none; font-weight:500; }
#use .use-row.on { background:#fff; box-shadow:inset 0 0 0 2px var(--jac-500); } #use .use-row kbd { order:0; margin:0; min-width:28px; text-align:center; } #use .use-row span { display:flex; flex-direction:column; } #use .use-row i { margin:2px 0 0; font-weight:400; }
/* the plan and help on cream */
.modal-card { background:var(--cream); border:0; border-radius:28px; box-shadow:0 10px 0 rgba(20,16,12,.2),0 30px 50px -20px rgba(0,0,0,.6); }
.modal-bar { background:var(--cream); border-bottom:1.5px solid #e6dcc8; }
.modal-bar b { font-weight:600; font-size:17px; }
.modal-bar input, .notes textarea, #rainfall { border:0; background:#fff; box-shadow:inset 0 0 0 1.5px #e2d6bf; border-radius:10px; }
.modal-bar .close { background:var(--well); }
.help-body p b { font-weight:600; }
.checks li { border-radius:10px; background:#eef5e6; } .checks li.warn { background:#fbf0cf; } .checks li.bad { background:#f6e3df; }

@media (prefers-reduced-motion: reduce) {
  .item.on, .item.on::before, .ftray, .vt, .card, .hpanel.open, .vmore.open, .tbar, #btn-redo, .fileslip, .toast { animation:none !important; }
  .isl-x, .igroup.open .isl-x, .isl-in, .igroup.open .isl-in { transition:opacity .15s !important; }
  .mk > .ml::before, .planb .pw2, .bubble { transition:none; }
}
/* a narrower laptop: the pills drop their small words before anything overlaps */
@media (max-width:1240px) { .pill .of, .pill .up, .pill .pl { display:none; } :root { --bubw:500px; } }
@media (max-width:1060px) { :root { --bubw:470px; } .grid { grid-template-columns:repeat(auto-fill, 76px); gap:14px 10px; } .item { width:76px; height:76px; } .chips { overflow:hidden; } .ltray .lb { display:none; } .ltray .rb.wide { width:36px; padding:0; } }
/* technical drawings in the families tray */
svg.iso { display:block; overflow:visible; } svg.iso .f1 { fill:#fbf6ea; } svg.iso .f2 { fill:#f0e4cc; } svg.iso .f3 { fill:#e4d3b2; } svg.iso .fr { fill:#e2e5e7; } svg.iso .fr2 { fill:#d2d6d9; }
svg.iso .ln { fill:none; stroke:#3a332c; stroke-width:.9; stroke-linejoin:round; } svg.iso .sm { fill:none; stroke:#9c8f7c; stroke-width:.55; } svg.iso .dm { fill:none; stroke:#4b3384; stroke-width:.8; }
svg.iso .dt { font:600 8.5px/1 var(--f-c); fill:#4b3384; } svg.iso .dq { font:500 8px/1 var(--f-c); fill:#8a7f70; }
.vt svg.iso { width:104px; height:80px; } .vt.wide { width:136px; } .vt.wide svg.iso { width:128px; height:74px; }

/* ================= phones: portrait and landscape ================= */
/* ui.js sets body.lay-port or body.lay-land and moves the tools, the more tray and the views into the sheets; desktop keeps them where they are */
.dock, #rt4, .msheet, .esheet, .xi, .msub, #panhint { display:none; }
body.lay-port, body.lay-land { --gut:12px; --top:max(12px, env(safe-area-inset-top)); }
body.lay-port #hud-status, body.lay-land #hud-status, body.lay-port .brow, body.lay-land .brow, body.lay-port #next, body.lay-land #next { display:none; }
.round { position:relative; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:var(--char); color:var(--cream); box-shadow:var(--pshadow); flex:none; }
.round .ti { width:20px; height:20px; } .round.on { background:var(--cream); color:var(--ink); }
.round .badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--wat-500); color:var(--ink); font:600 11px/18px var(--f-c); text-align:center; }
body.lay-port #rt4, body.lay-land #rt4 { display:flex; position:absolute; right:12px; top:calc(var(--top) + 52px); gap:8px; align-items:center; z-index:6; }
body.lay-land #rt4 { top:var(--top); }
body.lay-port .planslot, body.lay-land .planslot { height:40px; } body.lay-port .planb, body.lay-land .planb { height:40px; padding:0 14px; border-radius:20px; font-size:15px; } body.lay-port .planb > .ti, body.lay-land .planb > .ti { display:none; }
/* the top row: Build on the left; Bank and Yield on the right, folding to circles while you build */
body.lay-port #hud-top { left:12px; right:12px; top:var(--top); gap:6px; justify-content:flex-start; flex-wrap:nowrap; }
body.lay-port .igroup { display:none; }
body.lay-port #pw-bank { margin-left:auto; }
body.lay-port .pill .pl, body.lay-port .pill .of, body.lay-port .pill .up, body.lay-land .pill .pl, body.lay-land .pill .of, body.lay-land .pill .up { display:none; }
body.lay-port .pill .bar, body.lay-land .pill .bar { width:34px; }
.fold .pill { transition:padding .3s cubic-bezier(.2,.9,.3,1.15), gap .3s; }
body.cz .fold:not(.pop) .pill { padding:4px; gap:0; } body.cz .fold:not(.pop) .pill > :not(.well):not(.pin), body.cz .fold:not(.pop) .pin > :not(.well) { display:none; }
body.cz .fold:not(.pop) .pin { padding:0; }
.fold.pop .pill { animation:popout .32s var(--pop) both; z-index:4; } @keyframes popout { from { transform:scale(.9); } to { transform:none; } }
/* portrait: the menu is a sheet with a dock of tools; down, only the dock shows */
body.lay-port .bubble { top:auto; left:9px; right:9px; bottom:max(9px, env(safe-area-inset-bottom)); width:auto; height:min(52vh, 470px); border-radius:36px; padding:0 10px 10px; z-index:7; transform:translateY(0); transition:transform .3s cubic-bezier(.2,.9,.3,1.06); box-shadow:0 -4px 0 rgba(20,16,12,.18),0 -20px 40px -18px rgba(20,16,12,.5); touch-action:pan-y; }
body.lay-port .bubble.tucked { transform:translateY(calc(100% - 86px)); }
body.lay-port .bubble.dragging { transition:none; }
body.lay-port .dock { display:block; padding:8px 0 2px; cursor:grab; touch-action:none; flex:none; }
.dock .handle { display:block; width:44px; height:5px; margin:0 auto 8px; border-radius:3px; background:var(--dot); }
.drow { display:flex; align-items:center; gap:6px; }
body.lay-port .drow .tools { position:static; flex:1; justify-content:space-between; gap:0; padding:0; background:none; box-shadow:none; min-width:0; }
body.lay-port .drow .tool, body.lay-land .tools .tool { width:34px; height:34px; border-radius:17px; } body.lay-port .drow .tool > span, body.lay-land .tools .tool > span { display:none; }
body.lay-port .drow .tsep { margin:6px 1px; } body.lay-port .drow .tog { width:40px; height:40px; border-radius:20px; }
body.lay-port .bhead { padding:2px 0 4px; } body.lay-port .chips { overflow-x:auto; scrollbar-width:none; padding:4px 4px 6px; gap:7px; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
body.lay-port .chips::-webkit-scrollbar { display:none; } body.lay-port .chip { width:44px; height:44px; } body.lay-port .chip .px { width:26px; height:26px; }
body.lay-port .catname { justify-content:center; margin:6px 4px 4px; } body.lay-port .catname .spacer { display:none; } body.lay-port .find input { width:46px; } body.lay-port .find input:focus { width:110px; }
body.lay-port .grid, body.lay-land .grid { grid-template-columns:repeat(auto-fill, 72px); gap:12px 14px; } body.lay-port .item, body.lay-land .item { width:72px; height:72px; } body.lay-port .item canvas, body.lay-land .item canvas { width:44px; height:44px; }
body.lay-port .ftray .vt, body.lay-land .ftray .vt { width:96px; } body.lay-port .ftray .vt.wide, body.lay-land .ftray .vt.wide { width:118px; } body.lay-port .vt svg.iso { width:88px; height:68px; } body.lay-port .vt.wide svg.iso { width:110px; height:64px; }
body.lay-port .panel-body { min-height:0; }
body.lay-port .card { position:absolute; left:10px; right:10px; bottom:10px; margin:0; z-index:9; max-height:78%; border-radius:28px; padding:14px; grid-template-columns:60px minmax(0,1fr); box-shadow:0 -10px 24px -14px rgba(0,0,0,.6); }
body.lay-port .card .cbig { width:60px; height:60px; border-radius:12px; } body.lay-port .card .ttl { font-size:18px; } body.lay-port .rbtn { height:46px; border-radius:14px; }
/* a picked thing with the menu down (and always in landscape): one line with Place and a cross */
body.lay-port .bubble.tucked .card, body.lay-land .card { display:flex; align-items:center; gap:10px; padding:8px; border-radius:22px; max-height:none; overflow:visible; animation:none; }
body.lay-port .bubble.tucked .card { position:absolute; left:3px; right:3px; bottom:calc(100% + 12px); box-shadow:0 6px 0 rgba(20,16,12,.2); }
body.lay-port .bubble.tucked .card > p, body.lay-port .bubble.tucked .card .grab, body.lay-port .bubble.tucked .card .needs, body.lay-port .bubble.tucked .card .meta, body.lay-port .bubble.tucked .card .row .sum, body.lay-port .bubble.tucked .card .row .kc, body.lay-port .bubble.tucked .card .row [data-act=close] .ml,
body.lay-land .card > p, body.lay-land .card .grab, body.lay-land .card .needs, body.lay-land .card .meta, body.lay-land .card .row .kc, body.lay-land .card .row [data-act=close] .ml, body.lay-land .card .cbig { display:none; }
body.lay-port .bubble.tucked .card .cbig { width:44px; height:44px; border-radius:12px; flex:none; } body.lay-port .bubble.tucked .card .cbig canvas { width:34px; height:34px; }
body.lay-port .bubble.tucked .card > div:nth-of-type(2), body.lay-land .card > div:nth-of-type(2) { flex:1; min-width:0; }
body.lay-port .bubble.tucked .card .ttl, body.lay-land .card .ttl { font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.lay-port .bubble.tucked .card .msub { display:block; font:400 12px/1.25 var(--f-c); color:var(--muted-g); }
body.lay-port .bubble.tucked .card .row, body.lay-land .card .row { margin:0; padding:0; position:static; background:none; flex:none; gap:6px; }
body.lay-port .bubble.tucked .card .rbtn, body.lay-land .card .rbtn { height:40px; padding:0 14px; font-size:15px; }
body.lay-port .bubble.tucked .card [data-act=close] { width:40px; padding:0; justify-content:center; border-radius:50%; background:var(--char); color:var(--cream); box-shadow:none; } body.lay-port .bubble.tucked .card .xi { display:block; }
body.lay-land .card .row .sum { font-size:13px; } body.lay-land .card .ttl { font-size:14px; }
#panhint { position:absolute; left:50%; top:45%; transform:translateX(-50%); align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(47,43,40,.8); color:var(--cream); font:500 12.5px/1 var(--f-c); white-space:nowrap; z-index:5; pointer-events:none; }
#panhint i { width:10px; height:10px; border-radius:50%; border:2px solid var(--cream); } body.lay-port #panhint.on, body.lay-land #panhint.on { display:flex; animation:panelin .3s var(--ease) both; }
/* the menu sheet: the radio and seasons, the view and sound, Save a copy, help, and the vitals in small type */
body.lay-port .msheet, body.lay-land .msheet { display:grid; position:absolute; left:9px; right:9px; bottom:max(9px, env(safe-area-inset-bottom)); z-index:12; gap:8px; padding:10px 14px 16px; border-radius:36px; background:var(--char); color:var(--ctext); box-shadow:0 -10px 30px -10px rgba(0,0,0,.55); transform:translateY(calc(100% + 20px)); visibility:hidden; transition:transform .3s cubic-bezier(.2,.9,.3,1.06), visibility 0s .3s; max-height:calc(100% - 24px); overflow:auto; overscroll-behavior:contain; touch-action:pan-y; }
body.lay-land .msheet { left:auto; right:12px; bottom:12px; width:380px; border-radius:30px; }
.msheet.open { transform:none !important; visibility:visible !important; transition:transform .3s cubic-bezier(.2,.9,.3,1.06), visibility 0s !important; }
.msheet .handle { display:block; width:44px; height:5px; margin:0 auto 2px; border-radius:3px; background:var(--dot); }
.msheet .vmore { display:grid; position:static; width:auto; padding:0; background:none; box-shadow:none; animation:none; }
.msheet .rrow .rb { height:40px; border-radius:14px; font-size:13px; }
.mstat { display:flex; justify-content:space-between; align-items:center; gap:6px; font:500 12.5px/1.2 var(--f-c); color:var(--cmuted); padding:4px 4px 0; }
.mstat .iss { box-shadow:none; background:var(--wat-500); color:var(--ink); padding:0 12px 0 5px; } .mstat .iss b { background:var(--ink); color:var(--wat-300); }
#missues { display:grid; gap:4px; } #missues .irow { padding:8px 10px; border-radius:12px; background:var(--slot); font:400 12.5px/1.3 var(--f-c); } #missues .irow b { display:block; font-weight:600; color:var(--cream); }
/* the eye: Go inside, Peel roof and Go underground */
body.lay-port .esheet, body.lay-land .esheet { display:block; position:absolute; right:12px; top:calc(var(--top) + 102px); z-index:11; padding:6px; border-radius:22px; background:var(--char); box-shadow:var(--cshadow); transform-origin:100% 0; transform:scale(.9); opacity:0; visibility:hidden; transition:transform .22s var(--pop), opacity .15s, visibility 0s .22s; }
body.lay-land .esheet { top:calc(var(--top) + 50px); }
.esheet.open { transform:none !important; opacity:1 !important; visibility:visible !important; transition:transform .22s var(--pop), opacity .15s, visibility 0s !important; }
.esheet .ltray { flex-direction:column; height:auto; padding:0; background:none; box-shadow:none; align-items:stretch; } .esheet .ltray .rb.wide { height:44px; justify-content:flex-start; } .esheet .ltray .lb { display:inline !important; }
/* the money panels hang under the top row, full width */
body.lay-port .hpanel { position:fixed; left:12px; right:12px; top:calc(var(--top) + 56px); width:auto; max-height:min(62vh, 520px); z-index:20; }
body.lay-port #keys, body.lay-land #keys { position:fixed; left:auto; right:12px; top:auto; bottom:12px; z-index:13; max-height:calc(100vh - 24px); }
body.lay-port #use, body.lay-land #use { position:fixed; left:12px; right:auto; top:auto; bottom:110px; width:min(330px, calc(100vw - 24px)); z-index:20; }
body.lay-land #use { bottom:62px; right:12px; left:auto; }
body.lay-port .uscrub { position:fixed; left:50% !important; bottom:110px; } body.lay-port .tbar { position:fixed; right:12px; bottom:110px; }
body.lay-land .uscrub { position:fixed; left:auto !important; right:12px; transform:none; bottom:62px; } body.lay-land .tbar { position:fixed; right:12px; bottom:62px; }
body.lay-port #hint, body.lay-land #hint { bottom:auto; top:calc(var(--top) + 104px); max-width:calc(100% - 24px); }
body.lay-port #toasts, body.lay-land #toasts { top:calc(var(--top) + 104px); }
body.lay-land #hint, body.lay-land #toasts { top:calc(var(--top) + 52px); left:calc(50% + var(--lw) / 2); }
/* landscape: a side panel that tucks into a rail of the part chips; tools bottom right; one 12 px inset on every edge */
body.lay-land { --lw:380px; } body.lay-land.tucked { --lw:52px; }
body.lay-land #hud-top { left:calc(12px + var(--lw) + 12px); right:auto; top:var(--top); gap:6px; transition:left .3s var(--pop); }
body.lay-land .iss .iw { display:none; } body.lay-land .iss { padding:0; width:32px; justify-content:center; }
body.lay-land:not(.tucked) .isl .vw { display:none; } body.lay-land:not(.tucked) .isl { width:32px; padding:0; justify-content:center; }
body.lay-land:not(.tucked) #rt4 .planslot, body.lay-land:not(.tucked) #btn-eye { display:none; }
body.lay-land .bubble { top:12px; bottom:12px; left:12px; width:380px; border-radius:30px; padding:10px; }
body.lay-land .bubble.tucked { width:52px; padding:8px 0; border-radius:26px; }
body.lay-land .bhead .chips { overflow-x:auto; scrollbar-width:none; } body.lay-land .bhead .chip { width:36px; height:36px; } body.lay-land .bhead .chip .px { width:22px; height:22px; }
body.lay-land .bubble.tucked .chip { width:38px; height:38px; } body.lay-land .catname { margin:8px 4px 4px; } body.lay-land .catname b { font-size:16px; } body.lay-land .cat-hint { display:none; }
body.lay-land .card { margin-top:8px; padding:8px 8px 8px 14px; border-radius:20px; }
body.lay-land .tools { left:auto; right:12px; bottom:12px; padding:5px; gap:3px; } body.lay-land .tools .tool { width:38px; }
@media (prefers-reduced-motion: reduce) { body.lay-port .bubble, .msheet, .esheet { transition:none !important; } }
.item.lift { transform:scale(1.12) translateY(-4px); box-shadow:0 0 0 3px var(--jac-300); border-radius:50%; z-index:5; }
body.lay-port .bubble.tucked > :not(.dock):not(.card) { visibility:hidden; transition:visibility 0s .3s; } body.lay-port .bubble:not(.tucked) { overflow:hidden; }
.msheet .rb.ic { width:auto; } body.lay-port .card .kc { display:none; } body.lay-port .card [data-act=close] { padding-left:16px; }
.esheet .ltray .rb.wide { width:auto !important; padding:0 14px 0 10px !important; }
body.lay-land .card .xi { display:block; } body.lay-land .card [data-act=close] { width:40px; padding:0; justify-content:center; border-radius:50%; background:var(--char); color:var(--cream); box-shadow:none; }
body.lay-port .bubble.tucked .card:empty, body.lay-land .card:empty { display:none; }
body.lay-port #yield-sum { display:none; } body.lay-port:not(.cz) #btn-budget .bar { display:none; }
body.lay-port .bubble.trayopen:not(.tucked) .card { display:none; }
/* the slim chip: with the menu folded, what you picked is one line beside the rail (above the dock on a phone): its name, its price, Esc to put it down, and Build it once staked */
.bubble.tucked .card:not(:empty) { display:flex; align-items:center; gap:10px; padding:6px 6px 6px 8px; border-radius:22px; max-height:none; overflow:visible; animation:cardin .22s var(--ease) both; box-shadow:0 6px 0 rgba(20,16,12,.2),0 14px 24px -12px rgba(20,16,12,.45); }
body:not(.lay-port) .bubble.tucked .card { position:absolute; left:calc(100% + 12px); bottom:0; width:max-content; max-width:min(520px, calc(100vw - 260px)); margin:0; }
.bubble.tucked .card > p, .bubble.tucked .card .grab, .bubble.tucked .card .needs, .bubble.tucked .card .meta, .bubble.tucked .card .row .sum, .bubble.tucked .card .row [data-act=close] .ml, .bubble.tucked .card:not(.staked) [data-act=place] { display:none; }
.bubble.tucked .card .cbig { width:40px; height:40px; border-radius:12px; flex:none; } .bubble.tucked .card .cbig canvas { width:30px; height:30px; }
.bubble.tucked .card > div:nth-of-type(2) { flex:1; min-width:0; } .bubble.tucked .card .ttl { font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bubble.tucked .card .msub { display:block; font:400 12px/1.25 var(--f-c); color:var(--muted-g); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bubble.tucked .card .row { margin:0; padding:0; position:static; background:none; flex:none; gap:6px; } .bubble.tucked .card .rbtn { height:38px; padding:0 12px; font-size:14px; }
.bubble.tucked .card [data-act=close] { gap:6px; padding:0 10px 0 8px; border-radius:19px; } .bubble.tucked .card .xi { display:block; } .bubble.tucked .card .xi .ti { width:16px; height:16px; }
body.lay-port .bubble.tucked .card .kc, body.lay-land .bubble.tucked .card .kc { display:none; }
.choice .spxw { display:grid; place-items:center; width:100%; height:70px; border-radius:8px; background:var(--paper2); } .choice .spx { width:36px; height:36px; }
body.lay-port .bubble, body.lay-land .bubble { max-height:none; } body.lay-land .panel-body, body.lay-port .panel-body { flex:1 1 auto; }
/* the section knife (knife.js) joins the views as a round icon on a desk, with its words in the eye sheet on a phone */
#btn-cut { position:relative; } #btn-cut::before { content:""; width:18px; height:18px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18 M3 9v11h18V9 M3 14h18 M12 9v11 M14 3l4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18 M3 9v11h18V9 M3 14h18 M12 9v11 M14 3l4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ltray #btn-cut { width:36px; padding:0; font-size:0; gap:0; } .esheet .ltray #btn-cut { width:auto !important; padding:0 14px 0 10px !important; font-size:12.5px; gap:6px; justify-content:flex-start; }
@media (max-width:1279px) { body.lay-desk .ltray .lb { display:none; } body.lay-desk .ltray .rb.wide { width:36px; padding:0; } } /* below 1280 the views keep their icons and titles, so the bottom line never runs into the tools */