:root { --navy:#1d3557; --ink:#1b2430; --cream:#fbf5e6; --paper:#f3e6c8; --rope:#b8935a; --accent:#ff8a1f; --red:#c0392b; --good:#3c9a5f; --warn:#e8a33a; --bad:#d9534f; --muted:#7a7f88;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#cfe0ec; font:15px/1.35 var(--font); color:var(--ink); }
#c { position:fixed; inset:0; width:100%; height:100%; display:block; }
#leaders, #guides { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
#guides { z-index:5; }
#labels, #guideLabels, #bubbles { position:fixed; inset:0; pointer-events:none; }
#guideLabels { z-index:6; } #bubbles { z-index:7; }
.hidden { display:none !important; }
kbd { display:inline-flex; align-items:center; justify-content:center; min-width:1.7em; height:1.7em; padding:0 6px; border-radius:6px; background:linear-gradient(#fffdf6,#e9e1cf); border:1px solid #c9bfa9; border-bottom-width:3px; font:700 13px/1 var(--font); color:#3a3a3a; }
button { font-family:var(--font); }

/* ---------- mission pill */
#mission { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:12; display:flex; flex-direction:column; align-items:center; gap:7px; }
.pill { display:flex; align-items:center; gap:12px; background:rgba(40,46,56,.86); color:#fff; padding:8px 12px 8px 8px; border-radius:30px; font-weight:800; font-size:21px; box-shadow:0 6px 18px rgba(0,0,0,.25); backdrop-filter: blur(4px); transition: transform .2s; }
.pill.pop { animation: pop .5s; }
.micon { width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #4f7fc0, #1d3557); display:flex; align-items:center; justify-content:center; font-size:21px; border:2px solid #fff; }
.why { width:26px; height:26px; border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-weight:800; cursor:pointer; font-size:14px; }
.why:hover { background:rgba(255,255,255,.35); }
.dots { display:flex; gap:7px; }
.dots i { width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.85); border:2px solid #2f6db5; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.dots i.on { background:#2f6db5; } .dots i.cur { background:#fff; border-color:var(--accent); transform:scale(1.2); }
.chip { background:rgba(251,245,230,.95); color:var(--ink); padding:5px 14px; border-radius:16px; font-weight:700; font-size:15px; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.choices { display:flex; gap:10px; }
.choices button { font-size:18px; font-weight:800; padding:10px 22px; border-radius:22px; border:3px solid #fff; background:var(--cream); cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.choices button.right { background:var(--good); color:#fff; } .choices button.wrong { background:var(--bad); color:#fff; }
.whycard { max-width:420px; background:var(--cream); border-radius:14px; padding:12px 16px; font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.2); border:2px solid #fff; }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.12); } 100% { transform:scale(1); } }
.stamp { position:fixed; left:50%; top:24%; transform:translate(-50%,-50%); font-size:64px; z-index:20; pointer-events:none; animation: stamp .9s ease-out forwards; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
@keyframes stamp { 0% { transform:translate(-50%,-50%) scale(.3); opacity:0; } 30% { transform:translate(-50%,-50%) scale(1.25); opacity:1; } 60% { transform:translate(-50%,-50%) scale(1); } 100% { transform:translate(-50%,-90%) scale(1); opacity:0; } }

/* ---------- key prompt */
#keyPrompt { position:fixed; left:50%; bottom:92px; transform:translateX(-50%); z-index:12; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
#keyPrompt .caps { display:flex; gap:10px; position:relative; }
#keyPrompt .cap { min-width:76px; height:76px; padding:0 14px; border-radius:16px; background:linear-gradient(#fffdf6,#e5dcc6); border:2px solid #c9bfa9; border-bottom-width:7px; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:800; color:#333; box-shadow:0 0 0 4px rgba(255,170,60,.85), 0 0 28px 8px rgba(255,160,40,.55); animation: press 1.1s ease-in-out infinite; }
#keyPrompt .cap.wide { font-size:22px; }
#keyPrompt .lbl { background:rgba(40,46,56,.88); color:#fff; font-weight:800; font-size:19px; padding:5px 16px; border-radius:16px; box-shadow:0 0 0 3px rgba(255,170,60,.7); }
#keyPrompt .rays { position:absolute; inset:-26px; pointer-events:none; }
@keyframes press { 0%,70%,100% { transform:translateY(0); } 80% { transform:translateY(4px); border-bottom-width:3px; } }

/* ---------- guide labels */
.glabel { position:absolute; transform:translate(-50%,-50%); background:var(--accent); color:#fff; font-weight:800; font-size:15px; padding:4px 11px; border-radius:14px; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.glabel.target { background:rgba(255,138,31,.95); font-size:15px; }
.glabel small { font-weight:600; opacity:.9; margin-left:4px; }
.gkey { position:absolute; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:13px; background:linear-gradient(#fffdf6,#e5dcc6); border:2px solid #c9bfa9; border-bottom-width:6px; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; color:#333; box-shadow:0 0 0 3px rgba(255,170,60,.9), 0 0 22px 6px rgba(255,160,40,.5); }
.gkey + .glabel, .gkey small { display:block; }
.gtext { position:absolute; transform:translate(-50%,0); color:#fff; font-weight:800; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; }

/* ---------- speech bubbles (above the sailors) */
.bubble { position:absolute; transform:translate(-50%,-100%); background:#fff; color:#222; font-weight:800; font-size:17px; padding:9px 14px; border-radius:18px; border:3px solid #222; max-width:280px; text-align:center; line-height:1.25; box-shadow:0 4px 10px rgba(0,0,0,.2); animation: bub .25s ease-out; }
.bubble::after { content:''; position:absolute; left:50%; bottom:-14px; margin-left:-6px; border:9px solid transparent; border-top:12px solid #222; border-bottom:0; }
.bubble::before { content:''; position:absolute; left:50%; bottom:-9px; margin-left:-4px; border:7px solid transparent; border-top:9px solid #fff; border-bottom:0; z-index:1; }
.bubble.helm { background:#1d3557; color:#fff; border-color:#fff; }
.bubble.helm::before { border-top-color:#1d3557; } .bubble.helm::after { border-top-color:#fff; }
.bubble.fade { opacity:0; transition:opacity .4s; }
@keyframes bub { from { transform:translate(-50%,-80%) scale(.6); opacity:0; } to { transform:translate(-50%,-100%) scale(1); opacity:1; } }

/* ---------- wind dial */
#dial { position:fixed; top:14px; right:16px; z-index:10; width:200px; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
#compass { width:180px; height:180px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.3)); }
.speed { margin-top:-4px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.55); font-weight:800; }
.speed b { font-size:38px; } .speed small { font-size:20px; margin-left:3px; }
.pos { color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.6); margin-top:-4px; }
.sails { display:flex; gap:8px; margin-top:5px; }
.sail { width:26px; height:30px; display:inline-block; clip-path: polygon(45% 0, 45% 100%, 0 100%); background:var(--good); filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); position:relative; }
.sail.jib { clip-path: polygon(55% 0, 100% 100%, 55% 100%); }
.sail.warn { background:var(--warn); animation: flap .2s infinite alternate; } .sail.bad { background:var(--bad); }
@keyframes flap { from { transform:skewX(-6deg); } to { transform:skewX(6deg); } }
.yarns { display:flex; gap:12px; margin-top:6px; }
.yarns i { width:34px; height:4px; border-radius:2px; transform-origin:left center; }
#ttW { background:#3f8f4f; } #ttL { background:#c23b2e; }
.yarns i.flutter { animation: flutter .18s infinite alternate; }
@keyframes flutter { from { transform:rotate(-28deg) scaleX(.8); } to { transform:rotate(30deg) scaleX(.9); } }

/* ---------- round buttons & key strip */
#roundBtns { position:fixed; left:18px; bottom:18px; z-index:10; display:flex; align-items:flex-end; gap:12px; }
.rb { width:64px; height:64px; border-radius:50%; border:4px solid var(--cream); background:radial-gradient(circle at 40% 35%, #4b5563, #2a2f38); font-size:28px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.35); transition: transform .1s; }
.rb:hover { transform:scale(1.07); }
.mini { display:flex; flex-direction:column; gap:6px; }
.rbs { width:34px; height:34px; border-radius:50%; border:2px solid var(--cream); background:rgba(42,47,56,.8); color:#fff; font-size:15px; cursor:pointer; }
#keyStrip { position:fixed; left:16px; bottom:16px; flex-direction:column; align-items:flex-start; gap:5px; z-index:10; display:flex; gap:12px; background:rgba(40,46,56,.62); color:#fff; padding:7px 12px; border-radius:14px; font-size:12px; font-weight:700; align-items:center; }
#keyStrip span { display:flex; align-items:center; gap:3px; }
#keyStrip kbd { font-size:11px; height:1.6em; min-width:1.6em; }
#slowmo { position:fixed; top:118px; left:50%; transform:translateX(-50%); z-index:13; background:rgba(40,46,56,.85); color:#fff; padding:6px 16px; border-radius:16px; font-weight:800; }
body.slow #c { filter: saturate(1.15) contrast(1.05); }
body.slow::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:4; box-shadow: inset 0 0 160px 40px rgba(20,25,35,.55); }
#toast { position:fixed; top:130px; left:50%; transform:translateX(-50%); z-index:30; display:flex; flex-direction:column; align-items:center; gap:6px; }
#toast div { background:rgba(40,46,56,.9); color:#fff; padding:8px 16px; border-radius:16px; font-weight:700; animation: pop .3s; }

/* ---------- title card & done card */
#titleCard { position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); z-index:25; text-align:center; pointer-events:none; animation: tc 2.4s ease-in-out forwards; }
.tc-ic { font-size:72px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.tc-title { font-size:56px; font-weight:900; color:#fff; text-shadow:0 4px 14px rgba(0,0,0,.45); letter-spacing:.5px; }
.tc-goal { font-size:22px; font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); }
@keyframes tc { 0% { opacity:0; transform:translate(-50%,-40%) scale(.9); } 15%,75% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-60%); } }
.overlay { position:fixed; inset:0; background:rgba(15,30,50,.35); backdrop-filter: blur(2px); z-index:40; display:flex; align-items:center; justify-content:center; }
.done-inner { background:var(--cream); border:5px solid #fff; border-radius:28px; padding:22px 40px 26px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.35); animation: pop .5s; min-width:340px; }
.stars { font-size:58px; letter-spacing:6px; }
.stars span { display:inline-block; animation: starIn .5s backwards; } .stars span.off { filter:grayscale(1) opacity(.35); }
.stars span:nth-child(2) { animation-delay:.2s; } .stars span:nth-child(3) { animation-delay:.4s; }
@keyframes starIn { from { transform:scale(0) rotate(-90deg); } to { transform:scale(1); } }
.d-title { font-size:30px; font-weight:900; color:var(--navy); }
.d-stats { color:var(--muted); font-weight:700; margin:6px 0 16px; font-size:16px; }
.d-stats .tip { display:block; color:var(--ink); font-weight:600; font-size:14px; margin-top:6px; }
.d-btns { display:flex; gap:14px; justify-content:center; align-items:center; }
.d-btns .big { width:84px; height:84px; border-radius:50%; border:5px solid #fff; background:radial-gradient(circle at 40% 35%, #5aa86f, #2f7d4f); color:#fff; font-size:36px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.3); }
.d-btns .round { width:60px; height:60px; border-radius:50%; border:4px solid #fff; background:#e9dfc8; font-size:26px; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.2); }

/* ---------- chart menu */
#menu { position:fixed; inset:0; z-index:40; background:#1b2a35; display:flex; align-items:center; justify-content:center; }
.chart { position:relative; width:min(100vw, 150vh); aspect-ratio:1536/1024; background:url(img_chart.jpg) center/cover; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.logo { position:absolute; left:3.5%; top:4%; display:flex; align-items:center; gap:10px; }
.logo svg { width:clamp(50px,7vw,110px); filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff); }
.logo b, .logo i { display:block; font-style:normal; font-weight:900; line-height:.95; font-size:clamp(28px,4.4vw,66px); -webkit-text-stroke: 2px #fff; paint-order: stroke fill; text-shadow:0 4px 0 rgba(0,0,0,.15); }
.logo b { color:var(--navy); } .logo i { color:#c0392b; margin-left:12%; }
#route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#nodes, #practice { position:absolute; inset:0; pointer-events:none; }
.node { position:absolute; transform:translate(-50%,-50%); width:clamp(84px,11.5vw,170px); aspect-ratio:1; pointer-events:auto; cursor:pointer; border:0; background:none; padding:0; }
.node .buoy { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 50% 38%, #fffaf0 0 55%, #f1e4c6 56% 61%, #c0392b 62% 78%, #8e2a20 79% 82%, #3b4250 83% 100%); box-shadow:0 10px 18px rgba(0,0,0,.35); transition: transform .15s; }
.node:hover .buoy { transform:scale(1.05); }
.node .face { position:absolute; inset:14% 14% 30%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--navy); font-weight:900; }
.node .num { position:absolute; left:20%; top:20%; font-size:clamp(16px,2.2vw,32px); font-weight:900; color:var(--navy); }
.node .ico { font-size:clamp(22px,3vw,44px); line-height:1; }
.node .nm { font-size:clamp(13px,1.6vw,24px); }
.node .stars3 { position:absolute; left:50%; bottom:1%; transform:translateX(-50%); white-space:nowrap; }
.node .stars3 .off { filter:grayscale(1) brightness(1.6) opacity(.6); }
.node .lockic { position:absolute; left:50%; bottom:4%; transform:translateX(-50%); font-size:clamp(18px,2.4vw,34px); }
.node.locked { cursor:not-allowed; } .node.locked .face { opacity:.55; }
.node.next .buoy { box-shadow:0 0 0 6px rgba(255,214,102,.55), 0 0 40px 14px rgba(255,200,80,.6), 0 10px 18px rgba(0,0,0,.35); }
.token { position:absolute; left:50%; top:-34%; transform:translateX(-50%); font-size:clamp(34px,4.6vw,66px); animation: bobt 1.6s ease-in-out infinite; filter:drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
@keyframes bobt { 0%,100% { transform:translate(-50%,0) rotate(-4deg); } 50% { transform:translate(-50%,-8px) rotate(4deg); } }
#practice { display:flex; justify-content:center; align-items:flex-end; gap:1.4%; padding-bottom:2.2%; }
#practice::before { content:''; position:absolute; left:20%; right:20%; bottom:1.2%; height:12%; background:linear-gradient(#8b5a2b,#6e4520); border-radius:10px; box-shadow:0 4px 0 #4a2e14, 0 8px 16px rgba(0,0,0,.35); z-index:-1; }
.ptile { pointer-events:auto; width:clamp(64px,8.4vw,128px); aspect-ratio:1; border-radius:50%; border:clamp(3px,.45vw,7px) solid #c9a86a; background:radial-gradient(circle at 45% 35%, #fff9ea, #ecdcb8); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 0 3px #8b6a3a, 0 6px 14px rgba(0,0,0,.35); transition: transform .12s; position:relative; }
.ptile:hover { transform:translateY(-4px) scale(1.05); }
.ptile .ico { font-size:clamp(22px,3vw,46px); line-height:1; } .ptile .nm { font-weight:900; color:var(--navy); font-size:clamp(11px,1.3vw,19px); }
.ptile .chk { position:absolute; top:4%; right:6%; font-size:clamp(12px,1.4vw,20px); }
.cornerbtn { position:absolute; bottom:2.5%; width:clamp(48px,6vw,90px); aspect-ratio:1; border-radius:50%; border:clamp(3px,.45vw,7px) solid #c9a86a; background:radial-gradient(circle at 45% 35%, #fff9ea, #ecdcb8); font-size:clamp(22px,3vw,44px); color:var(--navy); cursor:pointer; box-shadow:0 0 0 3px #8b6a3a, 0 6px 14px rgba(0,0,0,.35); }
.cornerbtn.left { left:2.5%; } .cornerbtn.right { right:2.5%; } .cornerbtn.right2 { right:9.5%; }

/* ---------- explore panel & dialogs */
.panel { position:fixed; background:rgba(251,245,230,.94); border:3px solid #fff; border-radius:18px; box-shadow:0 6px 22px rgba(0,0,0,.2); z-index:10; }
#explorePanel { top:16px; left:16px; width:300px; max-height:calc(100% - 120px); overflow:auto; padding:12px; }
.ex-tabs { display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.ex-tabs button { font-weight:800; border:2px solid #e2d6bb; background:#fff; border-radius:16px; padding:3px 14px; cursor:pointer; }
.ex-tabs button.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.ex-all { margin-left:auto; font-size:12px; color:var(--muted); display:flex; gap:4px; align-items:center; }
.ex-info { background:#fff; border-radius:12px; padding:10px 12px; min-height:56px; margin-bottom:8px; font-size:14px; }
.ex-info h3 { margin:0 0 3px; color:var(--navy); font-size:19px; }
#exList h4 { margin:8px 0 3px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
#exList button { font-size:13px; font-weight:700; border:2px solid #eadfc6; background:#fff; border-radius:14px; padding:2px 9px; margin:2px; cursor:pointer; }
#exList button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.plabel { position:absolute; transform:translate(-50%,-100%); background:var(--accent); color:#fff; font-weight:800; padding:3px 10px; border-radius:10px; white-space:nowrap; font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.plabel.small { background:rgba(29,53,87,.85); font-weight:600; font-size:11px; padding:1px 6px; transform:translate(-50%,-50%); }
.menu-inner { background:var(--cream); border:4px solid #fff; border-radius:22px; padding:22px 28px; width:calc(100% - 40px); max-height:calc(100% - 40px); overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.menu-inner.narrow { max-width:560px; }
.menu-inner h2 { margin:0 0 12px; color:var(--navy); }
.keygrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin-bottom:16px; }
.keygrid div { display:flex; align-items:center; gap:4px; font-size:14px; } .keygrid span { margin-left:6px; }
.set { display:flex; align-items:center; gap:10px; margin:12px 0; font-weight:600; } .set input[type=range] { flex:1; }
button.primary { font-weight:800; border:0; border-radius:16px; padding:9px 22px; background:var(--navy); color:#fff; cursor:pointer; font-size:16px; }

#explorePanel.quizmode { width:270px; text-align:center; }
.qmeta { font-size:13px; color:var(--muted); font-weight:700; }
.qask { font-size:15px; font-weight:700; color:var(--muted); margin-top:4px; }
.qpart { font-size:30px; font-weight:900; color:var(--navy); line-height:1.1; margin:2px 0 6px; }
.qpart.ok { color:var(--good); }
#explorePanel.quizmode .ex-info { padding:14px; } #explorePanel.quizmode .ex-all { display:none; }

#calls { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:11; display:flex; gap:6px; background:rgba(40,46,56,.62); padding:6px 8px; border-radius:16px; max-width:calc(100% - 640px); flex-wrap:wrap; justify-content:center; }
#calls button { display:flex; align-items:center; gap:5px; border:0; background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:12.5px; padding:4px 9px 4px 4px; border-radius:11px; cursor:pointer; white-space:nowrap; transition: background .15s; }
#calls button:hover { background:rgba(255,255,255,.25); }
#calls button kbd { font-size:12px; }
#calls button.glow { background:var(--accent); box-shadow:0 0 0 2px #fff, 0 0 16px 4px rgba(255,160,40,.7); animation: pop 1s infinite; }
#calls .sep { width:1px; background:rgba(255,255,255,.25); margin:2px 2px; }
#calls { max-width:calc(100% - 340px); }
#keyStrip span { width:100%; justify-content:flex-start; }
#calls { max-width:calc(100% - 300px); flex-wrap:wrap; }

.util { position:absolute; top:3%; right:13%; display:flex; gap:10px; }
.util button { width:clamp(40px,4vw,58px); aspect-ratio:1; border-radius:50%; border:3px solid #c9a86a; background:radial-gradient(circle at 45% 35%, #fff9ea, #ecdcb8); font-size:clamp(17px,1.8vw,26px); color:var(--navy); font-weight:900; cursor:pointer; box-shadow:0 0 0 2px #8b6a3a, 0 4px 10px rgba(0,0,0,.3); outline:none; }
.util button:hover { transform:scale(1.06); }
button:focus-visible { outline:none; } button:focus { outline:none; }
#practice::before { left:8%; right:8%; }
#tags { position:fixed; inset:0; pointer-events:none; z-index:6; }
.tag { position:absolute; transform:translate(-50%,-100%); background:rgba(40,46,56,.8); color:#fff; font-weight:800; font-size:13px; padding:2px 9px; border-radius:10px; white-space:nowrap; }
.tag b { color:#ffd23f; margin-right:4px; }

/* painted icons */
.icn { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.icn.inl { display:inline-block; width:1.35em; height:1.35em; vertical-align:-.32em; filter:none; }
.micon { background:radial-gradient(circle at 35% 35%, #fffaf0, #e9dcbc) !important; padding:3px; }
.node .ico { width:clamp(34px,4.6vw,66px); height:clamp(34px,4.6vw,66px); }
.ptile .ico { width:clamp(30px,4.2vw,62px); height:clamp(30px,4.2vw,62px); }
.token { width:clamp(46px,6vw,88px); height:clamp(46px,6vw,88px); top:-48% !important; }
.lockic { width:clamp(26px,3vw,44px); height:clamp(26px,3vw,44px); bottom:0 !important; }
.chk { width:clamp(18px,2vw,30px); height:clamp(18px,2vw,30px); top:0 !important; right:2% !important; }
.stars span, .stars3 span { display:inline-block; width:1em; height:1em; }
.stars span.off .icn, .stars3 .off .icn { filter:grayscale(1) brightness(1.5) opacity(.45); }
.stars3 { display:flex; gap:2px; } .stars3 span { width:clamp(18px,2.4vw,34px); height:clamp(18px,2.4vw,34px); }
.stars span { width:62px; height:62px; margin:0 4px; }
.tc-ic { width:110px; height:110px; margin:0 auto; }
.util button { padding:5px; } .d-btns .big { padding:16px; } .d-btns .round { padding:10px; }
.stamp { width:110px; height:110px; }
.glabel .icn.inl, .chip .icn.inl { width:1.25em; height:1.25em; }