/* Game Hub chat (talk.js). Everything is prefixed tk- so it does not touch the host page. */
.tk-btn{position:fixed;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff33;background:#1d2433e6;color:#fff;
  font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px #0008;touch-action:manipulation;padding:0}
.tk-btn.on{background:#2f6fed}
.tk-btn.tk-player{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 50px);right:max(8px,env(safe-area-inset-right));width:42px;height:42px;font-size:19px;opacity:.85}
.tk-btn.tk-watch{position:absolute;right:14px;bottom:70px}
.tk-btn.tk-landing{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:54px;height:54px;font-size:24px}
.tk-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ff4d4f;color:#fff;
  font:700 11.5px/20px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #0c0f17}
.tk-badge[hidden],.tk-toast[hidden],.tk-panel[hidden],.tk-note[hidden],.tk-crown[hidden],.tk-mini[hidden]{display:none}

.tk-toast{position:absolute;z-index:59;left:50%;transform:translateX(-50%);top:calc(max(8px,env(safe-area-inset-top)) + 8px);max-width:min(86vw,460px);
  padding:7px 14px;border-radius:999px;background:#0b0d14e0;color:#fff;font:14px/1.4 system-ui,"Malgun Gothic",sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 4px 14px #0009;border:1px solid #ffffff1f}
.tk-toast.tk-landing{position:fixed;top:auto;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 64px)}
.tk-toast.tk-watch{top:56px}

.tk-panel{position:fixed;z-index:61;display:flex;flex-direction:column;background:#121722f5;color:#eef1f8;border:1px solid #2c3446;
  font:14px/1.45 system-ui,-apple-system,"Malgun Gothic",sans-serif;box-shadow:0 -10px 40px #000a;backdrop-filter:blur(8px)}
/* phones: bottom sheet; wide screens: right drawer */
@media (max-width:759px){.tk-panel{left:0;right:0;bottom:var(--tk-kb,0px);height:min(64dvh,520px,calc(var(--tk-vh,100dvh) - 8px));border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .tk-panel.tk-kbd{padding-bottom:0} /* keyboard open (talk.js): sheet sits on the keyboard */}
@media (min-width:760px){.tk-panel{top:12px;right:12px;bottom:12px;width:340px;border-radius:16px}}
.tk-head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 16px;border-bottom:1px solid #232b3b}
.tk-head strong{font-size:15px}
.tk-crown{font-size:11.5px;font-weight:700;color:#ffd36b;background:#ffd36b1f;border:1px solid #ffd36b55;border-radius:999px;padding:1px 8px}
.tk-close{margin-left:auto;background:none;border:0;color:#cfd5e2;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.tk-list{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.tk-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;max-width:100%}
.tk-row time{color:#6f7a90;font-size:11px}
.tk-who{font-size:12px;color:#9fb0cf;font-weight:600;width:100%}
.tk-own{margin-right:3px}
.tk-bubble{background:#232b3c;border-radius:4px 14px 14px 14px;padding:7px 11px;max-width:85%;word-break:break-word;white-space:pre-wrap}
.tk-me{flex-direction:row-reverse;text-align:right}
.tk-me .tk-who{text-align:right}
.tk-me .tk-bubble{background:#2f6fed;color:#fff;border-radius:14px 4px 14px 14px}
.tk-system{justify-content:center}
.tk-sys{font-size:12.5px;color:#b9f5cf;background:#0f3d2499;border:1px solid #3ddc8433;border-radius:999px;padding:3px 10px}
.tk-quick{display:flex;gap:6px;overflow-x:auto;padding:6px 12px;border-top:1px solid #232b3b;scrollbar-width:none}
.tk-quick button{flex:none;background:#1f2738;color:#e6eaf3;border:1px solid #33405a;border-radius:999px;padding:5px 11px;font:inherit;font-size:13px;cursor:pointer;touch-action:manipulation}
.tk-quick button:active{background:#2f6fed}
.tk-note{margin:0;padding:2px 14px;color:#ff9b9b;font-size:12.5px}
.tk-form{display:flex;gap:6px;padding:8px 12px 12px}
.tk-form input{min-width:0;background:#0c0f17;color:#fff;border:1px solid #33405a;border-radius:10px;padding:10px;font:inherit;font-size:16px}
.tk-nick{flex:0 0 76px}
.tk-text{flex:1}
.tk-send{flex:none;background:#2f6fed;color:#fff;border:0;border-radius:10px;padding:0 14px;font:inherit;font-weight:700;cursor:pointer}
.tk-mini{background:none;border:1px solid #3a465b;color:#aab4c6;border-radius:8px;font-size:11px;padding:1px 7px;cursor:pointer}
.tk-head .tk-mini{margin-left:4px}
.tk-danger{color:#ff9b9b;border-color:#7a3a3a}
/* owner tools: tap a message to show 지우기 / 막기 */
.tk-modbox{display:none;gap:4px}
.tk-sel .tk-modbox{display:inline-flex}
.tk-modable{cursor:pointer}
.tk-sel .tk-bubble{outline:1px solid #ffd36b88}

/* ===== 토끼 / 우사기 themes (html[data-theme=bunny|usagi] + html[data-pastel], chosen per browser, talk.js applies it on every page) =====
   Both: pastel sky blue + cream + pink, dark-brown text. Pictures: 토끼 = original /talk/bunny.svg, 우사기 = /talk/usagi/*.webp. */
.tk-theme{background:none;border:1px solid #3a465b;color:#e6eaf3;border-radius:999px;font-size:12px;padding:2px 9px;cursor:pointer;margin-left:auto}
.tk-head .tk-theme+.tk-close{margin-left:0}
html[data-pastel]{--u-bg:#d9ecf7;--u-cream:#fffaf0;--u-line:#f0d6c6;--u-text:#5a4646;--u-muted:#8d7676;--u-pink:#ff9fb4;--u-pink2:#ffc8d3;--u-blue:#8cc4ee;
  --u-face:url(/talk/bunny.svg);--u-peek:url(/talk/bunny.svg);--u-play:url(/talk/bunny.svg);--u-watch:url(/talk/bunny.svg)}
html[data-theme=usagi]{--u-face:url(/talk/usagi/face.webp?v=1);--u-peek:url(/talk/usagi/mascot.webp?v=1);--u-play:url(/talk/usagi/play.webp?v=1);--u-watch:url(/talk/usagi/watch.webp?v=1)}
/* chat */
html[data-pastel] .tk-btn{background:var(--u-cream) var(--u-face) center 62%/78% no-repeat;border:3px solid var(--u-pink2);box-shadow:0 6px 16px #8cc4ee88}
html[data-pastel] .tk-btn .tk-icon{visibility:hidden}
html[data-pastel] .tk-btn.on{background-color:var(--u-pink2)}
html[data-pastel] .tk-badge{background:#ff6f91;box-shadow:0 0 0 2px var(--u-cream)}
html[data-pastel] .tk-toast{background:#fffaf0f2;color:var(--u-text);border:2px solid var(--u-pink2);box-shadow:0 4px 14px #8cc4ee88}
html[data-pastel] .tk-panel{background:#fffaf0f7;color:var(--u-text);border:2px solid var(--u-pink2);box-shadow:0 -6px 30px #7aa9cc66}
html[data-pastel] .tk-panel::before{content:"";position:absolute;right:18px;top:-50px;width:56px;height:62px;background:var(--u-peek) center bottom/contain no-repeat;pointer-events:none}
html[data-pastel] .tk-head{border-color:var(--u-line)}
html[data-pastel] .tk-close{color:var(--u-muted)}
html[data-pastel] .tk-theme,html[data-pastel] .tk-mini{border-color:var(--u-line);color:var(--u-muted)}
html[data-pastel] .tk-who{color:var(--u-muted)}
html[data-pastel] .tk-bubble{background:#fff;border:1.5px solid var(--u-line);color:var(--u-text)}
html[data-pastel] .tk-me .tk-bubble{background:var(--u-pink);border-color:var(--u-pink);color:#fff}
html[data-pastel] .tk-sys{background:#e7f4fd;color:#4a7aa0;border-color:#bfe0f7}
html[data-pastel] .tk-quick{border-color:var(--u-line)}
html[data-pastel] .tk-quick button{background:#fff;color:var(--u-text);border-color:var(--u-pink2)}
html[data-pastel] .tk-quick button:active{background:var(--u-pink2)}
html[data-pastel] .tk-form input{background:#fff;color:var(--u-text);border-color:var(--u-line)}
html[data-pastel] .tk-send{background:var(--u-pink)}
html[data-pastel] .tk-row time{color:#b39d9d}
html[data-pastel] .tk-crown{color:#c98a12;background:#fff3cf}
/* player (ORAS play page) */
html[data-pastel]{color-scheme:light}
html[data-pastel] #player{background:var(--u-bg) radial-gradient(#ffffff99 2px,transparent 2.5px) 0 0/22px 22px}
html[data-pastel] #player>section:not(.tk-panel) button,html[data-pastel] #menu button{background:var(--u-cream);border:2px solid var(--u-line);color:var(--u-text);box-shadow:0 3px 0 var(--u-line)}
html[data-pastel] #player>section:not(.tk-panel) button.on,html[data-pastel] #dpad .d.on{background:var(--u-pink2)}
html[data-pastel] #dpad .d,html[data-pastel] #dpad::after{background:var(--u-cream);border-color:var(--u-line);color:var(--u-muted)}
html[data-pastel] .face.a{background:var(--u-pink)!important;border-color:#f58aa2!important;color:#fff!important}
html[data-pastel] .face.b{background:var(--u-blue)!important;border-color:#73b2e2!important;color:#fff!important}
html[data-pastel] .face.x{background:#ffe29a!important;border-color:#f3cd6b!important}
html[data-pastel] .face.y{background:#c9ecc0!important;border-color:#a8d99c!important}
/* pad decorations (토끼·우사기): the mascot face sits in the middle of the cross and leans toward the pressed direction;
   A B X Y wear little bunny ears that flop when pressed. Pseudo-elements ignore touches, so the hit areas do not change. */
html[data-pastel] #dpad::before{content:"";position:absolute;z-index:1;left:50px;top:50px;width:50px;height:50px;background:var(--u-face) center/86% no-repeat;transition:transform .08s;pointer-events:none}
html[data-pastel] #dpad:has(.up.on)::before{transform:translateY(-5px)}
html[data-pastel] #dpad:has(.down.on)::before{transform:translateY(5px)}
html[data-pastel] #dpad:has(.left.on)::before{transform:translateX(-3px) rotate(-16deg)}
html[data-pastel] #dpad:has(.right.on)::before{transform:translateX(3px) rotate(16deg)}
html[data-pastel] .face::before,html[data-pastel] .face::after{content:"";position:absolute;top:-13px;width:11px;height:19px;border-radius:50%;
  background:radial-gradient(ellipse 30% 55% at 50% 58%,#ffb3c4 92%,#fffaf0 100%);border:2px solid #8d7676;pointer-events:none;transition:transform .1s}
html[data-pastel] .face::before{left:11px;transform:rotate(-20deg)}
html[data-pastel] .face::after{right:11px;transform:rotate(20deg)}
html[data-pastel] .face.on::before{transform:rotate(-55deg) translate(-1px,3px)}
html[data-pastel] .face.on::after{transform:rotate(55deg) translate(1px,3px)}
html[data-pastel] #player .overlay{background:radial-gradient(ellipse at 50% 30%,#fffaf0,#d9ecf7ee 75%)}
html[data-pastel] #player .overlay .card::before{content:"";display:block;width:110px;height:120px;margin:0 auto 4px;background:var(--u-play) center/contain no-repeat}
html[data-pastel] #player h1,html[data-pastel] #player p,html[data-pastel] #menu{color:var(--u-text)}
html[data-pastel] #player .eyebrow{color:#e57a94}
html[data-pastel] #player .hint{color:var(--u-muted)}
html[data-pastel] #player .primary{background:var(--u-pink)!important;border:0!important;color:#fff!important;box-shadow:0 4px 0 #f08aa2!important}
html[data-pastel] #menu{background:#fffaf0f5;border:2px solid var(--u-pink2)}
html[data-pastel] #menu #home{background:#fff;border-color:var(--u-line);color:var(--u-text)}
html[data-pastel] #menuButton{background:#fffaf0cc;color:var(--u-text);opacity:.9}
html[data-pastel] #speedBadge,html[data-pastel] .small.speed.on,html[data-pastel] #speedSet .speeds button[aria-pressed=true]{background:var(--u-pink)!important;border-color:var(--u-pink)!important;color:#fff!important}
html[data-pastel] #httpsGame,html[data-pastel] #fallback{background:var(--u-bg)}
/* watch page */
html[data-pastel] #watch{background:var(--u-bg) radial-gradient(#ffffff99 2px,transparent 2.5px) 0 0/22px 22px;color:var(--u-text)}
html[data-pastel] #watch header,html[data-pastel] #watch footer{background:var(--u-cream);border-bottom:2px solid var(--u-line)}
html[data-pastel] #watch #state,html[data-pastel] #watch #room{color:var(--u-muted)}
html[data-pastel] #watch .badge{background:var(--u-pink)}
html[data-pastel] #watch>footer button,html[data-pastel] #watch #overlay button{background:#fff;border:2px solid var(--u-line);color:var(--u-text)}
html[data-pastel] #watch #overlay button.primary{background:var(--u-pink);border-color:var(--u-pink);color:#fff}
html[data-pastel] #watch #overlay{background:#d9ecf7cc}
html[data-pastel] #watch .card{background:var(--u-cream);border:2px solid var(--u-pink2)}
html[data-pastel] #watch .card::before{content:"";display:block;width:90px;height:98px;margin:0 auto;background:var(--u-watch) center/contain no-repeat}
html[data-pastel] #watch .eyebrow{color:#e57a94}
html[data-pastel] #watch .hint{color:var(--u-muted)}
/* ===== 📸 / 🃏 brag (play page row, pictures and cards inside the chat only; the toast stays text) ===== */
.tk-brag,.tk-pick{display:flex;gap:6px;overflow-x:auto;padding:6px 12px 0;scrollbar-width:none;flex-wrap:nowrap}
.tk-brag[hidden],.tk-pick[hidden],.tk-lightbox[hidden]{display:none}
.tk-brag button,.tk-pick button{flex:none;background:#2a2340;color:#f0e9ff;border:1px solid #5a4a8a;border-radius:999px;padding:5px 11px;font:inherit;font-size:13px;cursor:pointer;touch-action:manipulation}
.tk-brag button:disabled{opacity:.5}
.tk-pick{flex-wrap:wrap;padding-top:8px}
.tk-pick-note{width:100%;font-size:12px;color:#aab4c6}
.tk-pic{display:block;position:relative;padding:0;border:0;background:#000;border-radius:10px;overflow:hidden;cursor:zoom-in;width:200px;max-width:100%}
.tk-pic img{display:block;width:100%;object-fit:cover;object-position:top}
.tk-pic.tk-top img{aspect-ratio:5/3}
.tk-pic.tk-both img{aspect-ratio:5/6}
.tk-pic .tk-game{position:absolute;left:6px;bottom:6px;font-size:10.5px;background:#000a;color:#fff;border-radius:999px;padding:1px 7px}
.tk-caption{display:block;margin-top:5px}
.tk-gone{font-size:12px;color:#8b95a3}
.tk-lightbox{position:fixed;inset:0;z-index:70;background:#000000f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}
.tk-lightbox .tk-pic{width:min(94vw,800px,calc(86vh * 5 / 3));cursor:zoom-out}
.tk-lightbox .tk-pic.tk-both{width:min(94vw,800px,calc(86vh * 5 / 6))}
.tk-lightbox p{margin:0;color:#cfd5e2;font-size:12px}
.tk-pkm{text-align:left;display:flex;gap:10px;align-items:center;min-width:200px;padding:4px 2px}
.tk-pkm img{width:72px;height:72px;image-rendering:pixelated;flex:none;background:radial-gradient(#ffffff22,transparent 70%);border-radius:12px}
.tk-pkm-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-pkm-info b{font-size:16px}
.tk-pkm-info small{font-size:11.5px;opacity:.75}
.tk-lv{font-size:12.5px;opacity:.85}
.tk-gender.tk-m{color:#6aa7ff}.tk-gender.tk-f{color:#ff7aa2}
.tk-star{font-size:12px;font-weight:700;color:#ffcf4a}
.tk-moves{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.tk-moves i{font-style:normal;font-size:11px;border:1px solid #ffffff33;border-radius:6px;padding:0 5px}
.tk-pkm .tk-game{font-size:10.5px;opacity:.6;margin-top:2px}
.tk-shiny{background:linear-gradient(135deg,#ffe9a833,#ffffff00 60%);border-radius:10px}
.tk-egg{font-size:40px}
html[data-pastel] .tk-brag button,html[data-pastel] .tk-pick button{background:#fff;color:var(--u-text);border-color:var(--u-blue)}
html[data-pastel] .tk-pick-note{color:var(--u-muted)}
html[data-pastel] .tk-moves i{border-color:var(--u-line)}

.tk-row.tk-shot .tk-bubble,.tk-row.tk-card .tk-bubble{display:block;padding:6px}
.tk-row.tk-card .tk-bubble,.tk-me.tk-card .tk-bubble{background:#1b2232;color:#eef1f8;border:1px solid #33405a}
html[data-pastel] .tk-row.tk-card .tk-bubble,html[data-pastel] .tk-me.tk-card .tk-bubble{background:#fff;color:var(--u-text);border:1.5px solid var(--u-pink2)}
html[data-pastel] .tk-star{color:#e0a100}.tk-save{font:inherit;font-weight:700;font-size:15px;background:#2f6fed;color:#fff;border:0;border-radius:999px;padding:9px 22px;cursor:pointer;touch-action:manipulation}
html[data-pastel] .tk-save{background:var(--u-pink)}.tk-tools{display:flex;gap:10px;justify-content:center}

/* ===== games.bongnas.com list (body.hub-site): header theme switch (talk.js) + 토끼 / 우사기 look ===== */
body.hub-site>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tk-themes{display:flex;gap:2px;padding:3px;border-radius:999px;background:#1a2030;border:1px solid #2a3040}
.tk-themes button{font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;padding:6px 11px;background:none;color:#a6b1ca;cursor:pointer;touch-action:manipulation}
.tk-themes button[aria-pressed=true]{background:#eff2fa;color:#11151f}
html[data-pastel]:has(body.hub-site){color-scheme:light;background:var(--u-bg) radial-gradient(#ffffffaa 2px,transparent 2.5px) 0 0/24px 24px;color:var(--u-text)}
html[data-pastel] .hub-site>header{border-color:var(--u-line)}
html[data-pastel] .hub-site .brand{color:var(--u-text)}
html[data-pastel] .hub-site .brand span,html[data-pastel] .hub-site .intro,html[data-pastel] .hub-site .search,html[data-pastel] .hub-site #message,
html[data-pastel] .hub-site aside,html[data-pastel] .hub-site footer,html[data-pastel] .hub-site .description,html[data-pastel] .hub-site .host{color:var(--u-muted)}
html[data-pastel] .hub-site .tk-themes{background:#fffaf0e6;border:2px solid var(--u-pink2)}
html[data-pastel] .hub-site .tk-themes button{color:var(--u-muted)}
html[data-pastel] .hub-site .tk-themes button[aria-pressed=true]{background:var(--u-pink);color:#fff}
html[data-pastel] .hub-site .eyebrow{color:#e57a94;font-weight:700}
html[data-pastel] .hub-site h1{text-shadow:0 2px 0 #fff}
html[data-pastel] .hub-site input{background:#fff;color:var(--u-text);border:2px solid var(--u-line);border-radius:999px;padding:13px 18px}
html[data-pastel] .hub-site .game{background:var(--u-cream);border:2.5px solid var(--u-pink2);border-radius:26px;box-shadow:0 8px 0 #f6dfe4,0 14px 30px -14px #7aa9cc}
html[data-pastel] .hub-site .cover{background:linear-gradient(135deg,#cdbcff,#9fd0f5)}
html[data-pastel] .hub-site [data-series=pokemon] .cover{background:linear-gradient(135deg,#ffb3c4,#9fd0f5)}
html[data-pastel] .hub-site .cover span{color:#fff;text-shadow:0 2px 0 #0000001f}
html[data-pastel] .hub-site .cover .count{background:#fff;color:var(--u-text);text-shadow:none}
html[data-pastel] .hub-site h2{color:var(--u-text)}
html[data-pastel] .hub-site .game h2::after{content:"";display:inline-block;width:24px;height:26px;margin-left:6px;vertical-align:-4px;background:var(--u-face) center/contain no-repeat}
html[data-pastel] .hub-site .play{background:var(--u-pink);color:#fff;border-radius:999px;box-shadow:0 4px 0 #f08aa2}
html[data-pastel] .hub-site .turn{background:#fff;border:2px solid var(--u-blue);color:#4a7aa0;border-radius:999px}
html[data-pastel] .hub-site .guide,html[data-pastel] .hub-site .back{color:#4a7aa0}
html[data-pastel] .hub-site aside{border-color:var(--u-line)}
html[data-pastel] .hub-site main{position:relative}
html[data-pastel] .hub-site main::before{content:"";position:absolute;right:clamp(16px,5vw,56px);top:44px;width:clamp(78px,13vw,140px);aspect-ratio:435/600;
  background:var(--u-peek) center bottom/contain no-repeat;filter:drop-shadow(0 6px 10px #7aa9cc66);animation:tk-bob 3s ease-in-out infinite;pointer-events:none}
@keyframes tk-bob{50%{transform:translateY(-6px) rotate(-3deg)}}
@media(max-width:700px){html[data-pastel] .hub-site .eyebrow,html[data-pastel] .hub-site h1,html[data-pastel] .hub-site .intro{padding-right:92px}}
@media(prefers-reduced-motion:reduce){html[data-pastel] .hub-site main::before{animation:none}}