/* adventure.css — the interactive "adventure" task workspaces.
 *
 * Load this LAST, after style.css, workspace.css, town.css and task-v3.css:
 *
 *   <link rel="stylesheet" href="/adventure.css">
 *
 * It only ever touches `.board-adventure` and the `.adventure-*` classes, so
 * the meal controls, the town map and the page shell are left exactly as the
 * older sheets left them.
 *
 * ---------------------------------------------------------------------------
 * The board
 * ---------------------------------------------------------------------------
 * The stage is the existing `.task-board` (height clamp(320px,53dvh,560px)),
 * so nothing here changes how tall the modal is. workspace.css already gives
 * every direct child `position:absolute` + `transform:translate(-50%,-50%)`,
 * which means the engine positions things by writing `left`/`top` percentages
 * inline and the element is centred on that point.
 *
 * A few pieces of chrome are re-anchored here so the vertical budget is
 * predictable no matter how much text arrives:
 *
 *   .adventure-stage     flush to the top edge          0 .. ~26px
 *   .adventure-title     top 8%, anchored by its TOP    grows downward
 *   .adventure-order     top 8%, anchored by its TOP    grows downward
 *   .adventure-target    top 40%, centred, max-height 35%
 *   .adventure-result    top 62%, centred
 *   .adventure-piece     top 78%, centred, grows from min-height 80px
 *   .adventure-progress  pinned to the bottom edge
 *
 * Horizontal slots the engine uses, and the widths that keep them apart:
 *
 *   targets   x 25 / 50 / 75   (or a single x 50)   width <= 23%
 *   sources   x 17 / 39 / 61 / 83                    width <= 21%
 *   choices   x 25 / 75, y 68 / 87                   width 42%
 *
 * Every one of those stays inside 0-100% at its widest, so a phone never
 * scrolls sideways. Labels wrap instead of shrinking the task down.
 * ------------------------------------------------------------------------- */

/* ------------------------------------------------------------ theme tokens */
/* `data-theme` may sit on the board or on the backdrop — custom properties
   inherit either way, so both spellings work and nest safely. */
