/* Trang whitelist /landing/: bãi câu Pixel Lake ban ngày, theo Art Spec 07 (docs/07-art-spec.md).
   Layout: sunny day at Pixel Lake, cozy farm-style pixel art (Art Spec 07). Top bar, hero headline beside the rod scene,
   a horizontal fishing-line progress rail, then one focused action panel (catch card lives inside the Fish on! step). Ink outlines, cream paper, wood title bands, gold actions. */
:root{
  /* Art Spec 3.1 — core */
  --ink:#2b2118; --ink-2:#4a3a2c;
  --wood-d:#5c3a24; --wood:#a8693c; --wood-l:#d49a5c;
  --paper:#f8ecd4; --paper-2:#efdcb6; --paper-3:#e3c999; --paper-hi:#fff8e8;
  --muted:#8b6b4a;
  --gold:#f0b33e; --gold-l:#f6c453; --gold-d:#c98a1e;
  --teal:#3f8f86; --teal-l:#8cc9bf; --teal-d:#2d6760;
  --green:#6aa84f; --green-l:#9fd17f; --green-d:#4c7939;
  --red:#c8553d; --red-l:#e8957f;
  /* Robinhood accent — Home button only */
  --rh:#D7F23B;
  /* Lake environment (3.3) */
  --water:#4f98cc; --water-l:#7cbbe2; --water-d:#4387bd;
  --shade:rgba(43,33,24,.45);
  --f-display:"Press Start 2P", "Courier New", monospace;
  --f-body:"Pixelify Sans", ui-monospace, "Courier New", monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:#d6ebf6;color:var(--ink);font-family:var(--f-body);font-size:18px;overflow-x:hidden;-webkit-font-smoothing:none;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:16px 48px}
.wrap{position:relative;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:26px}

/* pixel frame: ink outline with notched corners + straight-down shadow */
.px{--fc:var(--ink);box-shadow:0 -4px 0 0 var(--fc),0 4px 0 0 var(--fc),-4px 0 0 0 var(--fc),4px 0 0 0 var(--fc),0 10px 0 2px var(--shade);margin:4px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;background:var(--paper);padding:10px 14px;
  background-image:linear-gradient(var(--paper-hi),var(--paper-hi));background-size:100% 3px;background-repeat:no-repeat}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:13px;color:var(--wood);text-decoration:none;white-space:nowrap;text-shadow:2px 2px 0 var(--paper-3)}
.links{display:flex;gap:6px;flex-wrap:wrap}
.lk{font-family:var(--f-display);font-size:10px;color:var(--ink);background:none;border:0;padding:10px 12px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.lk:hover{background:var(--paper-2)}
.lk.on{background:var(--rh);box-shadow:inset 0 -3px 0 0 #A9C21F,0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink),-2px 0 0 0 var(--ink),2px 0 0 0 var(--ink)}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chipbtn{--c:var(--teal);--cl:var(--teal-l);--cd:var(--teal-d);--tc:var(--paper);
  font-family:var(--f-display);font-size:10px;color:var(--tc);background:var(--c);border:0;padding:10px 12px 12px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center;
  text-shadow:0 2px 0 var(--cd);
  box-shadow:inset 0 3px 0 0 var(--cl),inset 0 -4px 0 0 var(--cd),0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),0 6px 0 0 var(--shade);margin:3px}
.chipbtn.cta{--c:var(--gold);--cl:var(--gold-l);--cd:var(--gold-d);--tc:var(--ink);text-shadow:none}
.chipbtn.sand{--c:var(--paper-2);--cl:var(--paper-hi);--cd:var(--paper-3);--tc:var(--ink);text-shadow:none}
.chipbtn:active{transform:translateY(3px)}
.lk:focus-visible,.chipbtn:focus-visible,.btn:focus-visible,input:focus-visible,.task:focus-visible,.ok:focus-visible,.link:focus-visible,.stage:focus-visible{outline:4px solid var(--gold-d);outline-offset:4px}

/* ===== Layout =====
   Desktop: two columns. Left = headline + the one task panel. Right = the angler scene, sticky, reacting to progress.
   Phone: headline → scene → panel. Only two framed objects on the page: the task panel and the scene. */
.page{display:grid;grid-template-columns:minmax(0,540px);grid-template-areas:"intro" "panel";justify-content:end;row-gap:22px;align-items:start}
.intro{grid-area:intro;padding:10px 4px 0}
.intro h1{text-shadow:0 2px 0 rgba(255,248,232,.85);margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3.4vw,40px);line-height:1.25;color:var(--ink);text-wrap:balance}
.intro h1 b{color:var(--gold-d);font-weight:400}
.intro p{margin:14px 0 0;font-size:20px;line-height:1.4;color:var(--ink-2);max-width:42ch;font-weight:500}

/* stage: the angler scene */
/* the lake scene is the page background: fixed, full-bleed, pixel-crisp; angler stays on the left */
#rod{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% 100%;image-rendering:pixelated;z-index:-1;pointer-events:none}
.eta.cap{display:block;width:fit-content;margin-top:10px;color:var(--muted)}

