/* ==========================================================
   Kopitiam world: the Tarik Thinking page.
   A kopitiam at night: roast-brown dark, steel mugs, cream order
   chits, the menu board, a house-rules sign, mosaic floor tiles.
   Only loads on /tarik-thinking/. Builds on main.css + tarik.css.
   ========================================================== */

.world-kopitiam {
	--k-roast: #150C07;
	--k-roast-2: #20130B;
	--k-wood: #2B1A0F;
	--k-line: rgba(246, 230, 203, 0.14);
	--k-line-2: rgba(246, 230, 203, 0.26);
	--k-cream: #F6E6CB;
	--k-cream-2: #D8C2A0;
	--k-cream-3: #A38D70;
	--k-paper: #F4E7CE;
	--k-ink: #2A170B;
	--k-tea: #D98E45;
	--k-amber: #FFB547;
	--k-green: #2F8A63;     /* kopitiam green: enamel rims and signboards */
	--k-red: #D2462B;       /* ochit stamps and the house-rules sign */
	--k-steel: #C9CED6;
	--f-kopi: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;

	/* Re-point the shared tokens so shared components (FAQ, tabs, strip) turn warm. */
	--bg: var(--k-roast);
	--bg-2: var(--k-roast-2);
	--bg-3: var(--k-wood);
	--panel: rgba(43, 26, 15, 0.7);
	--panel-solid: #24160D;
	--line: var(--k-line);
	--line-2: var(--k-line-2);
	--ink: var(--k-cream);
	--ink-2: var(--k-cream-2);
	--ink-3: var(--k-cream-3);
	--human: var(--k-amber);
	color: var(--k-cream);
	background:
		radial-gradient(900px 500px at 80% -10%, rgba(255, 181, 71, 0.13), transparent 60%),
		radial-gradient(700px 500px at 0% 40%, rgba(47, 138, 99, 0.1), transparent 60%),
		var(--k-roast);
}
/* Old kopitiam floor: tiny mosaic tiles instead of the lab grid. */
.world-kopitiam::before {
	background-image:
		linear-gradient(45deg, rgba(246, 230, 203, 0.035) 25%, transparent 25%, transparent 75%, rgba(246, 230, 203, 0.035) 75%),
		linear-gradient(45deg, rgba(246, 230, 203, 0.035) 25%, transparent 25%, transparent 75%, rgba(246, 230, 203, 0.035) 75%);
	background-size: 28px 28px;
	background-position: 0 0, 14px 14px;
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
.world-kopitiam ::selection { background: rgba(255, 181, 71, 0.45); }
.world-kopitiam .site-main a:not(.kp-btn):not(.btn) { color: var(--k-amber); }
.kp-btn[hidden] { display: none; }
.world-kopitiam :focus-visible { outline-color: var(--k-amber); }
.world-kopitiam .site-header { background: rgba(21, 12, 7, 0.82); border-bottom-color: var(--k-line); }

.kp-kicker { margin: 0 0 0.75rem; font: 500 0.74rem/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-amber); }
.kp-kicker--dark { color: var(--k-red); }
.kp-section { padding: clamp(3rem, 2.25rem + 3.5vw, 5.5rem) 0; position: relative; }
.kp-section--counter { background: linear-gradient(180deg, rgba(43, 26, 15, 0.75), rgba(32, 19, 11, 0.4)); border-block: 1px solid var(--k-line); }
.kp-head { display: grid; gap: 0.25rem; max-width: 64ch; margin-bottom: 2rem; }
.kp-head h2, .world-kopitiam h2, .world-kopitiam h3 { font-family: var(--f-kopi); letter-spacing: -0.02em; }
.kp-head h2 { font-size: var(--step-3); margin: 0; }
.kp-head p { color: var(--k-cream-2); margin: 0.5rem 0 0; }