.board-adventure,
.adventure-backdrop{
  --adv-air:#f2f1e7;
  --adv-floor:#ddd8c4;
  --adv-line:#c3bda5;
  --adv-accent:#7f9a78;
  --adv-ink:#354b3f;
}
[data-theme=farm]     {--adv-air:#eef3e2;--adv-floor:#e2d3ab;--adv-line:#c7b183;--adv-accent:#8a9e6b}
[data-theme=barn]     {--adv-air:#f4e8e1;--adv-floor:#dcc6a8;--adv-line:#bfa079;--adv-accent:#b9705a}
[data-theme=garden]   {--adv-air:#ecf3e6;--adv-floor:#d9d0a6;--adv-line:#bdb383;--adv-accent:#7f9a78}
[data-theme=lake]     {--adv-air:#e6f1f2;--adv-floor:#cfe1e0;--adv-line:#a9c7cb;--adv-accent:#6f9aa4}
[data-theme=restaurant]{--adv-air:#f6ece0;--adv-floor:#e3c9a8;--adv-line:#c6a87f;--adv-accent:#c9765a}
[data-theme=barber]   {--adv-air:#f3f0ea;--adv-floor:#ddc9ab;--adv-line:#c0a887;--adv-accent:#c9765a}
[data-theme=petstore] {--adv-air:#eef2e8;--adv-floor:#dfe0cf;--adv-line:#c2c5ae;--adv-accent:#77907a}
[data-theme=vet]      {--adv-air:#eef3ee;--adv-floor:#dbe2d6;--adv-line:#bac6b6;--adv-accent:#77907a}
[data-theme=neighbors]{--adv-air:#f3f0e6;--adv-floor:#ddd3b8;--adv-line:#c0b493;--adv-accent:#93a88f}
[data-theme=hospital] {--adv-air:#eef2f3;--adv-floor:#dde3e3;--adv-line:#bcc7c7;--adv-accent:#8aa6a8}
[data-theme=police]   {--adv-air:#edf0f2;--adv-floor:#d6dbdd;--adv-line:#b3bcc2;--adv-accent:#6b7b86}
[data-theme=fire]     {--adv-air:#f7ebe5;--adv-floor:#e0c8bd;--adv-line:#c09c8e;--adv-accent:#b5604a}
[data-theme=metro]    {--adv-air:#eef0f1;--adv-floor:#d3d8da;--adv-line:#aeb6ba;--adv-accent:#7f8f9a}

/* ---------------------------------------------------------------- the board */
.board-adventure.task-board{
  background:var(--adv-air);
  box-shadow:inset 0 2px 12px #354b3f14;
}
/* The floor. Drawn as a pseudo-element so it works whether or not the engine
   renders an `.adventure-backdrop`, and so it never becomes a drop target. */
.board-adventure.task-board::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;z-index:0;pointer-events:none;
  background-color:var(--adv-floor);
  background-image:linear-gradient(#ffffff3d,#0000000f);
  border-top:3px solid var(--adv-line);
}

/* Optional scenery layer: a soft horizon glow and a gentle vignette.
   These few rules are scoped to `.board-adventure` so they outrank the
   `.task-board>*{position:absolute;transform:translate(-50%,-50%)}` default
   on specificity rather than on load order alone. */
.board-adventure .adventure-backdrop{
  inset:0;width:100%;height:100%;transform:none;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(120% 70% at 50% 62%,#ffffff5c 0 38%,#ffffff00 72%),
    radial-gradient(100% 80% at 50% 46%,#ffffff00 56%,#8a7b5626 100%);
}

/* The big, faint place icon the scene is set in. */
.board-adventure .adventure-scene{
  left:50%;top:35%;z-index:0;pointer-events:none;user-select:none;
  font-size:clamp(104px,20vw,210px);line-height:1;opacity:.15;
  filter:saturate(.8);
}

/* The route the character walks, plus the stops along it. */
.board-adventure .adventure-path{
  inset:0;width:100%;height:100%;transform:none;z-index:0;pointer-events:none;overflow:visible;
}
.adventure-path path{
  fill:none;stroke:#fffdf5;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
}
.adventure-path path.adventure-path-dash,
.adventure-path path[stroke-dasharray]{
  stroke:var(--adv-accent);stroke-width:3.5;stroke-dasharray:12 15;opacity:.7;
}
.adventure-checkpoint{
  fill:#fffdf5;stroke:var(--adv-accent);stroke-width:4;
  transition:fill .25s,stroke-width .25s;
}
.adventure-checkpoint.done,
.adventure-checkpoint[data-done]{fill:var(--adv-accent);stroke-width:5}
.adventure-checkpoint.current{stroke-width:6;filter:drop-shadow(0 0 6px #ffffffcc)}

/* --------------------------------------------------------- narrative header */
/* Tiny chips that say which leg of the adventure we are on. */
.board-adventure .adventure-stage{
  left:50%;top:0;transform:translate(-50%,0);z-index:4;
  display:flex;align-items:center;gap:6px;
  padding:6px 14px 7px;border-radius:0 0 14px 14px;
  background:#fffdf5e8;border:1px solid var(--adv-line);border-top:0;
  box-shadow:0 2px 6px #354b3f14;
  font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#8a9280;white-space:nowrap;max-width:88%;overflow:hidden;
}
.adventure-stage span,
.adventure-stage .stage-chip{
  width:11px;height:11px;border-radius:50%;background:#dde1d3;flex:0 0 auto;
  transition:background .2s,transform .2s;
}
.adventure-stage span.done,.adventure-stage .stage-chip.done{background:var(--adv-accent)}
.adventure-stage span.current,.adventure-stage .stage-chip.current{
  background:#b5a2c6;transform:scale(1.25);box-shadow:0 0 0 3px #b5a2c633;
}

/* The story sentence. Anchored by its top edge so extra lines grow downward
   into the empty band above the targets, never up over the chips. Its height
   is deliberately uncapped — a silently truncated sentence would be worse
   than one that crowds the targets, and the band from 8% down to the target
   row holds roughly four lines at every supported size. */
.board-adventure .adventure-title{
  left:50%;top:8%;transform:translate(-50%,0);z-index:4;
  width:90%;max-width:760px;
  text-align:center;text-wrap:balance;
  font:500 clamp(18px,2.1vw,23px)/1.4 var(--serif,Georgia,serif);
  color:var(--adv-ink);
}
.adventure-title em,.adventure-title strong{font-style:italic;font-weight:500;color:#7c6a94}

/* The order card — same slot as the title, for "fetch these three things". */
.board-adventure .adventure-order{
  left:50%;top:8%;transform:translate(-50%,0);z-index:4;
  width:min(90%,520px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  padding:10px 16px;border-radius:16px;
  background:#fffdf5f2;border:1px solid var(--adv-line);
  box-shadow:0 3px 0 #0000000d;
  font-size:clamp(15px,1.7vw,18px);line-height:1.35;color:var(--adv-ink);
  text-align:center;
}
.adventure-order strong{font-weight:700}
.adventure-order li,.adventure-order .order-line{
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;background:#f1f1e5;
  font-size:clamp(14px,1.6vw,17px);font-weight:600;
}
.adventure-order li>span:first-child{font-size:1.25em;line-height:1}
.adventure-order li.done,.adventure-order .order-line.done{
  background:#e8efdf;color:#547b58;text-decoration:line-through;text-decoration-color:#9dac87;
}

/* ------------------------------------------------------------ the character */
.board-adventure .adventure-character{
  left:50%;top:52%;z-index:2;pointer-events:none;user-select:none;
  font-size:clamp(46px,7vw,76px);line-height:1;
  filter:drop-shadow(0 6px 5px #354b3f2e);
  transition:left .45s ease,top .45s ease;
}
.adventure-character.walking{animation:adv-bob .7s ease-in-out infinite}
@keyframes adv-bob{50%{transform:translate(-50%,-56%)}}

/* ---------------------------------------------------------------- feedback */
.board-adventure .adventure-result{
  left:50%;top:62%;z-index:5;
  max-width:84%;padding:9px 20px;border-radius:999px;
  background:#fffdf5f2;border:1px solid var(--adv-line);
  box-shadow:0 3px 0 #0000000f;
  font-size:clamp(14px,1.6vw,17px);font-weight:700;line-height:1.3;
  color:#8a6a3e;text-align:center;text-wrap:balance;
  opacity:0;transition:opacity .2s,transform .2s;
}
.adventure-result:not(:empty){opacity:1}
.adventure-result.good{background:#e8efdff2;border-color:#cfdcc4;color:#41654b}
.adventure-result.retry{background:#f7e6d8f2;border-color:#ecd9c4;color:#a2673f}

/* --------------------------------------------------------------- work spots */
.board-adventure .adventure-mark{
  z-index:2;width:clamp(26px,4.4%,38px);aspect-ratio:1;
  border-radius:48% 58% 42% 52%;
  background:var(--adv-line);
  box-shadow:5px 4px 0 -2px #00000018;
  transition:opacity .35s,transform .35s;
}
.adventure-mark:nth-of-type(2n){border-radius:56% 44% 60% 40%;background:#00000014}
.adventure-mark.done{opacity:0;transform:translate(-50%,-50%) scale(.4)}

/* ---------------------------------------------------------------- targets  */
/* Reuses the engine's `.drop-zone`; this only sizes and calms it. */
.board-adventure .drop-zone.adventure-target{
  z-index:1;width:clamp(78px,23%,190px);min-height:clamp(78px,17%,116px);max-height:35%;
  gap:5px;padding:9px 8px;border-radius:18px;border-width:3px;
  background:#fffdf7d9;border-color:var(--adv-line);
}
/* The single-target layout at x50 can afford to be much wider. */
.board-adventure .drop-zone.adventure-target.is-solo{width:clamp(150px,46%,360px)}
.board-adventure .adventure-target .zone-icon{
  font-size:clamp(26px,3.4vw,40px);line-height:1;opacity:.9;
}
.board-adventure .adventure-target .zone-label{
  font-size:clamp(12px,1.4vw,15px);line-height:1.25;font-weight:700;color:#5d6a58;
  overflow-wrap:anywhere;text-wrap:balance;
}
.board-adventure .adventure-target.active{
  border-color:var(--adv-accent);border-style:solid;background:#fffdf7;
  box-shadow:0 0 0 6px #7f9a7833;
}
.board-adventure .adventure-target.done{
  background:#e8efdfd9;border-color:#cfdcc4;border-style:solid;
}

/* ---------------------------------------------------------------- sources  */
/* ~110x80 on a roomy board; 21% keeps four of them apart at x 17/39/61/83. */
.board-adventure .drag-piece.adventure-piece{
  z-index:3;width:clamp(56px,21%,118px);max-width:21%;min-height:80px;
  padding:9px 8px;gap:4px;border-radius:16px;
  background:#fffdf7;border:2px solid var(--adv-line);
  box-shadow:0 4px 0 #0000001a,0 0 0 3px #fffdf7;
}
.board-adventure .adventure-piece .piece-icon{font-size:clamp(24px,3vw,34px)}
.board-adventure .adventure-piece .piece-label{
  font-size:clamp(11px,1.25vw,14px);line-height:1.3;font-weight:600;
  white-space:normal;text-align:center;overflow-wrap:anywhere;hyphens:auto;
}
.board-adventure .adventure-piece:hover{border-color:var(--adv-accent)}
.board-adventure .adventure-piece.dragging{
  box-shadow:0 14px 28px #2a362d40,0 0 0 3px #fffdf7;border-color:#9b82bd;
}

/* The tool that lives at x12% / y83% and gets carried to the work spots. */
.board-adventure .drag-piece.adventure-tool{
  z-index:3;width:clamp(60px,15%,100px);max-width:18%;min-height:76px;
  border-radius:20px 12px 20px 12px;
  background:#f7eab8;border:2px solid #dcc36e;
  box-shadow:0 4px 0 #d9c37f,0 0 0 3px #fffdf7;
}
.board-adventure .adventure-tool .piece-icon{font-size:clamp(30px,4vw,42px)}
.board-adventure .adventure-tool .piece-label{
  font-size:clamp(11px,1.2vw,13px);font-weight:700;color:#8a6a3e;
}
/* Its dashed home square, if the engine draws one. */
.board-adventure .tool-home.adventure-tool-home{
  z-index:0;width:clamp(68px,17%,112px);height:clamp(80px,19%,120px);
  border:3px dashed var(--adv-line);border-radius:20px;background:#ffffff5c;
}

/* ------------------------------------------------------- dialogue choices  */
/* Up to four at x 25 / 75 and y 68 / 87. 42% wide leaves a 4% outer margin
   and an 8% gutter, so two columns never touch. */
.board-adventure .adventure-choice{
  z-index:4;width:42%;min-height:64px;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;text-align:left;border-radius:16px;
  background:#fffdf7;border:2px solid var(--adv-line);
  box-shadow:0 4px 0 #0000001a;
  font-size:clamp(12px,1.5vw,16px);line-height:1.3;font-weight:600;color:var(--adv-ink);
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.board-adventure .adventure-choice>span:first-child,
.board-adventure .adventure-choice .piece-icon{
  flex:0 0 auto;font-size:clamp(22px,2.6vw,30px);line-height:1;
}
.board-adventure .adventure-choice .piece-label,
.board-adventure .adventure-choice>span:last-child{
  min-width:0;white-space:normal;text-align:left;overflow-wrap:anywhere;hyphens:auto;
}
.board-adventure .adventure-choice:not(:disabled):hover{
  background:#f6f7ef;border-color:var(--adv-accent);
}
.board-adventure .adventure-choice:not(:disabled):active{
  transform:translate(-50%,-50%) translateY(2px);box-shadow:0 2px 0 #0000001a;
}
.board-adventure .adventure-choice.chosen{
  background:#e8efdf;border-color:#9dac87;box-shadow:0 2px 0 #cfdcc4;
}
.board-adventure .adventure-choice.wrong{
  background:#f7e6d8;border-color:#e3bd9a;
}

/* --------------------------------------------------------------- progress  */
.board-adventure .adventure-progress{
  left:50%;top:auto;bottom:6px;transform:translate(-50%,0);z-index:4;
  display:flex;align-items:center;gap:8px;
  width:min(62%,340px);height:10px;
  border-radius:999px;background:#ffffff8f;
  box-shadow:inset 0 0 0 1px var(--adv-line);
  overflow:hidden;
}
.board-adventure .adventure-progress>i,
.board-adventure .adventure-progress .adventure-progress-fill{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#9dac87,var(--adv-accent));
  transition:width .35s ease;
}

/* =========================================================================
   Roomy tablets and short laptops
   ========================================================================= */

/* 1024x768 and similar short landscape screens: the board lands near 400px,
   so tighten the header band and let the target row breathe. */
@media (min-width:900px) and (orientation:landscape) and (max-height:820px){
  .board-adventure .adventure-title{font-size:clamp(17px,1.9vw,20px)}
  .board-adventure .adventure-order{padding:8px 14px}
  .board-adventure .adventure-scene{font-size:clamp(96px,15vw,168px)}
  .board-adventure .drop-zone.adventure-target{min-height:clamp(72px,16%,104px)}
  .board-adventure .drag-piece.adventure-piece{min-height:74px}
  .board-adventure .adventure-character{font-size:clamp(42px,5.4vw,62px)}
}

/* Portrait tablets (768x1024): the board is taller and narrower, so the
   percentage slots have less room sideways. Trim the widths, not the text. */
@media (max-width:820px){
  .board-adventure .adventure-title{font-size:clamp(18px,2.6vw,21px);width:92%}
  .board-adventure .adventure-order{width:min(92%,460px);font-size:17px}
  .board-adventure .adventure-order li,
  .board-adventure .adventure-order .order-line{font-size:16px}
  .board-adventure .drop-zone.adventure-target{width:clamp(74px,22.5%,150px);min-height:76px}
  .board-adventure .adventure-target .zone-icon{font-size:30px}
  .board-adventure .adventure-target .zone-label{font-size:13px}
  .board-adventure .drag-piece.adventure-piece{width:clamp(56px,20.5%,112px);min-height:76px}
  .board-adventure .adventure-piece .piece-icon{font-size:28px}
  .board-adventure .adventure-piece .piece-label{font-size:12px}
  .board-adventure .adventure-choice{font-size:14px;min-height:60px}
  .board-adventure .adventure-character{font-size:clamp(44px,8vw,64px)}
}

/* =========================================================================
   Phones — nothing may push the board sideways
   ========================================================================= */
@media (max-width:560px){
  .board-adventure.task-board{border-radius:16px}
  .board-adventure.task-board::before{height:36%;border-top-width:2px}

  .board-adventure .adventure-stage{padding:5px 11px 6px;font-size:9px;letter-spacing:1.1px;gap:5px}
  .board-adventure .adventure-stage span,
  .board-adventure .adventure-stage .stage-chip{width:9px;height:9px}

  .board-adventure .adventure-title{font-size:18px;line-height:1.35;width:94%}
  .board-adventure .adventure-order{width:94%;padding:8px 10px;gap:5px 8px;font-size:15px}
  .board-adventure .adventure-order li,
  .board-adventure .adventure-order .order-line{font-size:14px;padding:4px 9px}

  .board-adventure .adventure-scene{font-size:clamp(88px,26vw,140px)}
  .board-adventure .adventure-character{font-size:44px}
  .board-adventure .adventure-result{font-size:14px;padding:7px 14px;max-width:92%}

  /* 21% of a ~330px board is ~70px — still well over the 48px touch floor,
     and four of them at x 17/39/61/83 stay clear of one another. */
  .board-adventure .drag-piece.adventure-piece{
    width:21%;max-width:21%;min-width:0;min-height:68px;padding:7px 4px;
  }
  .board-adventure .adventure-piece .piece-icon{font-size:24px}
  .board-adventure .adventure-piece .piece-label{font-size:11px;line-height:1.25}

  .board-adventure .drop-zone.adventure-target{
    width:23%;min-height:70px;padding:7px 5px;border-width:2px;
  }
  .board-adventure .adventure-target .zone-icon{font-size:25px}
  .board-adventure .adventure-target .zone-label{font-size:11px;line-height:1.2}
  .board-adventure .drop-zone.adventure-target.is-solo{width:56%}

  .board-adventure .drag-piece.adventure-tool{width:19%;min-height:66px}
  .board-adventure .adventure-tool .piece-icon{font-size:28px}

  .board-adventure .adventure-choice{
    width:44%;min-height:56px;padding:8px 10px;gap:7px;font-size:12px;
  }
  .board-adventure .adventure-choice>span:first-child,
  .board-adventure .adventure-choice .piece-icon{font-size:20px}

  .board-adventure .adventure-progress{width:76%;height:8px;bottom:5px}
  .board-adventure .adventure-path path{stroke-width:8}
}

/* Very small phones: the choice text is the only thing that still needs help. */
@media (max-width:380px){
  .board-adventure .adventure-title{font-size:17px}
  .board-adventure .adventure-choice{font-size:11.5px;gap:6px;padding:7px 8px}
  .board-adventure .adventure-piece .piece-label{font-size:10.5px}
}

/* =========================================================================
   Touch, focus and motion
   ========================================================================= */
@media (pointer:coarse){
  .board-adventure .adventure-piece,
  .board-adventure .adventure-tool,
  .board-adventure .adventure-choice,
  .board-adventure .adventure-target{min-height:56px}
  /* Give the small work spots a comfortable invisible hit area. */
  .adventure-mark::after{
    content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:48px;height:48px;border-radius:50%;
  }
}

.board-adventure .adventure-piece:focus-visible,
.board-adventure .adventure-tool:focus-visible,
.board-adventure .adventure-choice:focus-visible{outline:4px solid #9b82bd;outline-offset:3px}
.board-adventure .adventure-target.focus-within,
.board-adventure .adventure-target:focus-visible{outline:3px solid var(--adv-accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .adventure-character,.adventure-checkpoint,.adventure-mark,
  .adventure-result,.adventure-progress>i,
  .adventure-progress .adventure-progress-fill,
  .adventure-stage span,.adventure-stage .stage-chip{transition:none!important}
  .adventure-character.walking{animation:none}
}