/* Velle Games, Ludo prototype. Three looks: 1 Chai Wood, 2 Midnight Glow, 3 Royal Mosaic. */

:root {
  --r: #c8262b; --g: #1f9140; --y: #e8a90c; --b: #1f53bd;
  --ink: #3a2a12; --muted: #7a6440; --panel: rgba(255, 250, 240, .8); --line: rgba(176, 136, 52, .5);
  --accent: #b8862b; --accent2: #1d3f8f; --chip: rgba(255, 255, 255, .6);
  --title: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: #f3ead8;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
  /* inside the phone apps a long press is the board zoom, not text selection or a callout */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
  min-height: 100vh; min-height: 100dvh;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- page backgrounds per look */

body[data-look="1"] {
  --ink: #fbead0; --muted: #d6b88c; --panel: rgba(34, 16, 7, .72); --line: rgba(216, 178, 94, .42);
  --accent: #d8b25e; --accent2: #e98a3c; --chip: rgba(255, 230, 190, .1);
  --r: #c8262b; --g: #1f9140; --y: #e8a90c; --b: #1f53bd;
  background:
    radial-gradient(110% 60% at 12% -8%, rgba(255, 176, 86, .42), transparent 58%),
    radial-gradient(70% 45% at 105% 4%, rgba(255, 120, 40, .2), transparent 60%),
    radial-gradient(120% 70% at 50% 120%, rgba(0, 0, 0, .55), transparent 60%),
    repeating-linear-gradient(93deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 7px, rgba(255, 200, 140, .03) 7px 9px, transparent 9px 15px),
    linear-gradient(180deg, #4d2613 0%, #2f160a 60%, #1e0d05 100%);
  background-color: #2a1409;
}
body[data-look="2"] {
  --ink: #e9efff; --muted: #9aa8cc; --panel: rgba(12, 17, 34, .74); --line: rgba(120, 160, 255, .32);
  --accent: #ffb340; --accent2: #ff9a1f; --chip: rgba(140, 170, 255, .08);
  --r: #ff3b52; --g: #20e06a; --y: #ffcf2e; --b: #3b8cff;
  --title: "Avenir Next", "Futura", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(60% 30% at 50% 100%, rgba(255, 160, 60, .16), transparent 70%),
    radial-gradient(55% 35% at 85% 6%, rgba(70, 110, 200, .18), transparent 70%),
    radial-gradient(50% 35% at 5% 92%, rgba(40, 90, 180, .16), transparent 70%),
    linear-gradient(180deg, #080b14, #03050a);
  background-color: #04060c;
}
body[data-look="3"] {
  --ink: #3a2a12; --muted: #86704a; --panel: rgba(255, 251, 242, .82); --line: rgba(184, 138, 48, .5);
  --accent: #b8862b; --accent2: #1d3f8f; --chip: rgba(255, 255, 255, .55);
  --r: #b8182c; --g: #0f7d3e; --y: #d9a11a; --b: #1b40a3;
  background:
    radial-gradient(90% 55% at 15% -5%, rgba(255, 238, 196, .95), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(214, 180, 110, .35), transparent 70%),
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(150, 130, 100, .06) 46px 47px, transparent 47px 120px),
    repeating-linear-gradient(32deg, transparent 0 80px, rgba(150, 130, 100, .05) 80px 81px, transparent 81px 170px),
    linear-gradient(165deg, #faf4e7 0%, #efe3c9 100%);
  background-color: #f2e8d4;
}

/* ---------------------------------------------------------------- layout */

#app {
  width: 100%; max-width: 520px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top), var(--inset-top, 0px)) max(16px, env(safe-area-inset-right), var(--inset-right, 0px))
    max(12px, env(safe-area-inset-bottom), var(--inset-bottom, 0px)) max(16px, env(safe-area-inset-left), var(--inset-left, 0px));
  display: flex; flex-direction: column; gap: 10px; height: 100vh; height: 100dvh; min-height: 540px;
}