/* ---------- Buttons ---------- */
.kp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px; padding: 0.8rem 1.5rem; border-radius: 999px; border: 2px solid var(--k-amber); background: var(--k-amber); color: #1A0E03 !important; font: 700 1.02rem/1 var(--f-kopi); text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; -webkit-user-select: none; user-select: none; touch-action: none; }
.kp-btn:hover { background: var(--k-cream); border-color: var(--k-cream); transform: translateY(-1px); }
.kp-btn--ghost { background: transparent; color: var(--k-cream) !important; border-color: var(--k-line-2); }
.kp-btn--ghost:hover { background: rgba(246, 230, 203, 0.08); color: var(--k-cream) !important; border-color: var(--k-cream); }
.kp-btn--pull { min-width: 13rem; overflow: hidden; }
.kp-btn--pull .kp-btn__ring { position: absolute; inset: 0; background: linear-gradient(90deg, var(--k-tea) 0 calc(var(--p, 0) * 100%), transparent 0); opacity: 0.55; pointer-events: none; }
.kp-btn--pull.is-holding { transform: scale(0.97); background: var(--k-cream); border-color: var(--k-cream); }
.kp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- Hero ---------- */
.kp-hero { padding: clamp(2rem, 1.5rem + 3vw, 4.5rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.kp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
@media (max-width: 900px) { .kp-hero__grid { grid-template-columns: 1fr; } }
.kp-title { margin: 0 0 1.75rem; font: 800 clamp(3.4rem, 2rem + 7vw, 7.2rem)/0.86 var(--f-kopi); letter-spacing: -0.05em; color: var(--k-cream); text-wrap: balance; }
.kp-title::first-line { color: var(--k-amber); }

/* Order ochit */
.ochit { position: relative; max-width: 30rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--k-paper); color: var(--k-ink); border-radius: 4px; transform: rotate(-1.2deg); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(0, 0, 0, 0.2);
	-webkit-mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x;
	mask: radial-gradient(circle 6px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x; }
.ochit p { margin: 0; }
.ochit__head, .ochit__foot, .ochit__item { display: flex; justify-content: space-between; gap: 1rem; font: 500 0.78rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ochit__head { padding-bottom: 0.6rem; border-bottom: 2px dashed rgba(42, 23, 11, 0.3); color: #6B4B2E; }
.ochit__item { padding: 0.75rem 0 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--k-ink); }
.ochit__item span:last-child { font-style: italic; text-transform: none; letter-spacing: 0; color: #6B4B2E; font-weight: 500; }
.ochit__def { padding: 0.25rem 0 0.9rem; font: 500 1.12rem/1.45 var(--f-kopi); color: var(--k-ink); }
.ochit__foot { padding-top: 0.7rem; border-top: 2px dashed rgba(42, 23, 11, 0.3); align-items: center; color: #6B4B2E; }
.ochit__stamp { padding: 0.3rem 0.6rem; border: 2px solid var(--k-red); border-radius: 4px; color: var(--k-red); transform: rotate(-4deg); font-weight: 700; }
.oochit--record { max-width: 44rem; transform: rotate(0.6deg); }
.oochit--record h2 { color: var(--k-ink); font-size: var(--step-2); margin: 1rem 0 0.5rem; }
.oochit--record .entry-content { color: #4A3220; font-size: 1.02rem; }
.oochit--record .entry-content a { color: var(--k-red); }

/* Pull station */
.station { display: grid; gap: 1rem; min-width: 0; }
.station__stage { position: relative; aspect-ratio: 5 / 4; width: 100%; max-width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid var(--k-line-2);
	background:
		linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.25) 72%, rgba(0, 0, 0, 0.25) 73%, transparent 73%),
		radial-gradient(70% 55% at 50% 30%, rgba(255, 181, 71, 0.16), transparent 70%),
		linear-gradient(180deg, #24160D 0%, #1A0F08 72%, #E8E4DC 72%, #CFC9BE 100%); /* marble table top */
	box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5); }
.station__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.station__canvas:active { cursor: grabbing; }
.station__tag { position: absolute; top: 1rem; font: 500 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 999px; background: rgba(21, 12, 7, 0.7); }
.station__tag--human { left: 1rem; color: var(--k-amber); border: 1px solid rgba(255, 181, 71, 0.4); }
.station__tag--ai { right: 1rem; color: var(--cyan); border: 1px solid rgba(53, 227, 255, 0.35); }
.station__sound { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); min-height: 30px; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--k-line-2); background: rgba(21, 12, 7, 0.7); color: var(--k-cream-2); font: 500 0.7rem/1 var(--f-mono); letter-spacing: 0.06em; cursor: pointer; }
.station__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.station__step { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.55rem; border-radius: 10px; border: 1px solid var(--k-line); font: 600 0.82rem/1.2 var(--f-kopi); color: var(--k-cream-3); transition: all .25s ease; min-width: 0; }
.station__step span { display: grid; place-items: center; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid currentColor; font: 500 0.68rem/1 var(--f-mono); }
.station__step.is-now { color: var(--k-cream); border-color: var(--k-amber); }
.station__step.is-done { color: #1A0E03; background: var(--k-amber); border-color: var(--k-amber); }
.station__step--ai.is-done { background: var(--cyan); border-color: var(--cyan); }
.station__step--both.is-done { background: var(--k-cream); border-color: var(--k-cream); }
@media (max-width: 520px) { .station__step { flex-direction: column; font-size: 0.72rem; padding: 0.45rem 0.2rem; text-align: center; } }
.station__say { margin: 0; min-height: 3em; color: var(--k-cream-2); font-size: 1rem; }
.station__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Menu board ---------- */
.board { border-radius: 18px; padding: clamp(1.4rem, 1rem + 2.5vw, 3rem); background: var(--k-paper); color: var(--k-ink); box-shadow: 0 0 0 10px #3A2414, 0 0 0 12px rgba(246, 230, 203, 0.15), 0 40px 80px -40px #000; margin: 12px; }
.board__head { max-width: 60ch; margin-bottom: 1.75rem; }
.board__head h2 { font: 800 var(--step-3)/1.05 var(--f-kopi); color: var(--k-green); margin: 0 0 0.5rem; }
.board__head p { color: #5A3F28; margin: 0; }
.board__menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
@media (max-width: 760px) { .board__menu { grid-template-columns: 1fr; } }
.board__menu h3 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.35rem; font: 800 var(--step-1)/1.2 var(--f-kopi); color: var(--k-ink); }
.board__menu h3 span { flex: none; }
.board__menu h3 i { flex: 1 1 auto; min-width: 1rem; border-bottom: 2px dotted rgba(42, 23, 11, 0.35); transform: translateY(-0.25em); }
.board__menu h3 b { flex: none; font: 600 0.82rem/1.2 var(--f-mono); letter-spacing: 0.04em; color: var(--k-red); text-transform: uppercase; max-width: 55%; text-align: right; }
.board__menu p { margin: 0; color: #5A3F28; }
@media (max-width: 480px) { .board__menu h3 { flex-wrap: wrap; } .board__menu h3 i { display: none; } .board__menu h3 b { max-width: none; text-align: left; width: 100%; } }

/* ---------- Two steel mugs ---------- */
.mugs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 720px) { .mugs { grid-template-columns: 1fr; } }
.mug { position: relative; padding: clamp(1.3rem, 1rem + 1.5vw, 2rem); padding-bottom: 2.6rem; border-radius: 18px 18px 26px 26px; color: #1E2226; overflow: hidden;
	background: linear-gradient(90deg, #7D838B 0%, #E5E8EC 16%, #B8BDC4 34%, #F5F7F9 58%, #9CA1A8 84%, #6A6F76 100%); box-shadow: 0 30px 60px -30px #000, inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.mug .kp-kicker { color: #4C5157; }
.mug h3 { font: 800 var(--step-2)/1.1 var(--f-kopi); margin: 0 0 0.75rem; color: #15181B; }
.mug ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; color: #2B3035; font-weight: 500; }
.mug__band { position: absolute; left: 0; right: 0; bottom: 0.9rem; height: 0.7rem; background: var(--k-amber); }
.mug--ai .mug__band { background: var(--cyan); }

/* ---------- Five pulls as chits ---------- */
.world-kopitiam .tm-tab { background: var(--k-paper); color: var(--k-ink); border: 0; border-radius: 4px; transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 20px -12px #000; }
.world-kopitiam .tm-tab:nth-child(2) { --r: 1deg; }
.world-kopitiam .tm-tab:nth-child(3) { --r: -0.8deg; }
.world-kopitiam .tm-tab:nth-child(4) { --r: 0.7deg; }
.world-kopitiam .tm-tab:nth-child(5) { --r: -1deg; }
.world-kopitiam .tm-tab small { color: #6B4B2E; }
.world-kopitiam .tm-tab strong { font-family: var(--f-kopi); color: var(--k-ink); }
.world-kopitiam .tm-tab em { color: #6B4B2E; }
.world-kopitiam .tm-tab--human em { color: #B26A12; }
.world-kopitiam .tm-tab--ai em { color: #11809A; }
.world-kopitiam .tm-tab[aria-selected="true"] { transform: translateY(-6px) rotate(0deg); box-shadow: 0 0 0 3px var(--k-amber), 0 18px 30px -14px #000; }
.world-kopitiam .tm-panel { background: var(--k-wood); border-color: var(--k-line-2); }
.world-kopitiam .tm-panel h3 { font-size: var(--step-3); color: var(--k-cream); }
.world-kopitiam .tm-panel__ex { border-left-color: var(--k-amber); }
.kp-tag { display: inline-block; margin-top: 0.5rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--k-line-2); font: 500 0.7rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-cream-2); }

/* ---------- House rules sign ---------- */
.sign { max-width: 920px; margin-inline: auto; padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-radius: 10px; background: #FBF4E6; color: var(--k-ink); border: 6px solid var(--k-red); box-shadow: 0 0 0 4px #FBF4E6, 0 40px 70px -40px #000; }
.sign h2 { margin: 0 0 1.5rem; text-align: center; font: 800 clamp(1.8rem, 1.3rem + 2vw, 2.8rem)/1 var(--f-kopi); letter-spacing: 0.02em; text-transform: uppercase; color: var(--k-red); }
.sign__rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: rule; }
@media (max-width: 760px) { .sign__rules { grid-template-columns: 1fr; } }
.sign__rules li { counter-increment: rule; display: grid; gap: 0.35rem; align-content: start; }
.sign__rules li::before { content: counter(rule); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--k-green); color: #fff; font: 800 1.1rem/1 var(--f-kopi); }
.sign__rules h3 { margin: 0; font: 800 var(--step-1)/1.2 var(--f-kopi); color: var(--k-ink); }
.sign__rules p { margin: 0; color: #5A3F28; }

/* ---------- Shared bits, warmed ---------- */
.world-kopitiam .pull-strip__item { background: var(--k-wood); }
.world-kopitiam .pull-strip__item--ai { --cup-c: var(--cyan); }
.world-kopitiam .tm-faq details { background: var(--k-wood); }
.world-kopitiam .tm-faq summary { font-family: var(--f-kopi); }
.world-kopitiam .site-footer { background: #100905; border-top-color: var(--k-line); }

/* 3.4: say what the game is, and offer the way out */
.station__how { margin: 0; color: var(--k-cream-3); font-size: 0.9rem; }
.station__skip { margin: 0.25rem 0 0; font-size: 0.95rem; }
.world-kopitiam .site-main .station__skip a { color: var(--k-cream-2); }