/* tiki.css - Tiki Time (app "tiki"): the beach-island game where every spot is a real tool. The approved mockup kits/tiki-mockup/index.html: an SVG world
   scaled to the viewport height with parallax layers, a wood-and-cream HUD, bamboo-framed tool windows, Luckiest Guy display type over Fredoka. */
:root{--ink:#16324a;--sand:#f6d9a0;--sea:#18b6c9;--deep:#0b6f99;--leaf:#2f9e5a;--wood:#8a5530;--wood2:#5e3518;--plank:#c88a4a;--coral:#ff6f7d;--sun:#ffc947;--cream:#fff6e2;--card:#f3e2bd;--mut:#7a6a52;--good:#2fae6a;--warn:#e0a21a;--bad:#e8394a;--night:0;--disp:"Luckiest Guy","Fredoka",system-ui,sans-serif;--body:"Fredoka",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{background:#0b1530;color:var(--ink);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.tk-vh,.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:90;background:var(--sun);color:var(--wood2);padding:10px 16px;border-radius:12px;font:600 15px var(--body);transition:top .2s;text-decoration:none}
.skip:focus{top:12px}
.tk-sprite{position:absolute;width:0;height:0;overflow:hidden}
.paper-grain{display:none}

/* generator CA bar, worn as a pill over the island */
.cabar{position:relative;z-index:30;font:600 13px var(--body);color:#fff;background:#0b1530;border-bottom:3px solid var(--plank)}
.cabar .wrap{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding-top:4px;padding-bottom:4px;white-space:nowrap;overflow:hidden}
.tk-cab{position:absolute;left:16px;top:12px;z-index:26;max-width:calc(100vw - 260px);background:rgba(10,20,40,.6);border:0;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tk-cab .wrap{justify-content:flex-start;max-width:none;min-height:0;padding:6px 8px 6px 14px}
.cabar b{color:var(--sun);font-weight:700}.cabar .sep{opacity:.6}
.cabar code{font:500 12px var(--mono);color:#fff;overflow:hidden;text-overflow:ellipsis;min-width:0}.cabar .short{display:none}
.btn.xs{flex:none;cursor:pointer;font:600 12px var(--body);border:0;background:var(--cream);color:var(--wood2);padding:3px 10px;border-radius:999px;box-shadow:0 2px 0 var(--plank)}
.btn.xs:hover{background:#fff}

/* ===== the game ===== */
.tk-game{position:relative;width:100%;height:100vh;height:100svh;min-height:620px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#0b1530}
.tk-view{position:absolute;left:0;top:0;height:900px;transform-origin:0 0;overflow:hidden}
.tk-layer{position:absolute;left:0;top:0;height:900px;will-change:transform}
.tk-layer svg{display:block;overflow:visible}
#tk-lsky .tk-gulls{position:absolute;left:0;top:0;pointer-events:none}
.tk-npc{position:absolute;width:100px;height:200px;pointer-events:none}
.tk-npc svg{display:block}
.tk-player{position:absolute;left:340px;width:80px;height:120px;will-change:transform}
.tk-player svg{display:block;overflow:visible}
.tk-night{opacity:var(--night)}
.tk-wv{animation:tk-wv var(--wd,9s) linear infinite}@keyframes tk-wv{to{transform:translateX(-400px)}}
.tk-bob{animation:tk-bob 2.4s ease-in-out infinite alternate}@keyframes tk-bob{to{transform:translateY(3px)}}
.tk-sway{transform-box:fill-box;transform-origin:50% 100%;animation:tk-sway var(--sd,4s) ease-in-out infinite alternate}@keyframes tk-sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.6deg)}}
.tk-frond{transform-box:fill-box;transform-origin:0% 50%;animation:tk-frond var(--fd,3.4s) ease-in-out infinite alternate}@keyframes tk-frond{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
.tk-blink{transform-box:fill-box;transform-origin:50% 50%;animation:tk-blink 5s infinite}@keyframes tk-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.tk-flick{transform-box:fill-box;transform-origin:50% 100%;animation:tk-flick .4s ease-in-out infinite alternate}@keyframes tk-flick{from{transform:scale(1,1)}to{transform:scale(.88,1.12) skewX(4deg)}}
.tk-gull{animation:tk-gull 26s linear infinite}@keyframes tk-gull{from{transform:translateX(-200px)}to{transform:translateX(1900px)}}
.tk-flap{transform-box:fill-box;transform-origin:50% 100%;animation:tk-flap .5s ease-in-out infinite alternate}@keyframes tk-flap{to{transform:scaleY(-.6)}}
.tk-crab{animation:tk-crab 9s ease-in-out infinite alternate}@keyframes tk-crab{to{transform:translateX(120px)}}
.tk-beam{transform-box:fill-box;transform-origin:0% 50%;animation:tk-beam 6s linear infinite}@keyframes tk-beam{0%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.05);opacity:.2}100%{transform:scaleX(1);opacity:.9}}
.tk-fish{transform-box:fill-box;animation:tk-fish 5s ease-in-out infinite}@keyframes tk-fish{0%,70%,100%{transform:translateY(40px);opacity:0}78%{transform:translateY(-30px) rotate(-30deg);opacity:1}88%{transform:translateY(0) rotate(40deg);opacity:1}}
#tk-bell.tk-ring{transform-box:fill-box;transform-origin:50% 0;animation:tk-ring .25s ease-in-out 6 alternate}@keyframes tk-ring{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
#tk-lamp.tk-ring{animation:tk-lamp .3s ease-in-out 6 alternate}@keyframes tk-lamp{to{fill:#fff}}
.tk-game.tk-paused *{animation-play-state:paused!important}

/* HUD */
.tk-hud{position:absolute;inset:0;z-index:20;pointer-events:none}
.tk-hud>*{pointer-events:auto}
.tk-card{position:absolute;left:16px;top:56px;display:flex;gap:12px;align-items:center;padding:10px 16px 10px 10px;background:linear-gradient(180deg,var(--cream),var(--card));border-radius:18px;box-shadow:0 0 0 3px var(--wood2),0 0 0 6px var(--plank),0 8px 0 3px rgba(0,0,0,.25)}
.tk-card svg{width:52px;height:60px;overflow:visible}
.tk-card b{display:block;font:400 20px var(--disp);color:var(--wood2);line-height:1.1}
.tk-card small{display:block;font:600 12px var(--body);color:#8a6a3a}
.tk-xp{width:160px;height:12px;border-radius:6px;background:#e3c993;box-shadow:inset 0 2px 3px rgba(0,0,0,.2);margin-top:5px;overflow:hidden}
.tk-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#48d18a,#2fae6a);border-radius:6px;transition:width .6s}
.tk-shells{display:flex;align-items:center;gap:6px;margin-left:8px;font:400 22px var(--disp);color:var(--coral);white-space:nowrap}
.tk-map{position:absolute;right:16px;top:56px;width:min(440px,46vw);padding:10px 12px 12px;background:linear-gradient(180deg,var(--cream),var(--card));border-radius:18px;box-shadow:0 0 0 3px var(--wood2),0 0 0 6px var(--plank),0 8px 0 3px rgba(0,0,0,.25)}
.tk-mt2{display:flex;justify-content:space-between;gap:10px;font:600 12px var(--body);color:#8a6a3a;margin-bottom:6px}
.tk-strip{position:relative;height:46px;border-radius:12px;background:linear-gradient(180deg,#7fdcef 0 46%,var(--sand) 46%);box-shadow:inset 0 0 0 2px rgba(22,50,74,.25)}
.tk-pin{position:absolute;top:4px;transform:translateX(-50%);font-size:18px;line-height:1;cursor:pointer;background:none;border:0;padding:2px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));transition:transform .15s}
.tk-pin:hover,.tk-pin:focus-visible{transform:translateX(-50%) scale(1.25)}
.tk-me{position:absolute;bottom:3px;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px #fff;transform:translateX(-50%);pointer-events:none}
.tk-tod{position:absolute;right:16px;top:12px;display:flex;gap:8px}
.tk-chip{font:600 13px var(--body);color:#fff;background:rgba(10,20,40,.55);padding:6px 12px;border-radius:999px;cursor:pointer;border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tk-chip[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--sun)}
.tk-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:600 14px var(--body);color:#fff;background:rgba(10,20,40,.55);padding:8px 16px;border-radius:999px;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.tk-talk{position:absolute;left:50%;bottom:70px;transform:translateX(-50%) translateY(20px);opacity:0;visibility:hidden;transition:.25s;font:400 22px var(--disp);color:#fff;background:linear-gradient(180deg,#ff8a5c,#ff5a6a);padding:12px 26px;border-radius:16px;border:0;box-shadow:0 6px 0 #b8344a,0 10px 20px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.tk-talk.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.tk-pads{position:absolute;bottom:20px;left:16px;right:16px;display:none;justify-content:space-between;pointer-events:none}
.tk-pad{pointer-events:auto;width:70px;height:70px;border-radius:50%;border:0;background:rgba(255,255,255,.85);display:grid;place-items:center;font:400 30px var(--disp);color:var(--wood2);box-shadow:0 5px 0 var(--plank);touch-action:none;-webkit-tap-highlight-color:transparent}
.tk-pad.on{transform:translateY(3px);box-shadow:0 2px 0 var(--plank)}
.tk-bubble{position:absolute;z-index:15;width:330px;padding:14px 18px 16px;background:#fff;border-radius:18px;box-shadow:0 0 0 3px var(--ink),0 8px 0 3px rgba(0,0,0,.2);font:500 17px/1.35 var(--body);color:var(--ink);transform:translateX(-50%) scale(.8);opacity:0;transition:.2s;pointer-events:none;min-height:92px}
.tk-bubble.on{opacity:1;transform:translateX(-50%) scale(1)}
.tk-bubble b{display:block;font:400 18px var(--disp);color:var(--coral);margin-bottom:3px;letter-spacing:.02em}
.tk-bubble::after{content:"";position:absolute;left:50%;bottom:-14px;margin-left:-10px;border:12px solid transparent;border-top-color:#fff;border-bottom:0;filter:drop-shadow(0 3px 0 var(--ink))}
.tk-dlg{position:absolute;left:16px;right:16px;top:292px;display:none;padding:12px 16px 14px;background:#fff;border-radius:18px;box-shadow:0 0 0 3px var(--ink),0 6px 0 3px rgba(0,0,0,.2);font:500 15px/1.35 var(--body);color:var(--ink);pointer-events:none}
.tk-dlg b{display:block;font:400 16px var(--disp);color:var(--coral);margin-bottom:2px;letter-spacing:.02em}

/* ===== tool windows (bamboo frame) ===== */
.tk-scrim{position:fixed;inset:0;z-index:58;background:rgba(8,16,36,.45)}
.tk-win{position:fixed;z-index:60;left:50%;top:50%;width:min(760px,calc(100vw - 32px));max-height:min(86vh,860px);display:flex;flex-direction:column;transform:translate(-50%,-50%);background:var(--cream);border-radius:24px;box-shadow:0 0 0 4px var(--wood2),0 0 0 12px var(--plank),0 0 0 15px var(--wood2),0 24px 60px rgba(0,0,0,.5);animation:tk-pop .22s cubic-bezier(.3,1.4,.5,1)}
@keyframes tk-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes tk-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.tk-whd{flex:none;display:flex;align-items:center;gap:14px;padding:14px 18px 14px 22px;background:repeating-linear-gradient(90deg,#d9a35e 0 38px,var(--plank) 38px 40px,#e6b878 40px 78px,var(--plank) 78px 80px);border-radius:20px 20px 0 0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.tk-wnpc{flex:none;width:52px;height:78px;overflow:hidden}
.tk-wnpc svg{width:52px;height:104px}
.tk-whd h2{font:400 28px/1.05 var(--disp);color:#fff;text-shadow:0 3px 0 var(--wood2),0 0 2px var(--wood2);letter-spacing:.02em}
.tk-whd small{display:block;font:600 13px var(--body);color:#fff7e0;text-shadow:0 1px 0 var(--wood2)}
.tk-x{margin-left:auto;flex:none;width:42px;height:42px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;font:400 22px var(--disp);color:var(--wood2);cursor:pointer;box-shadow:0 4px 0 var(--wood2)}
.tk-wbd{padding:18px 22px 22px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tk-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tk-row>.tk-inp{flex:1 1 200px}
.tk-inp{min-width:0;font:500 16px var(--body);color:var(--ink);background:#fff;border:0;border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 2px #e3c993,inset 0 2px 4px rgba(0,0,0,.08);outline:0}
.tk-inp:focus{box-shadow:inset 0 0 0 2px var(--sea),inset 0 2px 4px rgba(0,0,0,.08)}
.tk-inp.tk-sm{flex:0 1 130px}
.tk-num{font-variant-numeric:tabular-nums}
.tk-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:400 18px var(--disp);letter-spacing:.02em;color:#fff;background:linear-gradient(180deg,#36c98a,#22a56c);border:0;border-radius:12px;padding:10px 20px;min-height:46px;box-shadow:0 4px 0 #16794e;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .1s}
.tk-go:active{transform:translateY(2px);box-shadow:0 2px 0 #16794e}
.tk-go:disabled{filter:grayscale(.6);opacity:.7;cursor:default}
.tk-go.tk-o{background:linear-gradient(180deg,#ff8a5c,#ff5a6a);box-shadow:0 4px 0 #b8344a}
.tk-go.tk-w{background:#fff;color:var(--wood2);box-shadow:0 0 0 2px #e3c993,0 4px 0 var(--plank)}
.tk-go[aria-pressed="true"]{background:linear-gradient(180deg,#ff8a5c,#ff5a6a);box-shadow:0 4px 0 #b8344a}
.tk-link{background:none;border:0;color:var(--deep);font:600 13px var(--body);text-decoration:underline;cursor:pointer;margin-left:8px}
.tk-stat{font:500 14.5px/1.45 var(--body);color:var(--mut);margin:4px 0 12px}
.tk-stat.tk-warnt{color:#b8344a}
.tk-hint2{font:500 13px var(--body);color:var(--mut);margin:-4px 0 10px}
.tk-note{margin-top:14px;font:500 13.5px/1.5 var(--body);color:var(--mut)}
.tk-h4{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:400 19px var(--disp);color:var(--wood2);margin:16px 0 8px;letter-spacing:.02em}
.tk-h4 small{font:600 12.5px var(--body);color:var(--mut);letter-spacing:0}
.tk-mt{margin-top:12px}
.tk-list{list-style:none;display:grid;gap:8px}
.tk-it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;background:#fff;border-radius:14px;box-shadow:0 0 0 2px #f0dcae}
.tk-it>.tk-ic{font-size:22px;width:28px;text-align:center}
.tk-it b{display:block;font:600 16px var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-it small{display:block;font:500 12.5px/1.4 var(--body);color:var(--mut)}
.tk-it .tk-go{font-size:14px;padding:6px 12px;min-height:36px}
.tk-it.tk-skip{opacity:.72}
.tk-tag{font:600 12px var(--body);padding:4px 10px;border-radius:999px;color:#fff;background:#8aa0a8;white-space:nowrap}
.tk-tag.tk-ok{background:var(--good)}.tk-tag.tk-y{background:#d69a12}.tk-tag.tk-r{background:var(--bad)}.tk-tag.tk-rr{background:#a3162a}.tk-tag.tk-s{background:#8aa0a8}.tk-tag.tk-c{background:#1fb0c9}
.tk-flagbig{display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;margin-bottom:12px;background:#eef3f4;box-shadow:0 0 0 2px #c9d6d8}
.tk-flagbig svg{width:58px;height:66px;flex:none}
.tk-flagbig b{display:block;font:400 26px var(--disp);letter-spacing:.02em}
.tk-flagbig div div{font:500 15px var(--body)}
.tk-flagbig[data-f="green"]{background:#e3f7ec;box-shadow:0 0 0 2px #48d18a}.tk-flagbig[data-f="green"] b{color:#1f8a54}
.tk-flagbig[data-f="yellow"]{background:#fff3cd;box-shadow:0 0 0 2px var(--sun)}.tk-flagbig[data-f="yellow"] b{color:#a8780a}
.tk-flagbig[data-f="red"]{background:#ffe3e6;box-shadow:0 0 0 2px #ff6f7d}.tk-flagbig[data-f="red"] b{color:#c22a3c}
.tk-flagbig[data-f="dred"]{background:#ffd6db;box-shadow:0 0 0 3px var(--bad)}.tk-flagbig[data-f="dred"] b{color:#a3162a}
.tk-coin{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:600 15px var(--body);margin:0 0 10px}
.tk-coin code,.tk-mono{font:500 12.5px var(--mono);color:var(--mut);word-break:break-all}
.tk-share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.tk-share.tk-c{justify-content:center}
.tk-out{font:500 13px var(--body);color:var(--mut)}
.tk-out a{color:var(--deep);font-weight:600}
.tk-rules{margin-top:14px;background:#fff;border-radius:14px;box-shadow:0 0 0 2px #f0dcae}
.tk-rules summary{cursor:pointer;padding:12px 14px;font:600 14.5px var(--body);color:var(--wood2)}
.tk-rl{padding:0 16px 14px 32px;display:grid;gap:6px;font:500 13.5px/1.5 var(--body);color:#5a4a32}
.tk-wave{height:12px;border-radius:6px;background:#e7f7fb;overflow:hidden;margin-top:5px}.tk-wave i{display:block;height:100%;background:linear-gradient(90deg,#4fd1e8,#1a8fd0);border-radius:6px}
.tk-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:14px 16px;background:#fff;border-radius:14px;box-shadow:0 0 0 2px #f0dcae;font:500 15px var(--body)}
.tk-kv span{color:var(--mut)}.tk-kv b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.tk-big{font:400 40px/1 var(--disp);color:var(--wood2);letter-spacing:.02em}
.tk-total{text-align:center;margin:4px 0 14px;display:grid;gap:4px}
.tk-total small{font:600 13px var(--body);color:var(--mut)}
.tk-total span{font:600 14px var(--body);color:var(--mut)}
.tk-up{color:var(--good)!important}.tk-dn{color:var(--bad)!important}
.tk-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:6px}
.tk-fld{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0}
.tk-fld label,.tk-lab{font:600 13px var(--body);color:var(--mut)}
.tk-fld .tk-row{margin:0;flex-wrap:nowrap}.tk-fld .tk-row .tk-inp:first-child{flex:1 1 60%}.tk-fld .tk-row .tk-inp+.tk-inp{flex:1 1 40%}
.tk-swapb{justify-self:center;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--wood2);font:700 20px var(--body);box-shadow:0 0 0 2px #e3c993,0 3px 0 var(--plank);cursor:pointer}
.tk-chips{display:flex;gap:8px;flex-wrap:wrap}
.tk-chip2{font:600 13px var(--body);border:0;border-radius:999px;padding:6px 12px;background:#fff;color:var(--wood2);box-shadow:0 0 0 2px #e3c993;cursor:pointer}
.tk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tk-tab{font:600 14px var(--body);border:0;border-radius:12px;padding:8px 14px;background:#fff;color:var(--wood2);box-shadow:0 0 0 2px #e3c993;cursor:pointer}
.tk-tab[aria-selected="true"]{background:var(--wood2);color:#fff;box-shadow:0 0 0 2px var(--wood2)}
.tk-tab .tk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#bbb;margin-right:6px;vertical-align:1px}.tk-tab .tk-dot.on{background:#36c98a;box-shadow:0 0 0 3px rgba(54,201,138,.3)}
.tk-tab:disabled{opacity:.55;cursor:default}
.tk-bait{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;background:#fff;border-radius:14px;box-shadow:0 0 0 2px #f0dcae}
.tk-bait .tk-inp{width:100%}
.tk-wide{grid-column:1/-1}
.tk-flags{display:flex;gap:8px;flex-wrap:wrap}
.tk-chk{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--body);padding:6px 10px;border-radius:10px;background:var(--cream);box-shadow:0 0 0 2px #f0dcae;cursor:pointer}
.tk-chk input{width:18px;height:18px;accent-color:var(--leaf)}
.tk-lvrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;background:#fff;border-radius:14px;box-shadow:0 0 0 2px #f0dcae}
.tk-lvrow small{display:block;font:600 13px var(--body);color:var(--mut)}
.tk-xpw{flex:1 1 160px}.tk-xpw .tk-xp{width:100%}
.tk-quests .tk-pb{height:10px;border-radius:5px;background:#f0dcae;overflow:hidden;margin-top:6px}.tk-quests .tk-pb i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),#ff8a5c)}
.tk-shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tk-item{display:grid;justify-items:center;gap:4px;padding:10px 8px;background:#fff;border-radius:14px;border:0;box-shadow:0 0 0 2px #f0dcae;cursor:pointer;font:600 13px var(--body);color:var(--ink);text-align:center}
.tk-em{font-size:30px;line-height:44px;height:44px}.tk-bd{display:block;width:14px;height:42px;margin:1px 0;border-radius:7px;border:2px solid var(--ink);transform:rotate(-12deg)}
.tk-item small{font:600 12px var(--body);color:var(--mut)}
.tk-item[aria-pressed="true"]{box-shadow:0 0 0 3px var(--leaf);background:#effbf3}
.tk-item:disabled{opacity:.55;cursor:default}

/* ===== below the island ===== */
.tk-below{background:linear-gradient(180deg,var(--sand),#f3cf8c);padding:90px 0 70px;position:relative}
.tk-below::before{content:"";position:absolute;left:0;right:0;top:-1px;height:60px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60'><path d='M0 0 H400 V20 C340 50 260 0 200 24 C140 48 60 0 0 22 Z' fill='%230b6f99'/></svg>") repeat-x}
.tk-below h2,.tk-sec h2,.tk-final h2{font:400 clamp(40px,6vw,76px)/1 var(--disp);color:#fff;text-shadow:0 5px 0 var(--wood2),0 0 3px var(--wood2);text-align:center;letter-spacing:.02em}
.tk-sub{text-align:center;font:500 19px/1.45 var(--body);color:var(--wood2);max-width:640px;margin:14px auto 40px}
.tk-sub a{font-weight:600}
.tk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tk-tc{display:grid;grid-template-columns:70px minmax(0,1fr);gap:14px;align-items:center;text-align:left;background:var(--cream);border:0;border-radius:22px;padding:18px 20px;box-shadow:0 0 0 3px var(--wood2),0 8px 0 3px rgba(94,53,24,.35);cursor:pointer;color:var(--ink);transition:transform .15s}
.tk-tc:hover{transform:translateY(-3px)}
.tk-tcw{grid-column:1/-1;background:linear-gradient(180deg,#fff6e2,#f6e3bb)}.tk-tcw .tk-tct{max-width:760px}
.tk-tc .tk-tcp{width:70px;height:120px}
.tk-tct{display:grid;gap:4px}
.tk-tct b{font:400 21px var(--disp);color:var(--wood2);letter-spacing:.02em}
.tk-tct span{font:500 14.5px var(--body);color:#5a4a32}.tk-tct em{font-style:normal;font-weight:600}
.tk-tct i{font:500 13.5px/1.4 var(--body);color:var(--mut)}
.tk-perks{background:linear-gradient(180deg,#f3cf8c,#e9bd73);padding:10px 0 80px}
.tk-pg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.tk-pc{background:linear-gradient(180deg,#0e8fb0,var(--deep));color:#fff;border-radius:24px;padding:30px;box-shadow:0 0 0 3px var(--ink),0 8px 0 3px rgba(0,0,0,.3)}
.tk-pc h2{font:400 38px var(--disp);text-shadow:0 3px 0 var(--ink);letter-spacing:.02em}
.tk-pc ul{list-style:none;margin-top:14px}
.tk-pc li{font:500 17px var(--body);padding:8px 0 8px 28px;border-bottom:1px dashed rgba(255,255,255,.3);position:relative}
.tk-pc li::before{content:"🌺";position:absolute;left:0;top:8px}
.tk-pc2{font:500 17px/1.5 var(--body);color:var(--wood2)}
.tk-lgline{font:400 40px/1.05 var(--disp);color:#fff;text-shadow:0 4px 0 var(--wood2);letter-spacing:.02em;margin-bottom:12px}
.tk-hf{margin-top:16px}
.tk-sec{padding:80px 0;background:var(--deep);position:relative}
.tk-sec#how{background:linear-gradient(180deg,#0b6f99,#0a5a80)}
.tk-how{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.tk-how li{background:var(--cream);border-radius:20px;padding:22px 20px;box-shadow:0 0 0 3px var(--wood2),0 7px 0 3px rgba(0,0,0,.25)}
.tk-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--coral);color:#fff;font:400 24px var(--disp);box-shadow:0 4px 0 #b8344a}
.tk-how h3{font:400 24px var(--disp);color:var(--wood2);margin:12px 0 6px;letter-spacing:.02em}
.tk-how p{font:500 15px/1.5 var(--body);color:#5a4a32}
.tk-faqs{background:#0a5a80}
.tk-faqs .tk-sub{color:#e6f6fb}.tk-faqs .tk-sub a{color:var(--sun)}
.faq{max-width:860px;margin:36px auto 0}
.faq details{background:var(--cream);border-radius:16px;margin-bottom:10px;box-shadow:0 0 0 3px var(--wood2),0 5px 0 2px rgba(0,0,0,.2);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 56px 16px 18px;font:600 16px var(--body);color:var(--wood2);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font:700 18px/28px var(--body);text-align:center;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 18px 18px;color:#5a4a32;font:500 15px/1.55 var(--body)}
.faq code{font:500 12.5px var(--mono);color:var(--deep);word-break:break-all}
.tk-final{background:linear-gradient(180deg,#0a5a80,#0b1530);padding:70px 0 90px;text-align:center}
.tk-fmark{display:block;margin:0 auto 18px;width:120px;height:120px}
.tk-final p{font:500 18px var(--body);color:#e6f6fb;margin:14px auto 24px;max-width:560px}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}[data-reveal][data-d="2"]{transition-delay:.16s}

/* footer (framework markup) */
.foot{position:relative;overflow:hidden;background:var(--wood2);color:#f3dcb4;padding:52px 0 0}
.foot .grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr));gap:36px}
.foot .brand{display:inline-flex;align-items:center;gap:10px;font:400 24px var(--disp);color:#ffd77a;text-decoration:none;letter-spacing:.02em}
.foot .brand img{border-radius:50%}
.foot .about{margin-top:12px;font:500 15px/1.55 var(--body);max-width:480px;color:#f3dcb4}
.foot h4{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:#d9b98a}
.foot ul{list-style:none;display:grid;gap:8px;font:500 15px var(--body)}.foot ul a{text-decoration:none}.foot ul a:hover{color:#ffd77a}
.foot .fine{margin-top:30px;padding:20px 0 26px;border-top:1px dashed rgba(243,220,180,.3);font:500 13px/1.65 var(--body);color:#d9b98a;max-width:1060px}
.wordmark{font:400 clamp(48px,14vw,200px)/.82 var(--disp);text-align:center;white-space:nowrap;letter-spacing:.02em;color:rgba(255,215,122,.12);user-select:none;margin-bottom:-.12em}

/* toast (framework markup) */
.toast{position:fixed;left:50%;bottom:26px;z-index:95;transform:translate(-50%,30px);opacity:0;pointer-events:none;font:400 19px var(--disp);letter-spacing:.02em;color:#fff;background:linear-gradient(180deg,#48d18a,#2fae6a);padding:10px 22px;border-radius:14px;box-shadow:0 5px 0 #16794e,0 14px 30px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .3s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);opacity:1}

/* coin page (framework markup) */
.top{position:sticky;top:0;z-index:25;background:var(--wood2);box-shadow:0 3px 0 var(--plank)}
.top .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font:400 22px var(--disp);color:#ffd77a;text-decoration:none;letter-spacing:.02em}
.nav{display:flex;gap:20px;font:600 14px var(--body);color:#f3dcb4}.nav a{text-decoration:none}.nav a:hover{color:#ffd77a}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:400 15px var(--disp);letter-spacing:.03em;padding:10px 16px;border-radius:12px;border:0;cursor:pointer;white-space:nowrap;color:var(--wood2);background:#fff;box-shadow:0 0 0 2px #e3c993,0 4px 0 var(--plank);text-decoration:none}
.btn.pri{color:#fff;background:linear-gradient(180deg,#36c98a,#22a56c);box-shadow:0 4px 0 #16794e}
.btn.sm{padding:8px 13px;font-size:14px}
.pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--cream);color:var(--wood2);font:600 13px var(--body);text-decoration:none}
.glass{border-radius:16px;background:var(--cream);box-shadow:0 0 0 3px var(--wood2)}
.status{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--body);color:#e6f6fb;background:rgba(255,255,255,.12);padding:7px 13px;border-radius:999px}
.status b{color:#fff}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#48d18a;box-shadow:0 0 10px #48d18a}
.coin{max-width:840px;margin:0 auto;padding:56px 24px 90px;color:#e6f6fb}
.coin .chero{display:flex;align-items:center;gap:18px;margin:18px 0 16px}
.coin .chero img{width:88px;height:88px;border-radius:50%}
.coin h1{font:400 clamp(44px,9vw,84px)/1 var(--disp);color:#fff;text-shadow:0 5px 0 var(--wood2);letter-spacing:.02em;word-break:break-word}
.coin .lead{margin-bottom:10px;font:500 17px/1.5 var(--body)}
.coin h2{font:400 24px var(--disp);color:var(--sun);margin-top:30px;letter-spacing:.02em}
.coin .mut{color:#bfe3ee}
.cabox{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:12px;color:var(--ink)}
.cabox code{flex:1;min-width:0;font:500 14px var(--mono);word-break:break-all}
.coinlive{display:flex;gap:22px;flex-wrap:wrap;padding:16px 20px;margin:14px 0;color:var(--ink)}
.coinlive>div{font:600 12.5px var(--body);color:var(--mut)}.coinlive b{display:block;font:400 24px var(--disp);color:var(--wood2)}.coinlive .up{color:var(--good)}.coinlive .dn{color:var(--bad)}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.links svg{fill:currentColor}
.coin .warn{margin-top:28px;padding:18px 20px;border-radius:14px;background:#fff3cd;box-shadow:0 0 0 3px var(--wood2);color:#5a4a32;font:500 14.5px/1.55 var(--body)}.coin .warn b{color:var(--wood2)}
.back{display:inline-block;margin-top:26px;color:var(--sun);font-weight:600}

@media (max-width:1060px){.tk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tk-how{grid-template-columns:repeat(2,minmax(0,1fr))}.tk-pg{grid-template-columns:minmax(0,1fr)}.nav{display:none}}
@media (max-width:900px){
  .tk-map{width:auto;left:16px;top:156px;right:16px;padding:8px 10px 10px}.tk-card{top:52px}.tk-pads{display:flex}.tk-hint{display:none}.tk-bubble{display:none}.tk-dlg.on{display:block}
  .tk-cab{max-width:calc(100vw - 32px)}.cabar .full{display:none}.cabar .short{display:inline}.tk-tod{top:244px;right:16px}.tk-talk{bottom:104px}
  .tk-bait{grid-template-columns:repeat(2,minmax(0,1fr))}.tk-shop{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .wrap{padding:0 16px}.tk-grid{grid-template-columns:minmax(0,1fr)}.tk-how{grid-template-columns:minmax(0,1fr)}.tk-xp{width:110px}
  .tk-win{top:auto;bottom:10px;left:10px;right:10px;width:auto;max-height:calc(100% - 20px);transform:none;animation-name:tk-up;border-radius:22px;box-shadow:0 0 0 3px var(--wood2),0 0 0 8px var(--plank),0 0 0 10px var(--wood2),0 18px 40px rgba(0,0,0,.5)}
  .tk-whd{padding:10px 12px 10px 14px;gap:10px}.tk-whd h2{font-size:21px}.tk-whd small{font-size:12px}.tk-wnpc{width:40px;height:62px}.tk-wnpc svg{width:40px;height:80px}
  .tk-wbd{padding:14px 14px 18px}.tk-shop{grid-template-columns:repeat(2,minmax(0,1fr))}.tk-bait{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tk-flagbig b{font-size:22px}.tk-big{font-size:34px}.tk-pc{padding:22px}.tk-pc h2{font-size:30px}.tk-lgline{font-size:32px}
  .foot .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot .grid>div:first-child{grid-column:1/-1}
  .tk-row .tk-go{flex:1 1 auto}
  .toast{bottom:auto;top:14px;transform:translate(-50%,-30px)}.toast.on{transform:translate(-50%,0)}
}
@media (max-width:420px){.tk-card{gap:8px;padding:8px 12px 8px 8px}.tk-card b{font-size:18px}.tk-shells{font-size:19px;margin-left:2px}.tk-chip{font-size:12px;padding:6px 10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-reveal]{opacity:1;transform:none}}