:root {
  --ink: #283a8c;
  --paper: #fbf6ea;
  --meadow: #b5d99a;
  --lake: #dbe6e4;
  --pencil: #f6c95a;
  --coral: #f2a08a;
  --muted: #45518a;
  --line: #283a8c33;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--lake); font: 15px/1.4 "Trebuchet MS", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; overflow: hidden; }
button, input, select { font: inherit; }
button { min-height: 44px; padding: 10px 15px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: 0 3px 0 var(--ink); cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid #c8423a; outline-offset: 4px; }
button svg, .launch-pencil svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.primary { background: var(--pencil); }
.secondary { background: var(--meadow); }
.hand { font-family: "Chalkboard SE", "Comic Sans MS", cursive; font-weight: 700; }
kbd { font: 10px/1.2 "Trebuchet MS", sans-serif; border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; opacity: .75; }
kbd:empty { display: none; }
#worldCanvas { display: block; width: 100vw; height: 100dvh; touch-action: none; outline-offset: -5px; }
header { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.brand, .world-info { display: flex; align-items: center; gap: 12px; }
.brand { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px 18px 15px 8px; padding: 1px 15px 1px 4px; box-shadow: 2px 3px 0 #283a8c25; }
.brand a { display: grid; place-items: center; color: var(--ink); text-decoration: none; font: 32px/1 serif; width: 40px; height: 44px; pointer-events: auto; }
.brand strong { font-size: 25px; white-space: nowrap; }
.world-info { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 5px 6px 5px 14px; font-size: 12px; font-weight: 700; }
.world-info button { pointer-events: auto; font-size: 12px; min-height: 44px; padding: 8px 12px; box-shadow: 0 2px 0 var(--ink); }
.health-status { color: #933e30; }
#pencilLabel, #healthStatus { white-space: nowrap; }
.hud { position: absolute; z-index: 2; left: 20px; top: 88px; width: 228px; padding: 14px 16px; background: #fbf6eaf5; border: 1px solid #283a8c40; border-radius: 3px 5px 20px 5px; box-shadow: 3px 4px 0 #283a8c1c; pointer-events: none; }
.quest-details { pointer-events: auto; margin-top: 2px; }
.quest-details summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; touch-action: manipulation; }
.quest-details summary::-webkit-details-marker { display: none; }
.quest-details summary::after { content: '+'; font-size: 22px; line-height: 1; font-weight: 400; }
.quest-details[open] summary::after { content: '−'; }
.quest-details summary:focus-visible { outline: 3px solid #c8423a; outline-offset: 2px; border-radius: 4px; }
.quest-details-content { max-height: min(32dvh, 260px); overflow: auto; overscroll-behavior: contain; padding: 0 2px 3px; border-top: 1px dashed var(--line); }
.quest-label { font-size: 11px; color: var(--muted); }
.hud h2 { margin: 5px 0 8px; font-size: 21px; line-height: 1.2; }
.hud p { font-size: 12px; line-height: 1.45; margin: 7px 0; }
.hud .danger-status { padding: 3px 0 3px 7px; border-left: 3px solid var(--coral); color: #8c3f2f; font-size: 11px; font-weight: 700; }
.hud .trail { font-size: 10px; font-weight: 700; color: var(--muted); }
.hud .crew { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 10px; color: var(--muted); }
.meter { height: 5px; overflow: hidden; border-radius: 3px; background: #283a8c17; }
.meter span { display: block; height: 100%; background: var(--pencil); }
.aim-cross::after { left: 10px; top: 39px; width: 60px; height: 2px; }
.keys { position: absolute; z-index: 2; bottom: 126px; left: 50%; transform: translateX(-50%); width: min(420px, 48vw); text-align: center; pointer-events: none; }
.keys p { margin: 0; }
#actionHint { display: inline-block; padding: 7px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 700; }
#actionFeedback { margin-top: 5px; font-size: 13px; font-weight: 800; text-shadow: 0 1px var(--paper), 1px 0 var(--paper), -1px 0 var(--paper); }
#actionFeedback:empty { display: none; }
#controlsHelp { margin-top: 5px; font-size: 11px; background: #fbf6eaeb; border-radius: 6px; padding: 4px 8px; }
.notice { position: absolute; z-index: 7; bottom: 218px; left: 50%; transform: translateX(-50%); max-width: min(480px, 90vw); background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 12px; font-size: 13px; text-align: center; pointer-events: none; }
.notice:empty { display: none; }
.overlay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; background: #283a8c47; backdrop-filter: blur(3px); overflow: auto; }
.sheet { width: 100%; max-width: 570px; max-height: calc(100dvh - 40px); padding: 25px; border: 2px solid var(--ink); border-radius: 8px 24px 12px 20px; background: var(--paper); box-shadow: 6px 7px 0 #283a8c50; overflow: auto; }
.sheet h1 { margin: 0; font-size: 54px; line-height: 1.1; letter-spacing: -2px; }
.sheet h2 { margin: 0 0 8px; font-size: 32px; line-height: 1.15; }
.sheet h3 { font-size: 25px; margin-bottom: 5px; }
.sheet p { font-size: 14px; line-height: 1.55; }
.sheet .close { float: right; min-width: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 28px; }
.launch { position: relative; max-width: 570px; margin-left: min(25vw, 270px); }
.launch-pencil { float: right; display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid var(--ink); border-radius: 50% 44% 48% 42%; background: var(--pencil); transform: rotate(9deg); }
.launch-pencil svg { width: 37px; height: 37px; }
.launch .lead { font-size: 17px; max-width: 39ch; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 14px; }
.modes button { text-align: left; padding: 15px; }
.modes strong { display: block; margin-bottom: 7px; font-size: 25px; }
.modes small { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; }
.resume-team { width: 100%; text-align: left; margin: 6px 0 12px; padding: 11px 14px; background: #b9e0e840; }
.resume-team strong, .resume-team small { display: block; }
.resume-team small { margin-top: 3px; font-size: 11px; line-height: 1.45; font-weight: 500; }
.launch .tiny, .quiet { font-size: 12px; color: var(--muted); }
.join-row { display: flex; gap: 8px; margin: 12px 0; }
.join-row input { flex: 1; min-width: 0; min-height: 44px; padding: 9px; border: 1px solid #7d86b8; border-radius: 8px; background: white; color: var(--ink); text-transform: uppercase; }
.join-row button { white-space: nowrap; }
.draw-settings { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.draw-settings select { flex: 1; min-width: 0; min-height: 44px; border: 1px solid #7d86b8; border-radius: 8px; padding: 8px; background: white; color: var(--ink); }
.drawing-sheet { max-width: 620px; }
.drawing-tools, .drawing-history { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.drawing-tools button, .drawing-history button { padding: 8px 11px; font-size: 12px; }
.drawing-tools select { min-height: 44px; min-width: 0; padding: 7px; border: 1px solid #7d86b8; border-radius: 8px; color: var(--ink); background: white; }
.drawing-tools label { margin-left: auto; font-size: 12px; }
.drawing-tools [aria-pressed="true"], #drawGuide[aria-pressed="true"] { background: var(--pencil); box-shadow: inset 0 0 0 1px var(--ink), 0 2px 0 var(--ink); }
.drawing-history { justify-content: center; }
#drawStrokeCount { margin-left: auto; font-size: 11px; white-space: nowrap; color: var(--muted); }
.drawing-traits { display: grid; gap: 3px; padding: 10px 12px; border-left: 4px solid var(--pencil); background: #f8c64f18; font-size: 12px; }
.drawing-traits strong { font-size: 14px; }
.drawing-traits small { font-size: 11px; color: var(--muted); }
.drawing { display: block; width: min(100%, 36dvh); height: auto; aspect-ratio: 1; margin: auto; border: 2px solid #7d86b8; border-radius: 4px; background: white; touch-action: none; }
.palette { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.swatch { width: 44px; height: 44px; padding: 0; border-radius: 50%; box-shadow: none; }
.swatch[aria-pressed="true"] { outline: 3px solid #c8423a; outline-offset: 3px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row .grow { flex: 1; }
.cost { min-height: 20px; font-size: 12px; color: var(--muted); }
.inventory { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.inventory > div { padding: 12px; background: #9ec78320; border: 1px solid var(--line); border-radius: 8px; }
.inventory b { display: block; font-size: 26px; }
.recipes { display: grid; gap: 8px; margin: 15px 0; }
.recipes button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font-size: 13px; }
.approval { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 15px 0; font-size: 14px; }
.approval input { width: 22px; height: 22px; accent-color: var(--ink); }
#friendsMount:empty { display: none; }
#menuStatus { min-height: 20px; }
.save-tag { font-size: 11px; color: var(--muted); }
.crew-list { font-size: 14px; margin: 12px 0; line-height: 1.7; }
.challenge-settings { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-block: 1px dashed var(--line); margin: 12px 0; }
.challenge-settings label { font-weight: 700; font-size: 14px; }
.challenge-settings select { min-height: 44px; min-width: 120px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 9px; background: var(--paper); color: var(--ink); }
.challenge-settings select:disabled { opacity: .7; }
.challenge-settings p { grid-column: 1 / -1; margin: 0; }
#menuNotice:empty { display: none; }
.tutorial { font-size: 12px; line-height: 1.5; margin: 14px 0; padding: 12px 0; border-top: 1px dashed var(--line); }
@media (max-width: 1000px) {
  #modeLabel { display: none; }
}
@media (max-width: 720px) {
  header { left: 10px; right: 10px; top: max(8px, env(safe-area-inset-top)); align-items: flex-start; gap: 6px; }
  .brand { gap: 0; padding: 1px 9px 1px 0; }
  .brand strong { font-size: 19px; }
  .brand a { width: 30px; }
  .world-info { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 7px; padding: 4px 6px; font-size: 10px; }
  .world-info button { grid-column: 1 / -1; min-height: 44px; padding: 4px 8px; font-size: 11px; }
  .hud { left: 12px; top: 74px; width: 194px; padding: 10px 12px; }
  .quest-label { font-size: 10px; }
  .hud h2 { font-size: 18px; margin: 3px 0 6px; }
  .hud p { font-size: 11px; margin: 5px 0; }
  .hud .danger-status { padding: 3px 0 3px 7px; border-left: 3px solid var(--coral); color: #8c3f2f; font-size: 11px; font-weight: 700; }
.hud .trail { font-size: 9px; }
  .hud .crew { margin-top: 6px; padding-top: 6px; }
  .keys { bottom: 246px; width: calc(100% - 32px); max-width: 390px; }
  #actionHint { font-size: 12px; }
  #actionFeedback { font-size: 12px; }
  #controlsHelp { font-size: 10px; }
  .notice { bottom: 327px; width: max-content; max-width: calc(100vw - 32px); }
  .overlay { padding: 12px; }
  .sheet { max-height: calc(100dvh - 24px); padding: 18px; }
  .sheet h1 { font-size: 43px; }
  .sheet h2 { font-size: 28px; }
  .sheet p { margin: 9px 0; }
  .launch { margin-left: 0; }
  .launch-pencil { width: 45px; height: 45px; }
  .launch-pencil svg { width: 28px; height: 28px; }
  .launch .lead { font-size: 15px; }
  .modes { gap: 9px; margin: 17px 0 12px; }
  .modes button { padding: 11px; }
  .modes strong { font-size: 21px; }
  .draw-settings { flex-wrap: wrap; gap: 6px; margin: 10px 0; }
  .draw-settings label { font-size: 12px; }
  .draw-settings button { padding: 8px 10px; }
  .drawing { width: min(100%, 29dvh); }
  .drawing-tools, .drawing-history { gap: 5px; }
  .drawing-tools button, .drawing-history button { padding: 7px 8px; }
  .drawing-tools label { font-size: 11px; }
  #drawStrokeCount { font-size: 10px; }
  .palette { gap: 7px; margin: 12px 0; }
}
@media (max-height: 500px) and (min-width: 721px) {
  header { top: 8px; }
  .brand strong { font-size: 21px; }
  .hud { top: 70px; width: 205px; padding: 8px 12px; }
  .hud h2 { font-size: 17px; margin: 3px 0; }
  .hud p { font-size: 10px; margin: 4px 0; }

  .quest-label { font-size: 9px; }
  .keys { bottom: 105px; width: 365px; }
  #controlsHelp { font-size: 10px; }
  .notice { bottom: 195px; }
  .sheet { max-height: calc(100dvh - 24px); }
  .drawing { width: min(100%, 48dvh); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  button:active { transform: none; }
}

.field-guide-button { pointer-events: auto; width: 100%; margin-top: 5px; min-height: 44px; padding: 5px 8px; font-size: 12px; background: #f8c64f38; box-shadow: none; border-width: 1px; }
.hud .region-status { color: #3d4a85; font-size: 10px; font-weight: 700; }
.field-guide { margin-top: 24px; border-top: 1px dashed var(--line); }
.field-map { display: block; width: 165px; margin: 12px auto; }
.field-challenges { list-style: none; padding: 0; display: grid; gap: 9px; }
.field-challenges li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf6; }
.field-challenges strong, .field-challenges span { display: block; }
.field-challenges strong { font-size: 13px; }
.field-challenges span { margin-top: 3px; font-size: 12px; color: var(--muted); }
.field-challenges .stamped { background: #9ec78335; border-color: #73966a; }
@media (max-width:720px) { .hud { width:190px; padding:8px 11px 3px; } .hud h2 { font-size:16px; line-height:1.2; margin:2px 0 4px; } .hud .danger-status { font-size:10px; line-height:1.35; margin:4px 0; } .quest-label { font-size:9px; } .quest-details summary { font-size:11px; } .field-guide-button { font-size:11px; } }
@media (max-height:500px) { .hud { width:190px; padding-bottom:3px; } .quest-details-content { max-height:90px; } }

#mcw-audio-bar { z-index: 6 !important; top: max(76px, calc(env(safe-area-inset-top) + 76px)) !important; right: 16px !important; }
#mcw-audio-bar button { width:44px !important; height:44px !important; }
@media (max-width:720px) { #mcw-audio-bar {top: max(91px, calc(env(safe-area-inset-top) + 91px)) !important;right:12px !important;} }

/* Keep the island clear; details and longer guidance live behind deliberate taps. */
header { top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); gap: 6px; }
.brand { padding: 0 10px 0 0; gap: 2px; border-width: 1px; }
.brand strong { font-size: 18px; }
.brand a { width: 32px; }
.world-info { display: flex; gap: 7px; padding: 0 3px 0 8px; font-size: 11px; }
.world-info button { padding: 6px 10px; box-shadow: none; border-width: 1px; }
#modeLabel, #pencilLabel { display: none; }
.hud { top: max(60px, calc(env(safe-area-inset-top) + 54px)); left: max(10px, env(safe-area-inset-left)); width: min(280px, calc(100vw - 20px)); padding: 0 10px; border-radius: 12px; background: #fbf6eadf; box-shadow: none; }
.quest-details { margin: 0; }
.quest-details summary { font-size: 12px; padding: 6px 0; }
.quest-details-content { max-height: min(36dvh, 260px); }
.hud .danger-status { margin: 0 0 7px; }
.aim-cross::after { top: 31px; width: 44px; }
.keys { bottom: max(232px, calc(env(safe-area-inset-bottom) + 228px)); width: calc(100% - 30px); max-width: 380px; }
#actionFeedback { padding: 5px 9px; border-radius: 8px; background: #fbf6eae8; font-size: 12px; }
.notice { bottom: max(265px, calc(env(safe-area-inset-bottom) + 261px)); font-size: 12px; }
#worldCanvas, .toolbar, .aim-controls { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tutorial summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
#mcw-audio-bar { position: static !important; margin: 12px 0 !important; }
@media (min-width: 721px) {
  .keys { bottom: 85px; }
  .notice { bottom: 135px; }
}
@media (max-width: 370px) {
  .brand strong { font-size: 16px; }
  .world-info { font-size: 10px; gap: 5px; }
}
@media (max-height: 500px) {
  .hud { width: 230px; }
  .quest-details-content { max-height: 28dvh; }
  .notice { bottom: 140px; }
}

.keys { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.touch { position: fixed; z-index: 1; left: 0; bottom: 0; width: 55%; height: 58%; touch-action: none; user-select: none; -webkit-user-select: none; }
.move-stick { position: fixed; z-index: 5; width: 118px; height: 118px; margin: -59px; border: 3px dashed #283a8c8c; border-radius: 50%; background: #fbf6ea59; pointer-events: none; }
.move-stick i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border: 3px solid var(--ink); border-radius: 50%; background: #fbf6eaee; }
.toolbar { position: fixed; z-index: 3; right: max(12px, env(safe-area-inset-right)); bottom: max(108px, calc(env(safe-area-inset-bottom) + 100px)); display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
.tool { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 50px; padding: 4px 1px; gap: 1px; font-size: 9px; border-width: 1px; border-radius: 12px; box-shadow: 0 2px 0 var(--ink); background: #fbf6eaeb; }
.tool svg { width: 21px; height: 21px; }
.tool kbd { display: none; }
.build-tool { background: var(--pencil); }
.attack-button { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 82px; height: 82px; padding: 6px; border-radius: 50%; background: var(--coral); touch-action: none; user-select: none; }
.attack-button svg { width: 28px; height: 28px; }
.attack-button span { font-size: 15px; }
.aim-controls { position: fixed; z-index: 3; right: max(112px, calc(env(safe-area-inset-right) + 100px)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 2px; width: 68px; }
.aim-controls > span { font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px var(--paper); }
#aimPad { position: relative; width: 68px; height: 68px; padding: 0; border-radius: 50%; background: #fbf6eadf; touch-action: none; user-select: none; box-shadow: 0 3px 0 var(--ink); }
#aimPad:active { transform: none; }
.aim-cross::before, .aim-cross::after { content: ''; position: absolute; background: #283a8c30; }
.aim-cross::before { left: 31px; top: 10px; width: 2px; height: 44px; }
.aim-cross::after { left: 10px; top: 31px; width: 44px; height: 2px; }
.aim-stick { position: absolute; top: 21px; left: 21px; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--coral); pointer-events: none; }

#stampCount { flex-shrink: 0; margin-left: auto; padding: 2px 6px; border-radius: 7px; background: #f8c64f55; font-size: 11px; font-variant-numeric: tabular-nums; }
#nibMoment { margin: 0 0 8px; padding: 6px 0 2px; border-top: 1px dashed var(--line); color: #3d4a85; font-size: 11px; line-height: 1.35; animation: nib-stamp .35s ease-out; }
@keyframes nib-stamp { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #nibMoment { animation: none; } }

#packOverlay .close { position: sticky; top: 0; z-index: 2; background: var(--paper); border-radius: 50%; }

/* Nearby creations expose their real actions without adding a quest. */
.creation-tools{pointer-events:auto;display:flex;gap:6px;align-items:center;margin-top:7px;max-width:320px}
.creation-tools select{min-width:0;flex:1;min-height:44px;border:1px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);padding:6px;font-size:12px}
.creation-tools button{font-size:12px;padding:6px 10px;white-space:nowrap}
#buildPurpose{padding:8px 10px;border-left:3px solid var(--pencil);background:#f8f3d9;margin:8px 0}
#buildPurpose:empty{display:none}
@media(max-height:500px){.creation-tools{max-width:240px;margin-top:4px}.creation-tools select,.creation-tools button{min-height:36px}}

/* pen-doodle chrome: inked sheets that spring in, hand-lettered headings */
.hand { font-family: Caveat, "Chalkboard SE", "Comic Sans MS", cursive; letter-spacing: 0; }
.sheet h1.hand { letter-spacing: -.5px; }
.sheet { border-width: 2px; border-radius: 14px 26px 12px 22px / 22px 12px 26px 14px; box-shadow: 4px 5px 0 #283a8c2e, 0 0 0 1px #283a8c22 inset; background-image: repeating-linear-gradient(transparent 0 27px, #5b78c214 27px 28px); }
.overlay:not([hidden]) { animation: ink-fade .28s ease-out; }
.overlay:not([hidden]) > .sheet { animation: ink-sheet .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes ink-fade { from { background-color: transparent; } }
@keyframes ink-sheet { from { opacity: 0; transform: translateY(22px) rotate(-1.4deg) scale(.94); } to { opacity: 1; transform: none; } }
.brand, .world-info, .hud { box-shadow: 2px 3px 0 #283a8c1f; }
.brand, .world-info { border-radius: 12px 18px 10px 16px / 16px 10px 18px 12px; }
.attack-button { color: var(--ink); border-width: 2px; }
.notice { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px 20px 12px 18px; box-shadow: 3px 4px 0 #283a8c2a; }
.notice:not(:empty) { animation: ink-note .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes ink-note { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.92); } to { opacity: 1; transform: translateX(-50%); } }
.overlay { background: #283a8c33; }
.swatch { border: 2px solid var(--ink); }
@media (prefers-reduced-motion: reduce) { .overlay:not([hidden]), .overlay:not([hidden]) > .sheet, .notice:not(:empty) { animation: none; } }
html.mcw-ink .swatch { border-radius: 50%; }
/* the island already bakes its own paper grain; skip the full-screen multiply overlay above a canvas that repaints every frame */
#mcw-paper { display: none; }
.brand{position:relative;min-height:44px}.brand a::after{content:"";position:absolute;inset:-2px;border-radius:inherit}.brand:hover{background:#fff1bd}.brand:has(a:focus-visible){outline:3px solid #006dce;outline-offset:2px}
#friendsMount .mcwf{--ink:#283a8c;--paper:#fbf6ea;--teal:#2e7d5b;background:#fbf6ea;color:#283a8c;border:2px solid #283a8c;border-radius:18px 7px 16px 9px/9px 16px 7px 18px;box-shadow:3px 4px 0 rgba(40,58,140,.22)}
#friendsMount .mcwf-hd b{font-family:Caveat,"Comic Sans MS",cursive;font-size:25px;color:#283a8c}
#friendsMount .mcwf-empty,#friendsMount .mcwf-row b,#friendsMount .mcwf-row small,#friendsMount .mcwf-approval{color:#283a8c}
#friendsMount .mcwf-row{background:#fffdf6;border:1.5px solid rgba(40,58,140,.35)}
#friendsMount .mcwf-chip{background:#fff1bd;color:#283a8c;border:1.5px solid #283a8c}
#friendsMount .mcwf-btn{background:#fbf6ea;color:#283a8c;border:2px solid #283a8c;border-radius:12px 5px 10px 6px;box-shadow:2px 3px 0 rgba(40,58,140,.3);text-shadow:none}
#friendsMount .mcwf-btn.teal{background:#fff1bd}
#friendsMount .mcwf-btn:active{box-shadow:0 0 0 transparent}
#friendsMount .mcwf-approval input{accent-color:#283a8c}
/* 180ms exit: hidden keeps display for the fade via allow-discrete (no JS change) */
.overlay { transition: opacity .18s ease-in, display .18s allow-discrete; }
.overlay[hidden] { opacity: 0; }
.overlay > .sheet { transition: transform .18s ease-in; }
.overlay[hidden] > .sheet { transform: scale(.95) translateY(10px); }
@media (prefers-reduced-motion: reduce) { .overlay, .overlay > .sheet { transition: none; } }
#worldCanvas:focus-visible{outline:3px solid #c8423a8c;outline-offset:-3px}

/* ---- round 3: legibility, glyph icons, landscape sheets ---- */
kbd { font-size: 11px; }
.gl { display: inline-grid; place-items: center; line-height: 0; }
.gl img { display: block; }
.brand a { width: 44px; min-width: 44px; font: inherit; }
.sheet .close { display: grid; place-items: center; min-height: 44px; font-size: 0; }
.inf { display: inline-block; vertical-align: -1px; margin-left: 1px; }
.hud .trail, .hud .crew, .hud .region-status, #controlsHelp, #drawStrokeCount, .quest-label { font-size: 11px; }
.hud .region-status { color: #2f3b78; }
.tool { font-size: 11px; letter-spacing: 0; }
.toolbar { grid-template-columns: repeat(3, 58px); }
.world-info { font-size: 12px; }
@media (max-width:720px) {
  .world-info { font-size: 11px; }
  .hud .trail { font-size: 11px; }
  #controlsHelp { font-size: 11px; }
  #drawStrokeCount { font-size: 11px; }
  .quest-label { font-size: 11px; }
  .hud .danger-status { font-size: 11px; }
}
@media (max-height:500px) and (min-width:721px) {
  .hud p, .quest-label, #controlsHelp { font-size: 11px; }
}
button:disabled { color: #4a5585; }
#shareWorld:disabled { opacity: 1; background: #ece4d0; border-style: dashed; color: #3d4a85; }
.sheet .close, .brand a { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.sheet .close:hover, .brand a:hover { transform: rotate(-8deg) scale(1.1); }
@media (hover:hover) { .tool:hover { transform: translateY(-2px) rotate(-1.5deg); } .modes button:hover { transform: translateY(-3px) rotate(-.6deg); } }
.tool, .modes button { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.tool:active, .modes button:active, .sheet .close:active { transform: scale(.94); }

/* landscape phones: launcher fits, draw sheet is canvas + tools side by side with a sticky footer */
@media (max-height:500px) {
  .overlay { padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .sheet { max-height: calc(100dvh - 16px); padding: 12px 16px; }
  .launch { margin-left: 0; max-width: 760px; position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center; }
  .launch > .launch-pencil { display: none; }
  .launch > h1 { grid-column: 1; font-size: 32px; letter-spacing: -.5px; margin: 0; }
  .launch > .lead { grid-column: 1; font-size: 13px; margin: 4px 0 0; }
  .launch > .modes { grid-column: 2; grid-row: 1 / span 3; margin: 0; grid-template-columns: 1fr; gap: 8px; }
  .launch > :not(h1):not(.lead):not(.modes):not(.launch-pencil) { grid-column: 1 / -1; }
  .modes button { padding: 8px 12px; }
  .modes strong { font-size: 20px; margin-bottom: 2px; }
  .modes small { font-size: 12px; line-height: 1.3; }
  .launch .tiny, .quiet { font-size: 11px; margin: 4px 0; }

  .drawing-sheet { position: relative; max-width: 780px; width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 14px; align-content: start; padding: 10px 14px 0; }
  .drawing-sheet > * { grid-column: 2; min-width: 0; }
  .drawing-sheet > canvas.drawing { grid-column: 1; grid-row: 1 / span 14; position: sticky; top: 0; align-self: start; margin: 0; width: calc(100dvh - 64px); height: calc(100dvh - 64px); max-width: 52vw; max-height: 52vw; }
  .drawing-sheet > .close { position: absolute; top: 2px; right: 6px; float: none; z-index: 2; }
  .drawing-sheet h2 { font-size: 24px; margin: 0; padding-right: 48px; }
  .drawing-sheet #drawDescription, .drawing-sheet #drawTraitHelp, .drawing-sheet #buildPurpose:empty { display: none; }
  .drawing-sheet p { margin: 3px 0; font-size: 12px; }
  .drawing-sheet .draw-settings, .drawing-sheet .drawing-tools, .drawing-sheet .drawing-history { margin: 4px 0; gap: 5px; flex-wrap: wrap; }
  .drawing-sheet button, .drawing-sheet select { min-height: 36px; }
  .drawing-sheet .palette { margin: 6px 0; gap: 6px; flex-wrap: wrap; }
  .drawing-sheet .drawing-traits { margin: 4px 0; padding: 6px 8px; font-size: 12px; }
  .drawing-sheet > .row { position: sticky; bottom: 0; z-index: 3; background: var(--paper); padding: 8px 0 10px; margin: 0; border-top: 1px dashed var(--line); }
  .drawing-sheet > .row .primary { min-height: 44px; }
}
@media (max-width:720px) and (min-height:501px) {
  .drawing-sheet > .row { position: sticky; bottom: -18px; z-index: 3; background: var(--paper); margin: 0 -4px -18px; padding: 8px 4px 14px; border-top: 1px dashed var(--line); }
}

/* ---- cozy redesign: wayfinding coach, contextual tools, calm Creative ---- */
.idea-tag { flex-shrink: 0; padding: 1px 6px; border: 1.5px solid var(--ink); border-radius: 9px 4px 8px 5px; background: #fff1bd; font-size: 11px; font-weight: 800; transform: rotate(-3deg); }
.quest-details summary #worldGoal { flex: 1; min-width: 0; }
.coach { position: relative; margin: 0 0 8px; padding: 6px 4px 2px 24px; border-top: 1px dashed var(--line); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; }
.coach::before { content: ''; position: absolute; left: 4px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: #f4bf52; border: 2px solid var(--ink); }
.coach.pop { animation: ink-note-left .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ink-note-left { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.hud:has(details[open]) .coach { display: none; }
#nibMoment:not([hidden]) ~ .coach { display: none; }
.undo-build { position: fixed; z-index: 6; left: 50%; bottom: max(250px, calc(env(safe-area-inset-bottom) + 246px)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 14px 4px 8px; font-size: 14px; background: #fff1bd; border-width: 2px; border-radius: 14px 18px 12px 20px; box-shadow: 2px 3px 0 var(--ink); }
.undo-build.pop { animation: ink-note .42s cubic-bezier(.34,1.56,.64,1); }
.undo-build:active { transform: translateX(-50%) translateY(2px); }
.notice { bottom: max(312px, calc(env(safe-area-inset-bottom) + 308px)); }
@media (min-width: 721px) { .undo-build { bottom: 150px; } .notice { bottom: 205px; } }
@media (max-height: 500px) { .undo-build { bottom: 90px; left: 40%; } .notice { bottom: 145px; left: 40%; } }
/* contextual tools: lit when there is something to do, quiet otherwise (still tappable for a gentle hint) */
.toolbar .tool[data-tool="gather"], .toolbar .tool[data-tool="ride"] { opacity: .62; }
.toolbar .tool.ready { opacity: 1; background: #fff1bd; box-shadow: 0 2px 0 var(--ink), 0 0 0 3px #f4bf5266; animation: ready-nudge 1.8s ease-in-out infinite; }
@keyframes ready-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(-1.5deg); } }
/* Creative is calm: no aim pad, no life meter; a small Swing button just for fun */
.is-creative #aimControls, .is-creative #healthStatus { display: none; }
.is-creative .attack-button { width: 60px; height: 60px; background: #fbf6ea; border-width: 1.5px; }
.is-creative .attack-button svg { width: 22px; height: 22px; }
.is-creative .attack-button span { font-size: 12px; }
.is-creative .toolbar { bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)); }
/* nearby creation actions float as a chip instead of hiding in the quest card */
.creation-tools { position: fixed; z-index: 4; left: max(10px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; max-width: calc(100vw - 120px); padding: 6px; background: #fbf6eaf2; border: 2px solid var(--ink); border-radius: 16px 8px 14px 10px; box-shadow: 2px 3px 0 #283a8c33; }
.creation-tools select.single { display: none; }
.creation-tools.nudge { animation: ink-note-left .45s cubic-bezier(.34,1.56,.64,1); }
.creation-tools .put-away { background: transparent; box-shadow: none; border-style: dashed; }
.is-creative .creation-tools { max-width: calc(100vw - 96px); }
@media (min-width: 721px) { .creation-tools { left: 50%; transform: translateX(-50%); bottom: 24px; } .creation-tools.nudge { animation: none; } }
/* scrapbook ticks drawn in pen, not font symbols */
.field-challenges strong { position: relative; padding-left: 24px; }
.field-challenges strong::before { content: ''; position: absolute; left: 0; top: 1px; width: 15px; height: 15px; border: 2px solid var(--ink); border-radius: 50% 45% 52% 48%; background: #fffdf6; }
.field-challenges .stamped strong::after { content: ''; position: absolute; left: 4px; top: 2px; width: 6px; height: 11px; border: solid #2e7d5b; border-width: 0 3px 3px 0; transform: rotate(40deg); }
/* drawing sheet on phones: bigger paper, less reading */
@media (max-width: 720px) and (min-height: 501px) {
  .drawing-sheet #drawDescription, .drawing-sheet #drawTraitHelp, .drawing-sheet .row .grow { display: none; }
  .drawing-sheet h2 { font-size: 30px; padding-right: 44px; }
  .drawing-sheet .draw-settings { margin: 6px 0; }
  .drawing { width: min(100%, 40dvh); }
  .drawing-sheet .palette { gap: 6px; margin: 8px 0; }
  .drawing-sheet #buildPurpose { font-size: 12px; margin: 4px 0; padding: 6px 8px; }
  .drawing-sheet > .row { justify-content: flex-end; }
  .drawing-sheet > .row .primary { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .coach.pop, .undo-build.pop, .toolbar .tool.ready, .creation-tools.nudge { animation: none; } }

.is-creative #drawCost { display: none; }
.sheet .close img { filter: none; }
/* critic round 1: readable quiet tools, pen map, 44px landscape sheet controls, calm Creative */
.toolbar .tool[data-tool="gather"], .toolbar .tool[data-tool="ride"] { opacity: 1; color: #3a4a8f; background: #f1ecdd; border-style: dashed; box-shadow: none; }
.toolbar .tool.ready, .toolbar .tool[data-tool="weapon"].ready { color: var(--ink); background: #fff1bd; border-style: solid; box-shadow: 0 2px 0 var(--ink), 0 0 0 3px #f4bf5266; animation: ready-nudge 1.8s ease-in-out infinite; }
.field-map { width: min(260px, 100%); }
.is-creative .meter { display: none; }
@media (max-height: 500px) { .drawing-sheet button, .drawing-sheet select { min-height: 44px; } }

/* full-resolution text layer used only after a slow phone drops the world canvas to 1x */
.world-crisp { position: fixed; left: 0; top: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 1; }
.world-crisp[hidden] { display: none; }
/* the backpack title is a sticky paper band, so scrolled buttons pass under it instead of peeking out around the close button */
#packOverlay .sheet { padding-top: 0; }
#packOverlay .sheet > .close { top: 10px; margin-top: 10px; }
#packOverlay .sheet > h2.hand { position: sticky; top: 0; z-index: 1; min-height: 44px; margin-top: 0; padding: 18px 0 6px; background: var(--paper); box-shadow: 0 6px 6px -6px #283a8c33; }