/* Wordies: what only the word game has. The rest comes from /rooms/room.css. */

/* the line traced across the wheel, and the word being spelled above it */
.trace { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.trace polyline { fill: none; stroke: rgba(255, 214, 140, 0.85); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 190, 90, 0.7)); }
body:not(.at-table) .trace, body:not(.at-table) .spell { display: none !important; }
.spell { position: fixed; z-index: 3; transform: translate(-50%, -100%); display: flex; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.spell.on { opacity: 1; }
.spell i { font: 700 22px/1 var(--gu-serif); font-style: normal; color: #1b140c; background: linear-gradient(#f6ecd2, #dccba3); min-width: 30px; height: 34px;
  display: grid; place-items: center; border-radius: 7px; box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 -2px 0 rgba(0,0,0,.15); }
.spell.good i { background: linear-gradient(#d9f2c4, #9ccc7d); }
.spell.bonus i { background: linear-gradient(#fff1b8, #f0c84a); animation: up .8s ease-in forwards; }
.spell.again i { background: linear-gradient(#e2e6ee, #b7c0cf); }
.spell.bad i, .spell.short i { background: linear-gradient(#f6cfc6, #e0978a); animation: shake .4s; }
.spell.sent i { opacity: .8; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes up { 60% { transform: translateY(-14px); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
.dock .jar { font-variant-numeric: tabular-nums; }

/* the ladder in the lobby */
.chapters { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.chapters li { padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); display: grid; gap: 4px; }
.chapters li strong { font: 400 17px var(--gu-serif); color: #f6ecd8; }
.chapters li span { font-size: 11px; color: var(--mute); }
.chapters li.here { border-color: rgba(217,178,107,.55); }
.chapters li.later { opacity: .5; }
.chapters li.done strong::after { content: ' ✓'; color: var(--gold); }

/* the stationer's swatches */
.swatch-tiles { gap: 6px; background: #20160d; }
.swatch-tiles i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; font: 700 18px var(--gu-serif); font-style: normal;
  background: var(--tile); color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 -2px 0 rgba(0,0,0,.18); }
.swatch-tiles.metal i { background: linear-gradient(135deg, color-mix(in srgb, var(--tile) 60%, #fff), var(--tile) 55%, color-mix(in srgb, var(--tile) 70%, #000)); }
.swatch-wheel { background: #20160d; }
.swatch-wheel b { width: 64px; height: 64px; border-radius: 50%; background: var(--tray); box-shadow: inset 0 0 0 4px var(--rim), 0 4px 8px rgba(0,0,0,.5); position: relative; display: block; }
.swatch-wheel.metal b { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tray) 60%, #fff), var(--tray) 60%); }
.swatch-wheel i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #efe3c4; color: #1b140c; font: 700 11px/18px var(--gu-serif); font-style: normal; text-align: center; }
.swatch-wheel i:nth-child(1) { left: 23px; top: 6px; } .swatch-wheel i:nth-child(2) { right: 6px; top: 23px; }
.swatch-wheel i:nth-child(3) { left: 23px; bottom: 6px; } .swatch-wheel i:nth-child(4) { left: 6px; top: 23px; }
.swatch-scene { background: linear-gradient(var(--wall) 0 35%, #5a3a20 35% 42%, var(--desk) 42%); }
.swatch-scene i { width: 40px; height: 26px; border-radius: 3px; background: repeating-linear-gradient(90deg, #efe3c4 0 8px, #1b140c33 8px 9px); box-shadow: 0 3px 6px rgba(0,0,0,.4); margin-top: 18px; }