/* bubble.css -- the อักษรบับเบิ้ล page's own parts (/bubble/ (live; /preview/ keeps its own copy), 2026-10-27; its buy card 2026-10-28). The rest is shop.css (the
   storefront's frame, cards, segments, pills, swatches) and griptok.css (the 3D Name page's buttons, help lines
   and size buttons, which this page shares by id and class). */

#window bubble-stage{display:block;width:100%;height:100%}

/* the name's fit: how big it came out, or why it does not fit and what would */
#fitMsg{margin:-6px 2px 0;font-size:12px;line-height:1.55;color:var(--ink3)}
#fitMsg:empty{display:none}
#fitMsg.warn{color:#b45309}
#fitMsg .bbfix{margin:6px 6px 0 0;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid #0f172a1f;background:#fff;
  color:var(--ink2);font-size:12px;font-weight:600}
#fitMsg .bbfix:hover{background:#0f172a0a}

/* the big letter: shown in its own font, a grid of the 36 to pick another */
.bbrow{display:flex;align-items:center;gap:10px}
.bbrow .gtghost{min-height:44px;padding:0 14px;font-size:13px}
.bbbig{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:14px;background:#0f172a0d}
.bbbig canvas{width:44px;height:44px}
#glyphGrid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
#glyphGrid[hidden]{display:none}
#glyphGrid button{aspect-ratio:1;min-height:36px;border:0;border-radius:10px;background:#0f172a0d;color:var(--ink2);
  font:700 15px/1 'IBM Plex Mono',monospace}
#glyphGrid button[aria-pressed="true"]{background:var(--blue);color:var(--on-accent)}

/* tiles: the fonts (the letter or the name drawn in each) and the lanes (the letter with the name on it) */
.bbtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bbtiles.bbwide{grid-template-columns:repeat(3,1fr)}
#lanes{grid-template-columns:repeat(3,1fr)}
.bbtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;border:0;
  border-radius:12px;background:#0f172a0a;color:var(--ink3);font-size:11px;font-weight:600;line-height:1.2}
.bbtile canvas{width:100%;max-width:72px;aspect-ratio:1;display:block}
.bbtiles.bbwide .bbtile canvas{max-width:none;aspect-ratio:3/1}
#lanes .bbtile canvas{max-width:96px}
.bbtile[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--blue)}
.bbtile:disabled{opacity:.45}
.bbtile em{font-style:normal;font-weight:500;color:var(--ink4)}
/* the plate's buttons: the font's maker under its name, on one line */
.bbtile[data-plate] em{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbsep{margin-top:4px}
#laneSub.warn{color:#b45309}

/* ชื่อมีขอบ's two sizes: the price under the name of the size, as griptok.css sets the 3D Name's */
#plateSizeCard .segs button{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
#plateSizeCard .segs button small{font-size:11px;font-weight:600;opacity:.75}

/* the colours: the name is white or black only, the cord's own switch under its swatches */
#inkKind,#cordKind{justify-content:center}

/* เครดิตฟอนต์: every font on the page and its maker, at the end of the column */
#credits{margin-top:12px;padding:13px 15px;border-radius:13px;border:1px solid #0f172a14;background:#fff;font-size:12px;
  line-height:1.6;color:var(--ink3)}
#credits h3{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
#credits h4{margin:10px 0 2px;font-size:11px;font-weight:600;color:var(--ink2)}
#credits p{margin:0;font-size:11px;color:var(--ink4)}
#credits ul{margin:0;padding-left:18px}
#credits a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* the buy card's promotion (stage 3): the price before it struck through, and the promotion's name and end under the
   summary -- the styles promo.js injects only when its snapshot holds a promotion, here so they draw without it */
#buyCard .gtprice .ckp-was{margin-right:6px;font-size:14px;font-weight:500;color:var(--ink4,#636d80)}
#buyCard .gtprice.ckp-cut{color:#be123c}
#buyCard .ckp-buy{margin:-6px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:12.5px;line-height:1.5;color:#9f1239}
#testBox{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid #0f172a14}
#testBox .gtghost.wide{margin-top:0}
#testBox[hidden]{display:none}

/* the whole name prints as typed, so its field shows it so (griptok.css sets the 3D Name field to capitals) */
body[data-product="word"] #nameCard #txt,body[data-product="plate"] #nameCard #txt,body[data-product="char"] #nameCard #txt{text-transform:none}

/* ชื่อ+ตัวการ์ตูน: a row of category chips (scrolls sideways on a phone), then the faces of the one open, drawn as they print */
#charCats{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px 4px;scrollbar-width:none}
#charCats::-webkit-scrollbar{display:none}
#charCats button{flex:none;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:#0f172a0d;color:var(--ink2);font-size:12px;font-weight:600}
#charCats button[aria-pressed="true"]{background:var(--blue);color:var(--on-accent)}
.bbtiles.chars{grid-template-columns:repeat(4,1fr)}
.bbtile svg{width:100%;max-width:72px;aspect-ratio:1;display:block}