/* panel: wood band (progress) / paper body (task) / paper-2 foot (step + reward) — Art Spec 6.2 */
.panel{grid-area:panel;background:var(--paper);display:flex;flex-direction:column}
.band{position:relative;background:var(--wood);padding:38px clamp(14px,2.4vw,24px) 14px;box-shadow:inset 0 3px 0 0 var(--wood-l),inset 0 -4px 0 0 var(--wood-d),0 3px 0 0 var(--ink)}
.band ol{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:space-between;position:relative}
.band ol::before{content:"";position:absolute;left:16px;right:20px;top:15px;height:4px;background:repeating-linear-gradient(90deg,var(--wood-l) 0 8px,transparent 8px 14px)}
.rs,.creel{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
.ico{width:34px;height:34px;display:grid;place-items:center;font-family:var(--f-display);font-size:11px;background:var(--paper-2);color:var(--muted);
  box-shadow:inset 0 -3px 0 0 var(--paper-3),0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink)}
.rs .nm,.creel .cl{font-family:var(--f-display);font-weight:400;font-size:8px;color:var(--paper-3);white-space:nowrap;letter-spacing:.03em}
.rs.done .ico{background:var(--green-l);color:var(--ink);box-shadow:inset 0 -3px 0 0 var(--green),0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink)}
.rs.done .nm{color:var(--paper)}
.rs.cur .ico{background:var(--gold-l);color:var(--ink);box-shadow:inset 0 -3px 0 0 var(--gold-d),0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink)}
.rs.cur .nm{color:var(--gold-l)}
.creel .cb{position:relative;width:34px;height:34px}
.creel canvas{width:34px;height:34px;image-rendering:pixelated}
.creel b{position:absolute;right:-8px;bottom:-4px;background:var(--gold);width:18px;height:18px;display:grid;place-items:center;font-family:var(--f-display);font-size:8px;
  box-shadow:0 -2px 0 var(--ink),0 2px 0 var(--ink),-2px 0 0 var(--ink),2px 0 0 var(--ink)}
#bobber{position:absolute;width:18px;height:27px;image-rendering:pixelated;z-index:2;transition:left .6s steps(6);pointer-events:none;animation:float 1.2s steps(2) infinite}
@keyframes float{50%{transform:translateY(-3px)}}

.body{padding:24px clamp(16px,2.6vw,28px) 22px;display:flex;flex-direction:column;gap:14px}
.body h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(17px,2.2vw,24px);line-height:1.35;color:var(--ink);text-wrap:balance}
.body h2 em{font-style:normal;color:var(--gold-d)}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px clamp(16px,2.6vw,28px);background:var(--paper-2);box-shadow:inset 0 3px 0 0 var(--paper-3);
  font-family:var(--f-display);font-size:9px;line-height:1.5;color:var(--muted)}
.foot b{font-weight:400;color:var(--wood)}

/* modal card keeps the wood title band */
.card{background:var(--paper);padding:0 clamp(16px,2.6vw,28px) 24px;display:flex;flex-direction:column;gap:14px}
.card h2{margin:0 calc(-1 * clamp(16px,2.6vw,28px)) 6px;padding:16px clamp(16px,2.6vw,28px) 14px;background:var(--wood);color:var(--paper);
  font-family:var(--f-display);font-weight:400;font-size:clamp(14px,1.9vw,18px);line-height:1.4;text-shadow:0 2px 0 var(--ink);
  box-shadow:inset 0 3px 0 0 var(--wood-l),inset 0 -4px 0 0 var(--wood-d),0 3px 0 0 var(--ink)}
.card h2 em{font-style:normal;color:var(--gold-l)}

/* shared content styles */
.body p,.card p{margin:0;line-height:1.4;color:var(--ink-2);max-width:58ch}
.todo{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.todo li{display:flex;align-items:center;gap:12px;font-weight:600;flex-wrap:wrap}
.todo .n{width:26px;height:26px;background:var(--teal);color:var(--paper);display:grid;place-items:center;font-family:var(--f-display);font-size:10px;flex:none}
.chip{font-size:16px;color:var(--green-d);background:#e3f2d8;padding:2px 10px;font-weight:600;box-shadow:0 0 0 2px var(--green)}
.btn{font-family:var(--f-display);font-size:clamp(14px,1.8vw,18px);color:var(--ink);background:var(--gold);border:0;padding:19px 16px 21px;width:calc(100% - 8px);margin:4px 4px 12px;cursor:pointer;
  text-shadow:2px 2px 0 var(--gold-l);
  box-shadow:inset 0 -6px 0 0 var(--gold-d),inset 0 6px 0 0 var(--gold-l),0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),0 10px 0 0 var(--ink)}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(6px);box-shadow:inset 0 -6px 0 0 var(--gold-d),0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink)}
.btn[disabled]{background:var(--paper-2);color:var(--muted);text-shadow:none;cursor:not-allowed;filter:none;
  box-shadow:inset 0 -6px 0 0 var(--paper-3),0 -4px 0 0 var(--muted),0 4px 0 0 var(--muted),-4px 0 0 0 var(--muted),4px 0 0 0 var(--muted),0 10px 0 0 var(--muted)}
