/* ketek ajak!, the page over the board (ketek.html). The board is the canvas; everything here is cut card laid on
   top: two layers with a shadow between them, pressed down when tapped. Phone held upright is the first layout;
   held sideways, on a tablet or a desktop, the players move to a column on the left and the tile's card and the
   log to a column on the right. ketek.js reads where the panels are and tells the 3D board what space is free. */

.ketek-page {
  --ink: #320d47; --ink-soft: #634a73; --paper: #fff8ec; --paper-2: #f4e7cf; --edge: #e3d2b2;
  --coral: #ff5b4a; --coral-deep: #c73c2e; --mango: #ffb21e; --leaf: #3bb46a; --sky: #3ba4ee; --pink: #ff4f9e; --turq: #12b3ac; --copper: #b5622f;
  --table: #2b1a12;
  --card: 0 1px 0 rgba(50, 13, 71, 0.08), 0 3px 0 var(--edge), 0 12px 22px -14px rgba(20, 8, 4, 0.7);
  --gutter: max(12px, env(safe-area-inset-left, 0px));
  --gutter-r: max(12px, env(safe-area-inset-right, 0px));
  --top: max(10px, env(safe-area-inset-top, 0px));
  --bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.08  0 0 0 0 0.25  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background: var(--table); color-scheme: light; height: 100%; overflow: hidden;
}
html:has(.ketek) { overscroll-behavior: none; }
.ketek { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--table); color: var(--ink); font: 400 1rem/1.4 var(--text); -webkit-tap-highlight-color: transparent; }
.ketek [hidden] { display: none !important; }
:where(.ketek button) { font: inherit; color: inherit; cursor: pointer; }
.ketek :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 10px; }
.ketek__canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- Card, buttons ---------- */
.paper { background: var(--paper) var(--grain); border-radius: 14px; box-shadow: var(--card); }
.tab {
  position: relative; display: inline-grid; place-items: center; gap: 0.1rem; min-width: 11rem; min-height: 3.6rem; padding: 0.55rem 1.4rem 0.6rem;
  border: 0; border-radius: 18px; background: var(--coral) var(--grain); color: var(--ink);
  box-shadow: 0 5px 0 var(--coral-deep), 0 14px 22px -12px rgba(20, 8, 4, 0.8);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  touch-action: none; user-select: none;
}
.tab:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-deep), 0 6px 10px -8px rgba(20, 8, 4, 0.8); }
.tab__label { font: 800 1.45rem/1 var(--display); letter-spacing: 0.01em; }
.tab__hint { font: 500 0.72rem/1 var(--text); opacity: 0.85; }
.tab:disabled { background-color: #cdbfae; color: #5c4a3c; box-shadow: 0 4px 0 #a99883; cursor: default; }
.tab:disabled .tab__label { font-size: 1.05rem; }
.tab--alt { min-width: 7rem; background-color: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--edge), 0 14px 22px -12px rgba(20, 8, 4, 0.8); }
.tab--alt .tab__label { font-size: 1.1rem; }
.tab--alt:active { box-shadow: 0 1px 0 var(--edge); }
.tab--big { width: 100%; min-height: 4rem; }
.tab--leaf { background-color: var(--leaf); box-shadow: 0 5px 0 #23864a, 0 14px 22px -12px rgba(20, 8, 4, 0.8); }
.round {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%;
  background: var(--paper) var(--grain); box-shadow: 0 4px 0 var(--edge), 0 10px 16px -10px rgba(20, 8, 4, 0.8);
  transition: transform 0.08s ease;
}
.round:active { transform: translateY(3px); }
.round svg { width: 1.5rem; height: 1.5rem; fill: var(--ink); }
.round--small { width: 2.75rem; height: 2.75rem; }
.round--small svg { width: 1.15rem; height: 1.15rem; }
.round[aria-pressed="true"] { background-color: var(--mango); }
.round:disabled { opacity: 0.45; cursor: default; }
.chipbtn { min-height: 2.75rem; border: 0; border-radius: 999px; padding: 0.5rem 0.9rem; background: var(--paper-2); font: 600 0.9rem/1 var(--text); box-shadow: 0 3px 0 var(--edge); }
.chipbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.chipbtn:disabled { opacity: 0.4; cursor: default; }
.chipbtn--ink { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #170420; }
.chipbtn--coral { background: var(--coral); color: #fff; box-shadow: 0 3px 0 var(--coral-deep); }

/* ---------- Start ---------- */
.start { position: fixed; inset: 0; z-index: 5; overflow-y: auto; display: grid; place-items: center; padding: var(--top) var(--gutter-r) var(--bottom) var(--gutter); background: radial-gradient(ellipse at center, rgba(43, 26, 18, 0.15), rgba(43, 26, 18, 0.75)); }
.start__card { width: min(34rem, 100%); background: var(--paper) var(--grain); border-radius: 22px; box-shadow: var(--card); padding: 1.2rem 1.25rem 1.4rem; display: grid; gap: 0.75rem; position: relative; }
.start__back { justify-self: start; font: 600 0.75rem/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); text-decoration: none; }
.start__title { margin: 0; }
.start__title img { width: min(22rem, 92%); display: block; margin: 0 auto; height: auto; }
.start__lede { margin: 0; text-align: center; color: var(--ink-soft); font-size: 0.98rem; }
.start__form { display: grid; gap: 0.9rem; }
.start__soon { margin: 0; text-align: center; font-size: 0.82rem; color: var(--ink-soft); }
.field { display: grid; gap: 0.4rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label { font: 600 0.72rem/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); padding: 0; }
.field input[type="text"], .field input:not([type]) , #ketek-name { font: 600 1.05rem/1 var(--text); color: var(--ink); padding: 0.7rem 0.85rem; border: 2px solid var(--edge); border-radius: 12px; background: #fff; width: 100%; box-sizing: border-box; }
.pieces { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.pieces label { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 12px; background: var(--paper-2); box-shadow: 0 3px 0 var(--edge); cursor: pointer; overflow: hidden; }
.pieces input { position: absolute; opacity: 0; inset: 0; }
.pieces img { max-width: 86%; max-height: 86%; object-fit: contain; display: block; }
.pieces label:has(input:checked) { background: var(--mango); box-shadow: 0 3px 0 #c98400; }
.pieces label:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.35rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; place-items: center; gap: 0.15rem; min-height: 2.8rem; padding: 0.35rem; border-radius: 12px; background: var(--paper-2); box-shadow: 0 3px 0 var(--edge); font: 700 1.05rem/1 var(--display); }
.seg small { font: 500 0.7rem/1 var(--text); color: var(--ink-soft); }
.seg input:checked + span { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #170420; }
.seg input:checked + span small { color: #e8d9f2; }
.seg input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }

/* ---------- The table: portrait first ---------- */
.hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud__top { position: absolute; top: var(--top); left: var(--gutter); right: var(--gutter-r); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; pointer-events: none; }
.hud__top > * { pointer-events: auto; }
.clock { min-width: 5.2rem; text-align: center; padding: 0.5rem 0.8rem; border-radius: 999px; background: var(--paper) var(--grain); box-shadow: 0 3px 0 var(--edge); font: 800 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; }
.clock.is-late { background-color: var(--coral); color: #fff; box-shadow: 0 3px 0 var(--coral-deep); }

.players { position: absolute; top: calc(var(--top) + 3.25rem); left: var(--gutter); right: var(--gutter-r); margin: -0.6rem 0 0; padding: 0.6rem 0 0.4rem; list-style: none; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.players::-webkit-scrollbar { display: none; }
.player { position: relative; flex: 1 1 0; min-width: 4.4rem; max-width: 9rem; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); grid-template-areas: "piece name" "cash cash"; align-items: center; gap: 0.1rem 0.25rem; padding: 0.35rem 0.4rem 0.55rem; border-radius: 14px; background: var(--paper) var(--grain); box-shadow: 0 3px 0 var(--edge), 0 10px 16px -12px rgba(20, 8, 4, 0.8); border-top: 5px solid var(--colour); transition: transform 0.2s ease; }
.player__piece { grid-area: piece; width: 1.25rem; height: 1.45rem; object-fit: contain; }
.player__name { grid-area: name; font: 700 0.76rem/1.15 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__cash { grid-area: cash; font: 800 0.9rem/1.1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.player__tag { position: absolute; top: -0.55rem; right: 0.35rem; padding: 0.15rem 0.4rem; border-radius: 6px; background: var(--ink); color: #fff; font: 600 0.6rem/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; }
.player__tag--you { background: var(--colour); color: var(--ink); }
.player__timer { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.22rem; height: 3px; border-radius: 3px; background: var(--edge); overflow: hidden; }
.player__timer i { display: block; height: 100%; width: calc(var(--left, 1) * 100%); background: var(--colour); }
.player.is-turn { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--colour), 0 3px 0 var(--edge), 0 12px 18px -12px rgba(20, 8, 4, 0.9); }
.player.is-out { opacity: 0.45; filter: grayscale(1); }
.player.is-out .player__cash { text-decoration: line-through; }
.player.is-jail .player__name::after { content: " · Tersangkut"; font-weight: 500; color: var(--ink-soft); }

.toasts { position: absolute; top: calc(var(--top) + 7.3rem); left: 50%; translate: -50% 0; width: min(24rem, calc(100% - 2rem)); display: grid; gap: 0.35rem; justify-items: center; pointer-events: none; }
.toast { padding: 0.5rem 0.85rem; border-radius: 12px; background: var(--paper) var(--grain); box-shadow: var(--card); font: 600 0.88rem/1.25 var(--text); text-align: center; animation: toast-in 0.25s ease-out both; }
.toast--out { animation: toast-out 0.3s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px) rotate(-1deg); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }

.side { display: none; }

.dock { position: absolute; left: var(--gutter); right: var(--gutter-r); bottom: var(--bottom); display: grid; gap: 0.55rem; justify-items: center; }
.hand { display: flex; gap: 0.3rem; max-width: 100%; overflow-x: auto; padding: 0.3rem 0.2rem 0.4rem; scrollbar-width: none; min-height: 0; }
.hand::-webkit-scrollbar { display: none; }
.hand:empty { display: none; }
.mini { flex: 0 0 auto; width: 3.3rem; height: 4.3rem; border: 0; padding: 0; border-radius: 8px; background: var(--paper) var(--grain); box-shadow: 0 3px 0 var(--edge); display: grid; grid-template-rows: 0.9rem 1fr; overflow: hidden; text-align: center; }
.mini__band { background: var(--pat, none) center / cover, var(--band); }
.mini__name { display: grid; place-items: center; padding: 0.15rem; font: 600 0.58rem/1.1 var(--text); }
.mini.is-mortgaged { opacity: 0.55; }
.mini:active { transform: translateY(2px); }
.actions { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; }
.tabs { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
@media (max-width: 480px) {
  .actions { gap: 0.45rem; }
  .round { width: 2.9rem; height: 2.9rem; }
  .tab { min-width: 8.6rem; padding-inline: 0.9rem; }
  .tab--alt { min-width: 5.4rem; }
  .tabs:has(.tab--alt:not([hidden])) .tab:not(.tab--alt) { min-width: 7.6rem; }
  .tabs:has(.tab--alt:not([hidden])) .tab__label { font-size: 1.2rem; }
}

/* A card drawn from a deck, and the big word for a big moment. */
.drawn { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: min(17rem, 78vw); padding: 0.6rem; border-radius: 16px; background: #fff; box-shadow: var(--card); animation: drawn-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; cursor: pointer; }
.drawn__inner { border-radius: 10px; padding: 1rem 1rem 1.2rem; background: var(--deck) var(--grain); color: var(--ink); display: grid; gap: 0.6rem; min-height: 9rem; align-content: start; }
.drawn__deck { font: 800 1.25rem/1 var(--display); }
.drawn__text { font: 600 1.05rem/1.35 var(--text); }
.drawn__pic { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
@keyframes drawn-in { from { opacity: 0; transform: rotateY(90deg) scale(0.8); } }
.banner { position: absolute; left: 50%; top: 38%; translate: -50% -50%; padding: 0.4rem 1.2rem 0.55rem; border-radius: 16px; background: var(--coral) var(--grain); color: #fff; box-shadow: 0 6px 0 var(--coral-deep), 0 20px 30px -16px rgba(0, 0, 0, 0.7); font: 800 clamp(2rem, 9vw, 3.6rem)/1 var(--display); white-space: nowrap; pointer-events: none; animation: banner 1.3s ease-out both; }
@keyframes banner { 0% { opacity: 0; transform: scale(0.6) rotate(-6deg); } 15% { opacity: 1; transform: scale(1.08) rotate(-3deg); } 25% { transform: scale(1) rotate(-2deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1) rotate(-2deg) translateY(-10px); } }
.coin { position: fixed; z-index: 4; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9a8, #c9824f 60%, #8f4f25); box-shadow: 0 2px 0 #6e3a18; pointer-events: none; }

/* ---------- Sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 6; display: grid; align-items: end; background: rgba(28, 12, 6, 0.45); animation: fade 0.2s ease-out both; }
.sheet__card { max-height: min(78vh, 42rem); overflow-y: auto; background: var(--paper) var(--grain); border-radius: 22px 22px 0 0; box-shadow: var(--card); padding: 1rem var(--gutter-r) calc(var(--bottom) + 0.6rem) var(--gutter); animation: rise 0.25s cubic-bezier(0.2, 1, 0.4, 1) both; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0.4; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.sheet__title { margin: 0; font: 800 1.35rem/1.1 var(--display); }
.sheet__close { border: 0; background: var(--paper-2); border-radius: 50%; width: 2.75rem; height: 2.75rem; font: 700 1.1rem/1 var(--text); box-shadow: 0 3px 0 var(--edge); flex: none; }
.sheet__note { margin: 0.2rem 0 0.8rem; color: var(--ink-soft); font-size: 0.92rem; }
.sheet__row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.sheet__grid { display: grid; gap: 0.5rem; }

.deed { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 3px 0 var(--edge); }
.deed__band { padding: 0.75rem 0.9rem 0.7rem; background: var(--band) var(--grain); color: var(--band-ink, var(--ink)); position: relative; }
.deed__band::after { content: ""; position: absolute; inset: auto 0 0; height: 0.5rem; background: var(--pat, none) center / cover; }
.deed__name { margin: 0; font: 800 1.3rem/1.1 var(--display); }
.deed__place { margin: 0.2rem 0 0; font: 500 0.82rem/1.2 var(--text); opacity: 0.9; }
.deed__body { padding: 0.55rem 0.9rem 0.8rem; }
.deed table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.deed td { padding: 0.28rem 0; border-bottom: 1px solid #eee3cf; }
.deed td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.deed tr.is-now td { color: var(--coral-deep); }
.deed__owner { margin: 0.6rem 0 0; font-size: 0.88rem; display: flex; align-items: center; gap: 0.4rem; }
.deed__owner i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--colour); display: inline-block; }
.deed__text { margin: 0; font-size: 0.95rem; }

.bid { display: grid; gap: 0.6rem; }
.lot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 14px; background: var(--band) var(--grain); color: var(--band-ink, var(--ink)); }
.lot__name { margin: 0; font: 800 1.15rem/1.1 var(--display); }
.lot__sub { margin: 0.15rem 0 0; font: 500 0.8rem/1.2 var(--text); opacity: 0.9; }
.lot__price { font: 700 0.85rem/1.2 var(--text); text-align: right; white-space: nowrap; }
.bid__now { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--paper-2); }
.bid__amount { font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.bid__who { font-size: 0.9rem; color: var(--ink-soft); }
.bid__clock { height: 6px; border-radius: 6px; background: var(--edge); overflow: hidden; }
.bid__clock i { display: block; height: 100%; width: calc(var(--left, 1) * 100%); background: var(--coral); }

.props { display: grid; gap: 0.45rem; }
.prop { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 12px; background: #fff; box-shadow: 0 2px 0 var(--edge); }
.prop__band { align-self: stretch; border-radius: 4px; background: var(--band); }
.prop__name { font: 700 0.9rem/1.2 var(--text); }
.prop__sub { display: block; font: 500 0.78rem/1.2 var(--text); color: var(--ink-soft); }
.prop__hint { display: block; margin-top: 0.15rem; font: 600 0.74rem/1.25 var(--text); color: var(--copper); }
.deed__build { margin: 0.55rem 0 0; font: 600 0.82rem/1.3 var(--text); color: var(--copper); }
.deed__build .chipbtn { width: 100%; }
/* The house button, while there is something to build: a soft beating ring and a small "+" badge. */
.round.is-ready { position: relative; background-color: var(--mango); animation: build-ready 1.6s ease-in-out infinite; }
.round.is-ready::after { content: "+"; position: absolute; top: -0.2rem; right: -0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--leaf); color: #fff; font: 800 0.9rem/1.15rem var(--text); text-align: center; box-shadow: 0 2px 0 #23864a; }
@keyframes build-ready { 0%, 100% { box-shadow: 0 4px 0 var(--edge), 0 0 0 0 rgba(255, 178, 30, 0.7); } 50% { box-shadow: 0 4px 0 var(--edge), 0 0 0 0.55rem rgba(255, 178, 30, 0); } }
@media (prefers-reduced-motion: reduce) { .ketek .round.is-ready { animation: none; box-shadow: 0 4px 0 var(--edge), 0 0 0 3px var(--mango); } }
.prop__acts { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: end; }
.prop.is-picked { box-shadow: 0 0 0 3px var(--mango), 0 2px 0 var(--edge); }
.money { display: flex; align-items: center; gap: 0.4rem; }
.money output { min-width: 5rem; text-align: center; font: 800 1.2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.who { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.who button { display: flex; align-items: center; gap: 0.35rem; }
.who img { width: 1.3rem; height: 1.5rem; object-fit: contain; }
.who button[aria-pressed="true"] { background: var(--mango); }
.cols { display: grid; gap: 0.8rem; }
.cols h3 { margin: 0 0 0.35rem; font: 700 0.75rem/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }

/* ---------- The end ---------- */
.over { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; padding: var(--top) var(--gutter-r) var(--bottom) var(--gutter); background: rgba(28, 12, 6, 0.55); animation: fade 0.3s ease-out both; }
.over__card { width: min(26rem, 100%); background: var(--paper) var(--grain); border-radius: 22px; box-shadow: var(--card); padding: 1.3rem 1.25rem 1.4rem; display: grid; gap: 0.8rem; text-align: center; animation: rise 0.35s ease-out both; }
.over__piece { width: 6rem; height: 7rem; object-fit: contain; margin: 0 auto; animation: hop 1s ease-in-out infinite alternate; }
@keyframes hop { to { transform: translateY(-8px) rotate(3deg); } }
.over__title { margin: 0; font: 800 1.8rem/1.1 var(--display); }
.over__why { margin: 0; color: var(--ink-soft); }
.standings { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; text-align: left; }
.standings li { display: grid; grid-template-columns: 1.4rem 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 10px; background: #fff; box-shadow: 0 2px 0 var(--edge); font-variant-numeric: tabular-nums; }
.standings b { font: 800 1rem/1 var(--display); }
.standings img { width: 1.6rem; height: 1.8rem; object-fit: contain; }
.noscript { position: fixed; inset: auto 1rem 1rem; color: #fff; }

/* ---------- Held sideways, tablets, desktops ---------- */
@media (orientation: landscape) and (min-width: 700px) {
  .players { top: calc(var(--top) + 3.4rem); right: auto; width: 12rem; flex-direction: column; overflow: visible; }
  .player { flex: none; max-width: none; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "piece name" "piece cash"; padding: 0.55rem 0.7rem 0.7rem; }
  .player__piece { width: 2.5rem; height: 2.9rem; }
  .player__name { font-size: 0.9rem; }
  .player__cash { font-size: 1.1rem; }
  .side { display: grid; position: absolute; top: calc(var(--top) + 3.4rem); right: var(--gutter-r); width: 14.5rem; gap: 0.6rem; align-content: start; max-height: calc(100% - 13rem); }
  .log { margin: 0; padding: 0.6rem 0.8rem; list-style: none; border-radius: 14px; background: var(--paper) var(--grain); box-shadow: var(--card); display: grid; gap: 0.3rem; font-size: 0.82rem; max-height: 11rem; overflow-y: auto; }
  .log:empty { display: none; }
  .log li { display: flex; gap: 0.4rem; align-items: baseline; }
  .log li i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--colour); flex: none; translate: 0 -1px; }
  .dock { left: calc(var(--gutter) + 13rem); right: var(--gutter-r); grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; }
  .hand { justify-content: start; }
  .actions { width: auto; justify-content: end; }
  .toasts { top: calc(var(--top) + 3.6rem); }
  .sheet { align-items: center; justify-items: center; }
  .sheet__card { width: min(28rem, calc(100% - 2rem)); border-radius: 22px; padding: 1.1rem 1.2rem 1.3rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .players { top: calc(var(--top) + 2.9rem); width: 8.6rem; gap: 0.3rem; }
  .player { grid-template-columns: 1.4rem minmax(0, 1fr); padding: 0.28rem 0.45rem 0.42rem; gap: 0 0.3rem; }
  .player__piece { width: 1.4rem; height: 1.6rem; }
  .player__name { font-size: 0.68rem; }
  .player__cash { font-size: 0.82rem; }
  .player__tag { top: -0.45rem; font-size: 0.52rem; }
  .toasts { top: auto; bottom: calc(var(--bottom) + 3.6rem); width: min(20rem, 50vw); }
  .toast { font-size: 0.78rem; padding: 0.4rem 0.7rem; }
  .side { display: none; }
  /* The buttons stand in a column at the right edge, beside the board instead of over it. */
  .dock { left: auto; right: var(--gutter-r); bottom: var(--bottom); grid-template-columns: auto; justify-items: end; }
  .actions { flex-direction: column-reverse; align-items: flex-end; gap: 0.45rem; }
  .tabs { flex-direction: column-reverse; align-items: flex-end; gap: 0.45rem; }
  .side { max-height: calc(100% - 8rem); }
  .log { display: none; }
  .tab { min-height: 3rem; min-width: 9rem; }
  .tab__hint { display: none; }
  .round { width: 2.8rem; height: 2.8rem; }
  .hand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ketek *, .ketek *::before, .ketek *::after { animation-duration: 0.01ms !important; transition: none !important; }
  .ketek .banner, .ketek .player__said, .ketek .drawn { animation: none !important; opacity: 1; }
}

/* ---------- The leaderboard and the winner's card ---------- */
.sheet--top { z-index: 9; }
.start__board { margin-top: 0.6rem; }
.board__tabs, .board__when { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.board__when .chipbtn { font-size: 0.82rem; }
.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.board__list--me { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 2px dashed var(--edge); }
.board__row { display: grid; grid-template-columns: 2rem 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 12px; background: var(--paper-2); font: 600 0.95rem/1.2 var(--text); }
.board__row b { font: 800 1.05rem/1 var(--display); text-align: center; }
.board__row img { width: 2rem; height: 2.2rem; object-fit: contain; }
.board__row span:nth-of-type(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__row span:nth-of-type(2) { font: 800 0.95rem/1 var(--display); font-variant-numeric: tabular-nums; }
.board__row.is-me { background: var(--mango, #ffc43c); }
.board__row:nth-child(1) b { color: #c9861a; }

.win { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: var(--top) var(--gutter-r) var(--bottom) var(--gutter); background: rgba(20, 8, 26, 0.72); animation: fade 0.3s ease-out both; }
.win__card { position: relative; width: min(26rem, 100%); max-height: 100%; overflow-y: auto; border-radius: 22px; background: #34183f; box-shadow: 0 30px 60px -20px #000; animation: drawn-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.win__art { position: relative; container-type: inline-size; }
.win__scene { display: block; width: 100%; height: auto; border-radius: 22px 22px 0 0; }
.win__piece { position: absolute; left: 50%; top: 56.5%; width: 22%; max-height: 25%; object-fit: contain; object-position: bottom; translate: -50% -100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); animation: win-hop 0.9s 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.win__words { position: absolute; left: 0; right: 0; top: 0; padding: 5cqi 14cqi 0; text-align: center; color: #fff6e6; text-shadow: 0 2px 0 rgba(31, 18, 38, 0.6), 0 6px 16px rgba(31, 18, 38, 0.6); }
.win__label { margin: 0; font: 800 6cqi/1 var(--display); color: #ffc43c; letter-spacing: 0.04em; text-transform: uppercase; }
.win__name { margin: 1.2cqi 0 0; font: 800 9cqi/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__money { margin: 1.2cqi 0 0; font: 800 5.5cqi/1 var(--display); color: #ffc43c; font-variant-numeric: tabular-nums; }
.win__acts { display: grid; gap: 0.6rem; padding: 1rem 1.1rem 1.2rem; }
.win__site { margin: 0.2rem 0 0; text-align: center; color: #ecdef0; font: 400 0.9rem/1.35 var(--text); }
.win__site b { color: #ffc43c; }
.win__close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 246, 230, 0.92); color: var(--ink); font: 700 1.3rem/1 var(--text); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
@keyframes win-hop { from { translate: -50% -40%; scale: 0.6; opacity: 0; } to { translate: -50% -100%; scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ketek .win__piece, .ketek .win__card { animation: none !important; opacity: 1; translate: -50% -100%; } .ketek .win__card { translate: none; } }

/* Five or six players on a narrow phone: compact cards (name and cash; the colour on top says whose), all in view. */
@media (max-width: 480px) {
  .players:has(> .player:nth-child(5)) .player { min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "cash"; padding-inline: 0.3rem; }
  .players:has(> .player:nth-child(5)) .player__piece { display: none; }
  .players:has(> .player:nth-child(5)) .player__cash { font-size: 0.74rem; }
}

/* ---------- Online: the start card's choices, the waiting room, reactions ---------- */
.mode { display: grid; gap: 0.7rem; }
.join { display: flex; gap: 0.5rem; align-items: end; }
.join__code { flex: 1; }
.join input { font: 800 1.35rem/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; padding: 0.6rem 0.8rem; border: 2px solid var(--edge); border-radius: 12px; width: 100%; box-sizing: border-box; background: #fff; color: var(--ink); }
.join .chipbtn { min-height: 3rem; padding-inline: 1.2rem; }
.chipbtn--wide { width: 100%; padding: 0.8rem; }
.chipbtn--leaf { background: var(--leaf); color: #fff; box-shadow: 0 3px 0 #23864a; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.host { display: grid; gap: 0.8rem; padding: 0.85rem; border-radius: 14px; background: var(--paper-2); }
.check { display: flex; gap: 0.55rem; align-items: center; font: 600 0.9rem/1.3 var(--text); cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); }
.start__error { margin: 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #ffe1dc; color: #8c2117; font: 600 0.9rem/1.3 var(--text); }

.lobby { position: fixed; inset: 0; z-index: 5; overflow-y: auto; display: grid; place-items: center; padding: var(--top) var(--gutter-r) var(--bottom) var(--gutter); background: radial-gradient(ellipse at center, rgba(43, 26, 18, 0.15), rgba(43, 26, 18, 0.75)); }
.lobby__card { width: min(28rem, 100%); background: var(--paper) var(--grain); border-radius: 22px; box-shadow: var(--card); padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: 0.8rem; text-align: center; }
.lobby__title { width: min(13rem, 66%); height: auto; margin: 0 auto; display: block; }
.lobby__label { margin: 0; font: 600 0.72rem/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }
.lobby__code { display: flex; justify-content: center; gap: 0.45rem; }
.lobby__code span { width: 3.2rem; height: 3.8rem; display: grid; place-items: center; border-radius: 12px; background: #fff; box-shadow: 0 4px 0 var(--edge); font: 800 2.2rem/1 var(--display); color: var(--ink); }
.lobby__share { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; text-align: left; }
.seat { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; border-radius: 12px; background: #fff; box-shadow: 0 2px 0 var(--edge); font: 700 0.95rem/1.2 var(--text); }
.seat img { width: 2rem; height: 2.3rem; object-fit: contain; }
.seat.is-you { box-shadow: 0 0 0 3px var(--mango), 0 2px 0 var(--edge); }
.seat--empty { grid-template-columns: minmax(0, 1fr); min-height: 2.4rem; background: transparent; border: 2px dashed var(--edge); box-shadow: none; color: var(--ink-soft); font-weight: 500; font-size: 0.85rem; }
.seat__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--leaf); }
.seat__dot.is-away { background: #c9bba6; }
.lobby__chips { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.lobby .chip { padding: 0.4em 0.75em; border-radius: 999px; background: var(--paper-2); font: 600 0.8rem/1 var(--text); box-shadow: 0 2px 0 var(--edge); }
.lobby__status { margin: 0; color: var(--ink-soft); font-size: 0.9rem; min-height: 1.3em; }

.hud__right { display: flex; gap: 0.45rem; }
.reacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.react { border: 0; border-radius: 12px; padding: 0.7rem 0.3rem; background: #fff; box-shadow: 0 3px 0 var(--edge); font: 700 0.95rem/1.1 var(--text); }
.react:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--edge); }
.player__said { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: 12rem; padding: 0.4rem 0.65rem; border-radius: 12px; background: #fff; box-shadow: var(--card); font: 700 0.9rem/1.1 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; animation: said 2.6s ease-out both; pointer-events: none; }
@keyframes said { 0% { opacity: 0; transform: scale(0.6) rotate(-4deg); } 10% { opacity: 1; transform: scale(1.1) rotate(-2deg); } 18% { transform: scale(1) rotate(-2deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(-2deg) translateY(-6px); } }
.player__tag--away { background: #c9bba6; color: var(--ink); }
.is-offline .clock::after { content: " · reconnecting"; font: 600 0.7rem/1 var(--text); }

/* ---------- The friends' room (Main dengan kawan) ---------- */
.lobby__name { margin: -0.3rem 0 0; font: 800 1.35rem/1.1 var(--display); }
.invite { display: grid; gap: 0.55rem; padding: 0.8rem; border-radius: 16px; background: var(--paper-2); }
.invite__go { width: 100%; }
.invite__more { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.invite__more .chipbtn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.invite__qr { width: 11rem; height: 11rem; margin: 0 auto; border-radius: 12px; image-rendering: pixelated; background: #fff; box-shadow: 0 3px 0 var(--edge); }
.seat { grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; min-height: 3rem; }
.seat__who { display: grid; min-width: 0; }
.seat__who b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat__who small { font: 600 0.7rem/1.2 var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); }
.seat__state { padding: 0.3em 0.65em; border-radius: 999px; background: var(--paper-2); font: 600 0.75rem/1 var(--text); color: var(--ink-soft); white-space: nowrap; }
.seat__state.is-ready { background: var(--leaf); color: #fff; }
.seat__state.is-away { background: #e7dccb; }
.seat__kick { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); font: 700 1.25rem/1 var(--text); }
.seat__edit { min-height: 2.5rem; padding-inline: 0.8rem; }
.seat--empty { padding: 0; }
.seat__invite { width: 100%; min-height: 2.75rem; border: 0; border-radius: 10px; background: transparent; color: #23864a; font: 700 0.95rem/1 var(--text); }
.seat.is-new { animation: seat-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes seat-in { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.chip--btn { border: 0; min-height: 2.4rem; padding: 0.45em 0.85em; color: var(--ink); cursor: pointer; }
.chip--btn::after { content: " ▾"; color: var(--copper); }
.chip--seats { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2em 0.3em !important; }
.chip--seats button { width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 800 1.05rem/1 var(--text); }
.chip--seats button:disabled { opacity: 0.35; }
.lobby__removed { margin: 0; font-weight: 600; color: #b03a2e; }
.pieces--pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: 0.45rem; margin: 0.7rem 0; }
.piecebtn { aspect-ratio: 4 / 5; border: 0; border-radius: 12px; padding: 0.3rem; background: #fff; box-shadow: 0 3px 0 var(--edge); }
.piecebtn img { width: 100%; height: 100%; object-fit: contain; }
.piecebtn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--mango), 0 3px 0 var(--edge); }
.piecebtn:disabled { opacity: 0.3; }
.over__next { margin: 0.7rem 0 0; font-weight: 600; color: #23864a; }
@media (prefers-reduced-motion: reduce) { .ketek .seat.is-new { animation: none !important; } }