.top { display: flex; align-items: center; gap: 10px; height: 44px; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--chip);
  display: grid; place-items: center; flex: none;
}
.iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.brand { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: 1; }
.brand .t { font-family: var(--title); font-size: 24px; font-weight: 700; letter-spacing: .02em; }
.brand .s { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
.looks { display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); }
.looks button {
  border: 0; background: transparent; border-radius: 999px; height: 30px; min-width: 34px; padding: 0 9px;
  display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.looks button.on { background: var(--accent); color: #1a1004; }
body[data-look="2"] .looks button.on { color: #1a0f00; box-shadow: 0 0 12px rgba(255, 170, 60, .5); }
.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sw1 { background: linear-gradient(135deg, #8a4a22, #3a1a0a); box-shadow: inset 0 0 0 1.5px #d8b25e; }
.sw2 { background: #0b1020; box-shadow: inset 0 0 0 1.5px #7aa6ff, 0 0 5px #7aa6ff; }
.sw3 { background: linear-gradient(135deg, #fff9ea, #e9dcc0); box-shadow: inset 0 0 0 1.5px #c49a3e; }

/* ---------------------------------------------------------------- players */

.players { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.badge-p {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 4px 6px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel); transition: transform .25s, box-shadow .25s, border-color .25s; min-width: 0;
}
.badge-p .disc {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--c); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 70%);
}
.badge-p .disc .mini { width: 30px; height: 46px; margin-top: 8px; clip-path: circle(19px at 50% 17px); }
.badge-p .tag {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 800 9px/1 var(--sans); font-style: normal;
  letter-spacing: .07em; text-transform: uppercase; padding: 2px 5px; border-radius: 6px; background: var(--ink); color: var(--panel-solid, #fff);
  white-space: nowrap;
}
body[data-look="1"] .badge-p .tag { color: #2a1409; }
body[data-look="2"] .badge-p .tag { color: #070a14; }
.badge-p .tag.you { background: var(--c); color: #fff; }
.badge-p .who { display: flex; align-items: center; gap: 5px; min-width: 0; line-height: 1.1; }
.badge-p .who b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-p .pips { display: flex; gap: 3px; }
.badge-p .pips { gap: 2px; }
.badge-p .pips i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--c); opacity: .75; flex: none; }
.badge-p .pips i.on { background: var(--c); opacity: 1; }
.badge-p.turn { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 6px 18px rgba(0, 0, 0, .25); transform: translateY(-2px); }
body[data-look="2"] .badge-p.turn { box-shadow: 0 0 0 1.5px var(--c), 0 0 18px var(--cg); }
body[data-look="2"] .badge-p .disc { box-shadow: 0 0 10px var(--cg); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), transparent 70%); }
body[data-look="3"] .badge-p .disc { border: 2px solid #c49a3e; box-shadow: inset 0 0 0 2px var(--c); }
.badge-p.off { opacity: .35; }
.badge-p.helped { border-color: var(--c); border-style: dashed; }
.dock.helping .turn span { color: var(--seat); font-weight: 700; }

/* ---------------------------------------------------------------- where the dice lives (menu setting "Dice") */
/* Corners / Table: a pad per player next to their own yard; the dice jumps to the pad whose turn it is,
   and the whole pad is the roll button. Table turns the top pads to face the players sitting across. */
.crow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: none; }
.cpad.badge-p { flex-direction: row; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 4px 6px 8px; min-height: 66px; cursor: pointer; }
.cpad .who { flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.cpad .who b { font-size: 13.5px; }
.cpad .pmsg { font-size: 10.5px; font-weight: 700; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-height: 1.25em; }
.crow .cpad:nth-child(2) { flex-direction: row-reverse; padding: 6px 8px 6px 4px; }
.crow .cpad:nth-child(2) .who { align-items: flex-end; text-align: right; }
.cpad .disc { width: 34px; height: 34px; }
.cpad .disc .mini { width: 26px; height: 40px; margin-top: 7px; clip-path: circle(16px at 50% 14px); }
.cpad .dslot { flex: none; width: 78px; height: 78px; margin: -12px -11px; transform: scale(.7); display: grid; place-items: center; border-radius: 20px; border: 2px dashed var(--line); }
.cpad.turn .dslot { border-color: transparent; }
.cpad.ready { animation: padCall 1.3s ease-in-out infinite; }
@keyframes padCall { 50% { box-shadow: 0 0 0 3px var(--c), 0 0 24px var(--c); } }
.cpad.off { pointer-events: none; }
.dice-table .crow.top .cpad { transform: rotate(180deg); }
.dice-corners .dock .dicebox, .dice-centre .dock .dicebox, .dice-table .dock .dicebox { display: none; }
.dice-corners .dockrow, .dice-centre .dockrow { grid-template-columns: minmax(0, 1fr) auto; }
.dice-table .dock { display: none; }
/* Centre: the dice sits on the home triangles and a tap anywhere on the board rolls */
.cdice { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; transform: translate(-50%, -50%) scale(var(--cs, .8));
  display: grid; place-items: center; z-index: 3; pointer-events: none; transition: opacity .3s; }
.cdice:empty { display: none; }
.cdice .dice { pointer-events: auto; }
.cdice::before { content: ""; position: absolute; inset: 2px; border-radius: 24px; background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); }
.cdice.dim .dice:not(.rolling) { opacity: .5; }
.board.zoomed .cdice { opacity: 0; }

/* ---------------------------------------------------------------- board */

.boardwrap { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; container-type: size; }
.board { position: relative; width: 100%; aspect-ratio: 1 / 1; }
@supports (width: 1cqmin) { .board { width: 100cqmin; height: 100cqmin; aspect-ratio: auto; } }
.board.zoomed { overflow: hidden; border-radius: 14px; }
body[data-look="2"] .board.zoomed { border-radius: 24px; }
.board svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#boardSvg { contain: strict; }
#actorSvg { overflow: visible; touch-action: manipulation; }
body[data-look="1"] #boardSvg { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
body[data-look="2"] #boardSvg { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(90, 120, 255, .18)); }
body[data-look="3"] #boardSvg { filter: drop-shadow(0 12px 18px rgba(120, 90, 30, .35)); }

/* board cells: look 1 */
[data-look="1"] .bbase { fill: #ead7ae; }
[data-look="1"] .cell { fill: #f2e1bf; stroke: #a87f3e; stroke-width: 1.1; }
[data-look="1"] .yard.c0, [data-look="1"] .cell.c0, [data-look="1"] .tri.c0, [data-look="1"] .slot.c0 { fill: #c8262b; }
[data-look="1"] .yard.c1, [data-look="1"] .cell.c1, [data-look="1"] .tri.c1, [data-look="1"] .slot.c1 { fill: #1f9140; }
[data-look="1"] .yard.c2, [data-look="1"] .cell.c2, [data-look="1"] .tri.c2, [data-look="1"] .slot.c2 { fill: #e8a90c; }
[data-look="1"] .yard.c3, [data-look="1"] .cell.c3, [data-look="1"] .tri.c3, [data-look="1"] .slot.c3 { fill: #1f53bd; }
[data-look="1"] .yard { stroke: #8a6430; stroke-width: 1.5; }
[data-look="1"] .yin { fill: #f3e2c0; stroke: #c9a04a; stroke-width: 2.6; }
[data-look="1"] .slot { stroke: rgba(60, 30, 10, .45); stroke-width: 2; }
[data-look="1"] .slotin { fill: rgba(0, 0, 0, .16); }
[data-look="1"] .star { fill: #f6e6c4; stroke: #8a6430; stroke-width: 1.2; }
[data-look="1"] .star.onc { fill: #fbecc8; stroke: rgba(70, 30, 10, .6); }
[data-look="1"] .arrow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-look="1"] .trilines, [data-look="1"] .tririm { fill: none; stroke: #d8b25e; stroke-width: 1.6; }
[data-look="1"] .bline { fill: none; stroke: #8a6430; stroke-width: 2; }

/* look 2 */
[data-look="2"] .bbase { fill: #070b16; }
[data-look="2"] .cell { fill: rgba(150, 175, 235, .055); stroke: rgba(160, 188, 245, .3); stroke-width: 1; }
[data-look="2"] .cell.c0 { fill: rgba(255, 59, 82, .4); stroke: #ff3b52; }
[data-look="2"] .cell.c1 { fill: rgba(32, 224, 106, .34); stroke: #20e06a; }
[data-look="2"] .cell.c2 { fill: rgba(255, 207, 46, .34); stroke: #ffcf2e; }
[data-look="2"] .cell.c3 { fill: rgba(59, 140, 255, .38); stroke: #3b8cff; }
[data-look="2"] .yard.c0 { fill: rgba(255, 59, 82, .2); } [data-look="2"] .yard.c1 { fill: rgba(32, 224, 106, .17); }
[data-look="2"] .yard.c2 { fill: rgba(255, 207, 46, .17); } [data-look="2"] .yard.c3 { fill: rgba(59, 140, 255, .2); }
[data-look="2"] .yline, [data-look="2"] .yin, [data-look="2"] .slot { fill: none; stroke-width: 2.2; filter: url(#neon); }
[data-look="2"] .yline { stroke-width: 1.4; opacity: .7; }
[data-look="2"] .yin { fill: rgba(0, 0, 0, .3); }
[data-look="2"] .c0.yline, [data-look="2"] .c0.yin, [data-look="2"] .slot.c0, [data-look="2"] .arrow.c0 { stroke: #ff3b52; }
[data-look="2"] .c1.yline, [data-look="2"] .c1.yin, [data-look="2"] .slot.c1, [data-look="2"] .arrow.c1 { stroke: #20e06a; }
[data-look="2"] .c2.yline, [data-look="2"] .c2.yin, [data-look="2"] .slot.c2, [data-look="2"] .arrow.c2 { stroke: #ffcf2e; }
[data-look="2"] .c3.yline, [data-look="2"] .c3.yin, [data-look="2"] .slot.c3, [data-look="2"] .arrow.c3 { stroke: #3b8cff; }
[data-look="2"] .star { fill: rgba(255, 255, 255, .06); stroke: #eef3ff; stroke-width: 1.6; filter: url(#neon); }
[data-look="2"] .arrow { fill: none; stroke-width: 2.2; stroke-linecap: round; filter: url(#neon); }
[data-look="2"] .tri.c0 { fill: #ff3b52; stroke: #ff3b52; } [data-look="2"] .tri.c1 { fill: #20e06a; stroke: #20e06a; }
[data-look="2"] .tri.c2 { fill: #ffcf2e; stroke: #ffcf2e; } [data-look="2"] .tri.c3 { fill: #3b8cff; stroke: #3b8cff; }
[data-look="2"] .tri { fill-opacity: .5; stroke-width: 1.5; stroke-linejoin: round; }
[data-look="2"] .triglow { opacity: .75; }
[data-look="2"] .triglow.c0 { fill: #ff2d4a; } [data-look="2"] .triglow.c1 { fill: #1dff73; }
[data-look="2"] .triglow.c2 { fill: #ffd400; } [data-look="2"] .triglow.c3 { fill: #2f86ff; }
[data-look="2"] .trilines, [data-look="2"] .tririm { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
[data-look="2"] .bline { fill: none; stroke: rgba(140, 170, 255, .45); stroke-width: 1.6; }

/* look 3 */
[data-look="3"] .bbase { fill: #fbf6ea; }
[data-look="3"] .cell { fill: #fdf9f0; stroke: #c49a3e; stroke-width: 1.2; }
[data-look="3"] .yard.c0, [data-look="3"] .cell.c0, [data-look="3"] .tri.c0 { fill: #b8182c; }
[data-look="3"] .yard.c1, [data-look="3"] .cell.c1, [data-look="3"] .tri.c1 { fill: #0f7d3e; }
[data-look="3"] .yard.c2, [data-look="3"] .cell.c2, [data-look="3"] .tri.c2 { fill: #d9a11a; }
[data-look="3"] .yard.c3, [data-look="3"] .cell.c3, [data-look="3"] .tri.c3 { fill: #1b40a3; }
[data-look="3"] .yard { stroke: #c49a3e; stroke-width: 1.5; }
[data-look="3"] .yin { fill: #fcf7ec; stroke: url(#goldg); stroke-width: 3.2; }
[data-look="3"] .slot { fill: #fffbf2; stroke: #c49a3e; stroke-width: 2; }
[data-look="3"] .slotin { fill: none; stroke: rgba(196, 154, 62, .35); stroke-width: 1; }
[data-look="3"] .star { fill: url(#goldg); stroke: #8a6214; stroke-width: .9; }
[data-look="3"] .arrow { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-look="3"] .arrow.c0, [data-look="1"] .arrow.c0 { stroke: #b8182c; } [data-look="3"] .arrow.c1, [data-look="1"] .arrow.c1 { stroke: #0f7d3e; }
[data-look="3"] .arrow.c2, [data-look="1"] .arrow.c2 { stroke: #c08a10; } [data-look="3"] .arrow.c3, [data-look="1"] .arrow.c3 { stroke: #1b40a3; }
[data-look="3"] .trilines, [data-look="3"] .tririm { fill: none; stroke: url(#goldg); stroke-width: 2.6; }
[data-look="3"] .bline { fill: none; stroke: url(#goldg); stroke-width: 3; }

/* ---------------------------------------------------------------- gotis */

.goti .shadow { fill: rgba(30, 15, 0, .3); }
[data-look="2"] .goti .shadow { fill: rgba(0, 0, 0, .55); }
.goti .glow { display: none; }
[data-look="2"] .goti .glow { display: inline; }
.goti.s0 .body { fill: url(#gb0); } .goti.s1 .body { fill: url(#gb1); } .goti.s2 .body { fill: url(#gb2); } .goti.s3 .body { fill: url(#gb3); }
.goti.s0 .hood { fill: url(#gh0); } .goti.s1 .hood { fill: url(#gh1); } .goti.s2 .hood { fill: url(#gh2); } .goti.s3 .hood { fill: url(#gh3); }
.goti.s0 .trim { fill: url(#gt0); } .goti.s1 .trim { fill: url(#gt1); } .goti.s2 .trim { fill: url(#gt2); } .goti.s3 .trim { fill: url(#gt3); }
[data-look="3"] .goti .trim { fill: url(#gold); stroke: #8a6214; stroke-width: .5; }
[data-look="2"] .goti .body, [data-look="2"] .goti .hood { fill-opacity: .9; }
[data-look="2"] .goti .trim { fill-opacity: .95; }
.goti .limb, .goti .foot { fill: var(--cd); }
[data-look="3"] .goti .foot { fill: url(#gold); }
.goti .armo { stroke: var(--cd); stroke-width: 6; stroke-linecap: round; }
.goti .arm { stroke: var(--c); stroke-width: 3.9; stroke-linecap: round; }
[data-look="2"] .goti .armo { stroke: var(--cg); stroke-opacity: .55; }
[data-look="2"] .goti .arm { stroke: var(--cl); }
.goti .hand { fill: var(--cl); }
[data-look="1"] .goti .hand, [data-look="3"] .goti .hand { fill: url(#skin); }
.goti .face { fill: url(#skin); }
[data-look="2"] .goti .face { display: none; }
.goti .sclera { display: none; fill: #fff; }
[data-look="2"] .goti .sclera { display: inline; }
.goti .pupil { fill: #2b170d; }
[data-look="2"] .goti .pupil { fill: #0d1120; }
.goti .glint { fill: #fff; }
.goti .lid { fill: none; stroke: #2b170d; stroke-width: 1.2; stroke-linecap: round; }
[data-look="2"] .goti .lid { stroke: #0d1120; stroke-width: 1.4; }
.goti .mouth { fill: none; stroke: #5a2414; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.goti .mouth.fill { fill: #8e2a1c; }
[data-look="2"] .goti .mouth { stroke: #12142a; }
[data-look="2"] .goti .mouth.fill { fill: #3a0f1c; }
.goti .cheek { fill: #ff7a7a; opacity: .5; }
[data-look="2"] .goti .cheek { fill: #fff; opacity: .28; }
.goti .hshine { fill: #fff; opacity: .62; }
[data-look="1"] .goti .hshine { opacity: .8; }
.goti .bshine { fill: none; stroke: #fff; stroke-opacity: .38; stroke-width: 2.3; stroke-linecap: round; }
[data-look="2"] .goti .bshine { stroke-opacity: .6; }
.goti .belt { display: none; fill: none; stroke: url(#gold); stroke-width: 1.9; }
[data-look="3"] .goti .belt { display: inline; }
.goti .tuft { fill: var(--cd); }
[data-look="3"] .goti .tuft { fill: url(#gold); }
.goti .hit { fill: transparent; pointer-events: all; }
.goti.ashead .fig > :not(.head), .goti.ashead .shadow, .goti.ashead .glow { display: none; }
.goti.ashead .head { filter: none; }

.ring ellipse { fill: none; }
.ring .ringo { stroke: rgba(30, 14, 0, .62); stroke-width: 5.6; }
.ring .ringi { stroke: #fff2c2; stroke-width: 2.6; }
[data-look="2"] .ring .ringo { stroke: var(--cg); stroke-opacity: .8; stroke-width: 6; filter: url(#neon); }
[data-look="2"] .ring .ringi { stroke: #fff; }
.ring.focus .ringi { stroke: #fff; stroke-width: 3.4; }
.safering ellipse { fill: rgba(240, 196, 80, .28); stroke: #d4a237; stroke-width: 2; }
.safering path { fill: #ffd76a; stroke: #8a6214; stroke-width: .6; }
[data-look="2"] .safering ellipse { fill: rgba(110, 240, 255, .14); stroke: #6ff0ff; filter: url(#neon); }
[data-look="2"] .safering path { fill: #c8fbff; stroke: #2ab7c9; }
.clasp { fill: #ffd76a; stroke: #fff; stroke-width: 1.3; }
[data-look="2"] .clasp { fill: #fff3c4; stroke: #ffb340; }
.trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail .tw { stroke: var(--cl); stroke-width: 9; opacity: .32; }
.trail .tc { stroke: #fff; stroke-width: 2.6; opacity: .5; }

/* effects */
.puff { fill: rgba(236, 218, 186, .95); stroke: rgba(150, 120, 80, .35); stroke-width: .6; }
.streak { stroke: rgba(120, 90, 50, .55); stroke-width: 1.6; stroke-linecap: round; fill: none; }
[data-look="2"] .streak { stroke: rgba(170, 200, 255, .7); }
[data-look="1"] .streak { stroke: rgba(90, 50, 20, .6); }
[data-look="2"] .puff { fill: rgba(170, 195, 255, .7); }
.spark { fill: #ffe07a; }
.spark.gold { fill: #f3c64e; stroke: #8a6214; stroke-width: .4; }
[data-look="2"] .spark.gold { fill: #c8fbff; stroke: none; }
.sstar { fill: #ffd76a; stroke: #8a6214; stroke-width: .6; }
[data-look="2"] .sstar { fill: #c8fbff; stroke: #2ab7c9; }
.pow .burst { fill: #ffd23a; stroke: #b3261e; stroke-linejoin: round; }
.pow .core { fill: #fff8d8; }
.pow line { stroke: #fff4c4; stroke-linecap: round; }
[data-look="3"] .pow line, [data-look="1"] .pow line { stroke: #b3261e; }
.dizzy path { fill: #ffd23a; stroke: #a8740e; stroke-width: .4; }
.sweat { fill: #8fd3ff; stroke: #3b8fd0; stroke-width: .4; }
.heart { fill: #ff4d6d; }
.zzz text { font: italic 900 12px var(--sans); fill: #fff; paint-order: stroke; stroke: rgba(40, 20, 6, .85); stroke-width: 2.4; stroke-linejoin: round; }
[data-look="2"] .zzz text { fill: #e6efff; stroke: rgba(0, 0, 0, .85); }
[data-look="3"] .zzz text { stroke: rgba(70, 48, 8, .85); }
.badge rect { fill: rgba(28, 16, 6, .88); stroke: #e2b64e; stroke-width: 1.2; }
.badge text { font: 800 10px var(--sans); fill: #fff4d6; }
[data-look="2"] .badge rect { fill: rgba(8, 12, 26, .92); stroke: #8fb4ff; }

/* ---------------------------------------------------------------- status, dock, dice */

.dock {
  display: flex; flex-direction: column; gap: 4px; flex: none;
  padding: 8px 12px 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel);
}
/* one or two lines, always the height of two, so the dice never moves under the thumb */
.status {
  height: calc(2 * 1.35em + 4px); padding: 2px 6px 0; font-size: 13.5px; line-height: 1.35; text-align: center;
  display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); padding-bottom: 6px; box-sizing: content-box;
}
.status span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dockrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.dock.s0 { --seat: var(--r); } .dock.s1 { --seat: var(--g); } .dock.s2 { --seat: var(--y); } .dock.s3 { --seat: var(--b); }
.dock .turn { display: flex; flex-direction: column; min-width: 0; }
.dock .turn b { font-family: var(--title); font-size: 17px; color: var(--seat, var(--ink)); }
body[data-look="3"] .dock .turn b, body[data-look="1"] .dock .turn b { filter: saturate(1.1); }
.dock .turn span { font-size: 12px; color: var(--muted); }
.dock .side { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--chip); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }

.dicebox { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
/* the tray the die sits in (per look), with the seat colour as a thin outer arc */
.dicebox::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px solid var(--seat, var(--line)); opacity: .85;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18) 70%);
}
body[data-look="1"] .dicebox::before {
  background: radial-gradient(circle closest-side, #5a2e14 0 64%, #2e1406 78%, transparent 79%),
              conic-gradient(from 20deg, #f0cf86, #9a6a26, #e8c070, #7a4e18, #f0cf86, #9a6a26, #f0cf86);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .45); border-width: 2px;
}
body[data-look="2"] .dicebox::before {
  background: radial-gradient(circle at 50% 55%, rgba(255, 170, 60, .28), rgba(255, 140, 30, .06) 55%, transparent 70%),
              radial-gradient(circle at 50% 35%, #1c2230, #0a0d14 72%);
  box-shadow: inset 0 1px 0 rgba(160, 175, 210, .35), 0 0 18px rgba(255, 160, 50, .18);
}
body[data-look="3"] .dicebox::before {
  background: radial-gradient(circle closest-side, #2a54b8 0 62%, #163684 77%, transparent 78%),
              conic-gradient(from 0deg, #fff3b8, #c4932f, #f6d77c, #a8781f, #fff3b8, #c4932f, #f6d77c, #a8781f, #fff3b8);
  box-shadow: inset 0 0 0 1px rgba(110, 76, 14, .7), 0 3px 8px rgba(120, 90, 30, .3);
}
.dicebox::after { content: ""; position: absolute; bottom: 14px; left: 26px; right: 26px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .38); filter: blur(3px); }
.dice { position: relative; z-index: 1; width: 78px; height: 78px; border: 0; background: none; padding: 0; perspective: 480px; display: grid; place-items: center; }
.dice.ready { animation: diceCall 1.3s ease-in-out infinite; }
@keyframes diceCall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cube { position: relative; width: 50px; height: 50px; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0; border-radius: 6px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 7px; gap: 1px; backface-visibility: hidden;
  background: radial-gradient(circle at 30% 25%, #fffdf6, #efe4cc 70%, #d9c8a4); box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .25), inset 0 -3px 6px rgba(120, 90, 40, .2);
}
.face i { display: block; border-radius: 50%; margin: 1.4px; }
.face i.pip { background: radial-gradient(circle at 40% 35%, #5a3a24, #1e120a); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
/* faces sit a hair outside the half-size so their rounded corners overlap: no dark notches at the cube corners */
.f1 { transform: translateZ(25.5px); } .f6 { transform: rotateY(180deg) translateZ(25.5px); }
.f3 { transform: rotateY(90deg) translateZ(25.5px); } .f4 { transform: rotateY(-90deg) translateZ(25.5px); }
.f5 { transform: rotateX(90deg) translateZ(25.5px); } .f2 { transform: rotateX(-90deg) translateZ(25.5px); }
/* an inner core (two crossed planes in the face colour) fills what shows through the rounded corners */
.cube::before, .cube::after { content: ""; position: absolute; inset: 1px; background: #e2d2ae; }
.cube::before { transform: translateZ(0); } .cube::after { transform: rotateY(90deg); }
body[data-look="2"] .cube::before, body[data-look="2"] .cube::after { background: #15171d; }
body[data-look="3"] .cube::before, body[data-look="3"] .cube::after { background: #e8dcc4; }
body[data-look="2"] .face { background: radial-gradient(circle at 30% 25%, #3a3f4c, #15171d 70%, #0a0b0e); box-shadow: inset 0 0 0 1px rgba(255, 190, 90, .35), inset 0 -3px 6px rgba(0, 0, 0, .5); }
body[data-look="2"] .face i.pip { background: radial-gradient(circle, #fff3c4, #ffb340 60%, #c96a00); box-shadow: 0 0 6px #ffae3a, 0 0 2px #fff0c0; }
body[data-look="3"] .face { background: radial-gradient(circle at 30% 25%, #ffffff, #f4eee2 65%, #e2d6bf); box-shadow: inset 0 0 0 1.5px #d4a237, inset 0 -3px 6px rgba(150, 110, 40, .2); }
body[data-look="3"] .face i.pip { background: radial-gradient(circle at 40% 35%, #3a2a0a, #6e4c0e 60%); box-shadow: 0 0 0 1.2px #e2b85a, inset 0 1px 1.5px rgba(0, 0, 0, .6); }

.rules { margin: 0; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .02em; flex: none; }
.top, .players { flex: none; }

/* the void stamp */
.stamp {
  position: absolute; left: 50%; top: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-8deg);
  padding: 12px 22px; border-radius: 14px; border: 3px solid #b3261e; color: #b3261e; background: rgba(255, 248, 232, .92);
  text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); white-space: nowrap;
}
.stamp b { display: block; font: 900 30px var(--title); letter-spacing: .04em; text-transform: uppercase; }
.stamp span { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
body[data-look="2"] .stamp { background: rgba(10, 14, 28, .92); color: #ff6b80; border-color: #ff3b52; box-shadow: 0 0 30px rgba(255, 59, 82, .5); }

/* ---------------------------------------------------------------- screens */

.screen {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: rgba(10, 6, 2, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body[data-look="3"] .screen { background: rgba(80, 60, 20, .28); }
body[data-look="2"] .screen { background: rgba(2, 4, 10, .6); }
.card {
  width: 100%; max-width: 440px; border-radius: 26px; padding: 22px 18px 18px; border: 1px solid var(--line);
  background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center; position: relative;
}
body[data-look="1"] .card { background: linear-gradient(180deg, rgba(60, 28, 12, .94), rgba(30, 14, 6, .96)); }
body[data-look="2"] .card { background: linear-gradient(180deg, rgba(18, 24, 46, .94), rgba(8, 11, 22, .97)); box-shadow: 0 0 0 1px rgba(143, 180, 255, .15), 0 24px 60px rgba(0, 0, 0, .6); }
body[data-look="3"] .card { background: linear-gradient(180deg, rgba(255, 252, 245, .97), rgba(248, 240, 224, .97)); box-shadow: 0 0 0 4px rgba(196, 154, 62, .35), 0 24px 50px rgba(110, 80, 20, .3); }
.card.wide { max-width: 480px; }
.card, .settings .row > *, .seg { min-width: 0; }
.card h1 { font-family: var(--title); font-size: 46px; margin: 2px 0 0; letter-spacing: .03em; }
.card h2 { font-family: var(--title); font-size: 26px; margin: 0; }
.card .sub { margin: 4px 0 14px; color: var(--muted); font-size: 13px; letter-spacing: .03em; }
.hero { display: flex; justify-content: center; gap: 6px; height: 80px; align-items: flex-end; }
.mini { overflow: visible; }
.hero-g .mini { width: 46px; height: 79px; }
.hero-g:nth-child(2) .mini, .hero-g:nth-child(4) .mini { transform: translateY(-6px); }
.modes { display: grid; gap: 8px; margin-top: 4px; }
.mode {
  text-align: left; border-radius: 16px; padding: 12px 14px; border: 1px solid var(--line); background: var(--chip);
  display: flex; flex-direction: column; gap: 2px; transition: transform .15s;
}
.mode:active { transform: scale(.98); }
.mode b { font-size: 16px; }
.mode small { font-size: 12px; color: var(--muted); }
.mode:first-child { background: var(--accent); border-color: transparent; color: #1a1004; }
.mode:first-child small { color: rgba(26, 16, 4, .72); }
body[data-look="2"] .mode:first-child { background: linear-gradient(180deg, #ffb340, #ff9a1f); color: #1a0f00; box-shadow: 0 0 22px rgba(255, 160, 50, .35); }
body[data-look="2"] .mode:first-child small { color: rgba(26, 15, 0, .75); }
body[data-look="2"] .seg button.on { color: #1a0f00; }
body[data-look="2"] .lookpick button.on { color: #fff; }
body[data-look="3"] .mode:first-child { background: linear-gradient(180deg, #e8c066, #c4932f); color: #2a1a04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.mode.alt b::after { content: " \2192"; }
.settings { margin-top: 14px; display: grid; gap: 8px; text-align: left; }
.settings .row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--chip); }
.seg button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: 999px; padding: 6px 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button.on { background: var(--accent); color: #1a1004; }
.lookpick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }   /* fills the row with however many looks the edition has */
.lookpick button {
  border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 7px 4px; font-size: 11px; font-weight: 700;
  color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.15;
}
.lookpick .sw { width: 16px; height: 16px; }
.lookpick button.on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hero-g { animation: heroBob 2.6s ease-in-out infinite; }
.hero-g:nth-child(2) { animation-delay: -.6s; } .hero-g:nth-child(3) { animation-delay: -1.2s; } .hero-g:nth-child(4) { animation-delay: -1.8s; }
@keyframes heroBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.link { border: 0; background: none; color: var(--accent); font-weight: 700; margin-top: 12px; font-size: 13px; }
.cardhead { display: flex; justify-content: space-between; align-items: center; }
.cardhead .link { margin: 0; }
.momentgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.moment {
  text-align: left; border-radius: 14px; border: 1px solid var(--line); background: var(--chip); padding: 9px 10px; display: grid;
  grid-template-columns: 34px 1fr; column-gap: 8px; row-gap: 2px; align-items: start;
}
.moment .n { grid-row: 1 / 3; position: relative; width: 34px; height: 46px; display: grid; place-items: end center; }
.moment .n .mini { width: 28px; height: 46px; }
.moment .n i { position: absolute; left: -3px; top: -2px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #1a1004;
  font: 800 10px/17px var(--sans); text-align: center; font-style: normal; }
.moment b { font-size: 13px; }
.moment small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.ranking { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.ranking li { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); text-align: left; }
.ranking li b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; margin-right: 6px; font-size: 12px; }

@media (max-height: 700px) { .rules { display: none; } }

/* landscape phones, tablets and laptops: the board on the left at full height, everything else in a side column */
@media (orientation: landscape) and (min-aspect-ratio: 6/5) {
  #app {
    --side: clamp(260px, 30vw, 340px); --bw: min(calc(100dvh - 24px), calc(100vw - var(--side) - 52px));
    max-width: none; min-height: 0; padding: 12px 16px; display: grid; justify-content: center; align-content: stretch;
    grid-template-columns: var(--bw) var(--side); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "board top" "board players" "board gap" "board dock" "board rules"; column-gap: 20px; row-gap: 10px;
  }
  .top { grid-area: top; } .players { grid-area: players; } .dock { grid-area: dock; } .rules { grid-area: rules; }
  .crow.top { grid-area: players; } .crow.bot { grid-area: gap; align-self: start; }
  .boardwrap { grid-area: board; width: var(--bw); height: var(--bw); align-self: center; }
}
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (max-height: 430px) {
  .rules { display: none; }
  .players { gap: 4px; } .badge-p { padding: 4px 3px; gap: 5px; } .badge-p .disc { width: 34px; height: 34px; }
  .badge-p .disc .mini { width: 26px; height: 40px; margin-top: 7px; clip-path: circle(16px at 50% 14px); }
  .badge-p .who { flex-direction: column; gap: 2px; } .badge-p .who b { font-size: 11px; }
  .dicebox { width: 84px; height: 84px; } .dice { width: 70px; height: 70px; }
  .dock .turn b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .status { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .brand .t { font-size: 20px; }
  .badge-p .who b { font-size: 11px; }
}

/* "Friends on one phone": the player-count buttons start the game */
.mode.friends .seg { margin-top: 7px; }
.mode.friends .seg button { color: var(--ink); padding: 8px 4px; font-size: 12.5px; }
.mode.friends .seg button:active { background: var(--accent); color: #1a1004; }

/* the menu (Vishal, 1 Nov: the same menu as Snakes web): pick a game on the tiles and a count, then Play;
   Resume leads during a game */
.pick { display: grid; gap: 10px; margin-top: 4px; text-align: left; }
.ptitle { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  border: 1.5px solid var(--line); background: var(--chip); border-radius: 16px; padding: 10px 6px 9px; min-width: 0; color: var(--ink);
  display: grid; justify-items: center; gap: 2px; text-align: center; transition: transform .15s; font: inherit;
}
.tile:active { transform: scale(.97); }
.tile .ic { display: flex; justify-content: center; height: 34px; margin-bottom: 2px; }
.tile .ic .mini { width: 22px; height: 34px; }
.tile b { font-size: 14px; white-space: nowrap; }
.tile small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tile.on { border-color: var(--accent); background: var(--accent); color: #1a1004; }
.tile.on small { color: rgba(26, 16, 4, .75); }
body[data-look="2"] .tile.on { background: linear-gradient(180deg, #ffb340, #ff9a1f); box-shadow: 0 0 18px rgba(255, 160, 50, .35); }
body[data-look="3"] .tile.on { background: linear-gradient(180deg, #e8c066, #c4932f); color: #2a1a04; box-shadow: 0 0 0 3px rgba(196, 154, 62, .25); }
.prow { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.prow .seg button { padding: 8px 2px; font-size: 12.5px; }
.prow .seg button[hidden] { display: none; }
.btn { border: 0; border-radius: 16px; font: inherit; font-weight: 800; color: #1a1004; background: var(--accent); cursor: pointer; }
body[data-look="2"] .btn { background: linear-gradient(180deg, #ffb340, #ff9a1f); box-shadow: 0 0 20px rgba(255, 160, 50, .3); }
body[data-look="3"] .btn { background: linear-gradient(180deg, #e8c066, #c4932f); color: #2a1a04; }
.playbtn { width: 100%; margin-top: 14px; font-size: 18px; padding: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.playbtn.ghost { font-size: 16px; padding: 13px; background: var(--chip) !important; color: var(--ink) !important; border: 1.5px solid var(--accent); box-shadow: none !important; }
.pi { width: 17px; height: 17px; fill: currentColor; flex: none; }
.playbtn.ghost .pi { display: none; }
.resumebox { margin: 2px 0 12px; padding: 12px; border-radius: 18px; border: 1.5px solid var(--accent); background: var(--chip); text-align: center; }
.resumebox small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.resumebox .btn { width: 100%; font-size: 17px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
#menu.ingame .hero { display: none; }
.settings .seg button { display: flex; align-items: center; justify-content: center; gap: 5px; }
.settings .seg .ti { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.settings .seg .ti path:only-child { fill: currentColor; stroke-width: 1.2; }
.themenote { margin: -3px 0 0; font-size: 10.5px; color: var(--muted); text-align: right; }
.mrules { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; text-align: center; }
.links { display: flex; justify-content: center; gap: 16px; }
.themebtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.themebtn .ic-moon path { fill: currentColor; stroke-width: 1; }
.themebtn .ic-sun, body[data-look="3"] .themebtn .ic-sun { display: none; }
body[data-look="2"] .themebtn .ic-sun { display: block; }
body[data-look="2"] .themebtn .ic-moon { display: none; }
/* crowded squares (samples for Vishal's point 7): colour chips and discs, and the tap count bubble */
.badge.cs rect { stroke: #fff; stroke-width: 1.4; }
.badge.cs text, .badge.disc text { fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2px; }
.badge.disc circle { stroke: #fff; stroke-width: 1.6; }
.bubble rect, .bubble path { fill: rgba(28, 16, 6, .92); stroke: #e2b64e; stroke-width: 1.2; }
[data-look="2"] .bubble rect, [data-look="2"] .bubble path { fill: rgba(8, 12, 26, .95); stroke: #8fb4ff; }
.bubble text { font: 800 12px var(--sans); fill: #fff4d6; }
.bubble circle { stroke: #fff; stroke-width: 1.2; }
/* goti styles (Vishal, 1 Nov): hoodie (pocket, hood rim, darker shoes) and jelly-bean (no clothing lines) */
.goti .pocket { fill: none; stroke: var(--cd); stroke-opacity: .55; stroke-width: 1.1; stroke-linejoin: round; }
.goti .hrim { fill: none; stroke: var(--cd); stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; }
[data-look="2"] .goti .pocket { stroke: var(--cl); stroke-opacity: .5; }
[data-look="2"] .goti .hrim { stroke: var(--cl); stroke-opacity: .6; }
.goti.st-hoodie .foot, [data-look="3"] .goti.st-hoodie .foot { fill: var(--cd); }
.goti.st-jelly .foot, [data-look="3"] .goti.st-jelly .foot { fill: var(--c); }
.goti.st-jelly .limb { fill: var(--c); }

/* jelly-bean is one smooth piece in both looks: no skin face or hood tip, eyes and smile on the colour (as in Dark) */
.goti.st-jelly .face, .goti.st-jelly .tuft { display: none; }
.goti.st-jelly .sclera { display: inline; }
.goti.st-jelly .pupil { fill: #0d1120; }
.goti.st-jelly .lid { stroke: #0d1120; stroke-width: 1.4; }
.goti.st-jelly .mouth { stroke: #12142a; }
.goti.st-jelly .mouth.fill { fill: #3a0f1c; }
.goti.st-jelly .cheek { fill: #fff; opacity: .28; }
.goti.st-jelly .hand, [data-look="1"] .goti.st-jelly .hand, [data-look="3"] .goti.st-jelly .hand { fill: var(--cl); }
.goti.st-jelly .armo { stroke: var(--cd); stroke-opacity: .35; }
/* photo-puppet gotis (1 Nov): the face drawn on the photo head, the same in every look */
.goti.ph .sclera { display: inline; fill: url(#psc); }
.goti.ph .pupil { fill: #0c0b10; }
.goti.ph .glint { fill: #fff; }
.goti.ph .lid { stroke: #160a0a; stroke-width: .6; }
.goti.ph .mouth { stroke: #140909; stroke-width: 1.7; }
.goti.ph .mouth.fill { fill: #3a0c10; }