.btn.sm{font-size:12px;padding:14px 12px 16px}
.link{background:none;border:0;padding:0;color:var(--teal-d);text-decoration:underline;text-underline-offset:4px;font:600 17px var(--f-body);cursor:pointer;align-self:center}
.sep{border:0;height:4px;margin:2px 0;background:repeating-linear-gradient(90deg,var(--paper-3) 0 8px,transparent 8px 16px)}
label{font-weight:700;color:var(--ink-2)}
.row{display:flex;gap:14px;padding:4px}
.row input{flex:1;min-width:0}
input{font:500 18px var(--f-body);color:var(--ink);background:var(--paper-hi);border:0;padding:12px 14px;width:100%;
  box-shadow:inset 0 3px 0 0 var(--paper-3),0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink)}
input::placeholder{color:#b49a78}
.ok{width:52px;flex:none;background:var(--teal);border:0;color:var(--paper);font:700 22px var(--f-body);cursor:pointer;
  box-shadow:inset 0 3px 0 0 var(--teal-l),inset 0 -4px 0 0 var(--teal-d),0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink)}
.err{color:var(--red);font-weight:700;min-height:1.3em;margin:0}
.note{font-size:16px;color:var(--muted);line-height:1.3}
.tasks{display:flex;flex-direction:column;gap:16px;padding:4px}
.task{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--paper-hi);text-decoration:none;color:var(--ink);font-weight:600;
  box-shadow:0 -4px 0 0 var(--paper-3),0 4px 0 0 var(--paper-3),-4px 0 0 0 var(--paper-3),4px 0 0 0 var(--paper-3)}
.task:hover{background:#fff3d6}
.task .ck{width:24px;height:24px;background:var(--paper-hi);box-shadow:0 0 0 4px var(--ink);display:grid;place-items:center;flex:none;font-family:var(--f-display);font-size:11px;margin:4px}
.task.done{background:#e3f2d8;box-shadow:0 -4px 0 0 var(--green),0 4px 0 0 var(--green),-4px 0 0 0 var(--green),4px 0 0 0 var(--green)}
.task.done .ck{background:var(--green);color:var(--paper-hi)}
.task small{display:block;font-weight:400;color:var(--muted);font-size:16px}
.summary{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-variant-numeric:tabular-nums;margin:0;background:var(--paper-hi);padding:12px;box-shadow:0 0 0 2px var(--paper-3)}
.summary dt{color:var(--muted);font-weight:600}.summary dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.catchwrap{margin:4px 0 8px;display:flex;flex-direction:column;align-items:center;gap:10px}
#poster{width:100%;max-width:330px;transform:rotate(1.5deg);filter:drop-shadow(0 8px 0 var(--shade));image-rendering:pixelated}
.hint{font-size:16px;color:var(--muted);text-align:center;line-height:1.3;max-width:36ch}

.modal{position:fixed;inset:0;z-index:20;background:rgba(43,33,24,.5);display:grid;place-items:center;padding:16px}
.modal .card{max-width:480px;width:calc(100% - 16px)}

/* chill layer: calm hints, task state labels, toast */
.panel{scroll-margin-top:16px}
.eta{display:inline-block;margin-top:16px;padding:10px 12px;font-family:var(--f-display);font-size:9px;line-height:1.6;color:var(--wood);background:var(--paper);
  box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink)}
.tiny{font-size:16px;color:var(--muted);line-height:1.35;margin:0}
.hintok{color:var(--green-d);font-weight:700;min-height:1.3em;margin:0}
.st{display:inline-block;margin-left:8px;font-family:var(--f-display);font-size:8px;line-height:1.4;color:var(--teal-d);vertical-align:middle}
.task.done .st{color:var(--green-d)}
.body .chipbtn{align-self:flex-start}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);opacity:0;pointer-events:none;z-index:30;
  max-width:calc(100% - 32px);background:var(--wood);color:var(--paper);font-family:var(--f-display);font-size:10px;line-height:1.7;padding:14px 18px;text-align:center;text-shadow:0 2px 0 var(--ink);
  box-shadow:inset 0 3px 0 0 var(--wood-l),inset 0 -4px 0 0 var(--wood-d),0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink);
  transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .page{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .bar{padding:10px}
  .acts{gap:6px}
  .chipbtn{font-size:8px;padding:8px 8px 10px}
  .lk{font-size:9px;padding:8px}
}
@media (max-width:440px){
  .rs .nm,.creel .cl{font-size:7px}
  .ico,.creel .cb,.creel canvas{width:28px;height:28px}
  .band ol::before{top:12px}
}
@media (prefers-reduced-motion:reduce){#bobber{transition:none;animation:none}.toast{transition:none}}
[hidden]{display:none !important} /* .modal{display:grid} không được đè thuộc tính hidden */
.brand img{width:32px;height:32px;image-rendering:pixelated}
.btn[aria-busy="true"]{cursor:progress;filter:saturate(.6)}