:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20362e;background:#f5f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{max-width:1120px;margin:auto;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #dce1d6}header span{font-size:13px;color:#657267}.brand{color:#20362e;text-decoration:none;font-weight:800;font-size:22px}main{max-width:1056px;margin:48px auto;padding:0 24px}h1{font-size:clamp(36px,6vw,64px);line-height:1.08;letter-spacing:-2px;margin:16px 0 24px}h2{font-size:21px;line-height:1.4;margin-top:0;overflow-wrap:anywhere;white-space:pre-wrap}p{line-height:1.65;color:#58665c}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:#3c7458}.intro{max-width:550px;font-size:17px;margin-bottom:32px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.panel{background:#fff;border:1px solid #dde3d8;border-radius:18px;padding:28px;margin-bottom:24px;box-shadow:0 4px 20px #20362e04}label{display:block;font-size:13px;font-weight:650;margin:18px 0 8px}input,textarea{width:100%;padding:12px;border:1px solid #c6cfc5;border-radius:8px;font:inherit;background:#fcfdfb;color:#20362e}textarea{resize:vertical}button{border:1px solid transparent;background:#245b42;color:white;border-radius:9px;padding:12px 18px;font:inherit;font-weight:650;cursor:pointer;margin-top:18px}button:hover{filter:brightness(.92)}button:disabled{opacity:.5;cursor:default}.secondary{background:#edf2e9;color:#245b42;border-color:#dae3d5}.danger{background:#fff;color:#a13e37;border-color:#e9d5d2}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #a4bf55;outline-offset:3px}.room-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.room-columns{grid-template-columns:1.65fr 1fr}.cards{display:flex;flex-wrap:wrap;gap:8px}.card{width:51px;height:72px;background:#f3f5ee;border:1px solid #d9e1d1;color:#245b42;font-size:22px;padding:0;margin-top:8px}.card.selected{background:#245b42;color:white;box-shadow:0 0 0 3px #a7c58e}ul{list-style:none;padding:0}li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #edf0e9;overflow-wrap:anywhere}li strong{font-size:13px;flex-shrink:0}#controls{display:flex;flex-direction:column}#connection{font-size:13px;color:#3c7458}#notice:not(:empty){padding:14px 18px;background:#fff1d6;border-radius:8px;margin-bottom:24px;color:#654a14}footer,.small{font-size:12px;color:#657267}footer{margin:32px 0;line-height:1.7}#invitation input{font-family:monospace}[hidden]{display:none!important}@media(max-width:700px){.columns{grid-template-columns:1fr}header{padding:20px 24px}header span{display:none}main{margin-top:28px}.panel{padding:22px}.room-heading{align-items:start}h1{letter-spacing:-1px}}

/* The same coloured faces are used in the hand and in revealed results. */
body { background: radial-gradient(ellipse at 5% 5%, #e9e2ff 0, transparent 45%), radial-gradient(ellipse at 95% 30%, #d8f3ec 0, transparent 45%), #f7f6fb; }
.panel { box-shadow: 0 8px 30px #30275c09; border-color: #e6e2ef; }
.room-columns { grid-template-columns: 1.2fr 1fr; }
.cards { gap: 12px; padding: 12px 0 6px; }
.card { --face: #e2dcff; --ink: #4c2b92; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 100px; margin: 6px 0; border: 2px solid #ffffffaa; border-radius: 12px; background: var(--face); color: var(--ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 25%, white), 0 7px 14px #28204412; font-weight: 800; transition: transform .16s, box-shadow .16s; }
.card[data-value="0"] { --face: #dce9fb; --ink: #25538e; }
.card[data-value="1"] { --face: #cfefe8; --ink: #155d50; }
.card[data-value="2"] { --face: #dff1bf; --ink: #416219; }
.card[data-value="3"] { --face: #fff0ad; --ink: #76500b; }
.card[data-value="5"] { --face: #ffdab5; --ink: #8c4616; }
.card[data-value="8"] { --face: #ffcdd8; --ink: #982f53; }
.card[data-value="13"] { --face: #e9ccfa; --ink: #733299; }
.card[data-value="21"] { --face: #d6d4ff; --ink: #44369c; }
.card[data-value="?"] { --face: #d5eaf0; --ink: #305d6a; }
.card-top, .card-bottom { position: absolute; font-size: 12px; line-height: 1; }
.card-top { top: 9px; left: 9px; }
.card-bottom { bottom: 9px; right: 9px; transform: rotate(180deg); }
.card-center { font-size: 32px; }
button.card:hover:not(:disabled) { transform: translateY(-5px) rotate(-2deg); filter: none; }
button.card:disabled { opacity: .6; }
.card.selected, .card.selected:disabled { background: var(--face); color: var(--ink); opacity: 1; transform: translateY(-7px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 10px 18px #28204425; }
.card.selected::after { content: '✓'; position: absolute; right: -9px; top: -10px; display: grid; place-items: center; width: 23px; height: 23px; font-size: 13px; border-radius: 50%; background: var(--ink); color: white; }
#participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 22px 12px; margin: 24px 0; }
#participants li { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 8px; padding: 0; border: 0; text-align: center; min-width: 0; }
#participants li > span { font-size: 13px; font-weight: 700; width: 100%; }
#participants small { font-size: 11px; color: #657267; }
.result-card { width: 66px; height: 94px; margin: 0 0 4px; }
.card-back { background: repeating-linear-gradient(45deg, #6552ad, #6552ad 6px, #7562bb 6px, #7562bb 12px); color: #fff; font-size: 34px; border: 4px solid #e4ddf9; }
.card-empty { background: #f6f4fa; color: #9a90af; border: 2px dashed #d7d0e3; box-shadow: none; font-size: 28px; }
.results { background: linear-gradient(120deg, #f0e9ff, #e5f5f1); border: 1px solid #e1daef; border-radius: 14px; padding: 20px; margin-top: 24px; }
.results .eyebrow { margin: 0 0 8px; color: #64518d; }
#average { font-size: 48px; line-height: 1.1; letter-spacing: -2px; color: #49337b; }
.average-unit { font-size: 14px; color: #64518d; }
#average-note { margin-bottom: 0; }
@media(max-width:700px) { .room-columns { grid-template-columns: 1fr; } .cards { gap: 10px; } .card { width: 60px; height: 88px; } }
@media(prefers-reduced-motion:reduce) { .card { transition: none; } }

.ready-notification:empty { display: none; }
.ready-notification { padding: 20px 24px; margin: 0 0 24px; border: 1px solid #a8d6c4; border-radius: 16px; background: linear-gradient(115deg, #def7e8, #e6f3ff); color: #205a45; font-weight: 650; line-height: 1.65; box-shadow: 0 6px 22px #245b4210; animation: ready-arrive .3s ease-out; }
#controls.facilitator-panel { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e7e1ef; gap: 20px; }
.admin-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin-heading .eyebrow { margin: 0 0 8px; color: #735799; font-size: 10px; }
.admin-heading h2 { margin: 0; }
.admin-icon { display: grid; place-items: center; width: 44px; height: 48px; border-radius: 12px; background: #eee7fc; color: #70509c; font-size: 26px; transform: rotate(8deg); }
.round-progress { padding: 16px; background: #f7f5fb; border: 1px solid #ede8f5; border-radius: 12px; }
.round-progress label { display: flex; justify-content: space-between; margin: 0 0 12px; color: #5c5070; }
.round-progress progress { display: block; width: 100%; height: 8px; border: none; border-radius: 8px; overflow: hidden; accent-color: #8060b3; background: #e8e1f1; }
progress::-webkit-progress-bar { background: #e8e1f1; }
progress::-webkit-progress-value { background: #8060b3; border-radius: 8px; }
progress::-moz-progress-bar { background: #8060b3; border-radius: 8px; }
#admin-status { margin: 12px 0 0; }
#controls .reveal-button { margin: 0; min-height: 50px; border-radius: 12px; background: #695093; box-shadow: 0 4px 10px #69509320; }
#controls .reveal-button.ready { background: #245b42; box-shadow: 0 0 0 3px #e0f3e6, 0 5px 12px #245b4220; }
.room-access { display: flex; align-items: center; gap: 16px; }
.room-access h3 { font-size: 13px; margin: 0; }
.room-access p { margin: 5px 0 0; }
.room-access button { flex-shrink: 0; margin: 0; font-size: 12px; padding: 10px 12px; }
.end-session { border-top: 1px solid #eee8ed; padding-top: 16px; }
.end-session summary { cursor: pointer; color: #8c5255; font-size: 12px; font-weight: 650; padding: 4px 0; }
.end-session button { margin: 0; font-size: 12px; }
.next-item-panel { border-top: 3px solid #bca6dc; }
.next-item-panel .eyebrow { color: #735799; }
.next-item-panel h2 { margin-bottom: 8px; }
@keyframes ready-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion:reduce) { .ready-notification { animation: none; } }
.participation-option { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px; border: 1px solid #e5ddef; border-radius: 12px; background: #faf8fe; cursor: pointer; }
.participation-option input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: #695093; }
.participation-option small { display: block; font-size: 12px; font-weight: 400; line-height: 1.6; color: #657267; margin-top: 5px; }
.history-entry { border-top: 1px solid #e7e1ef; padding: 18px 0; }
.history-entry summary { cursor: pointer; line-height: 1.6; color: #4d3a6d; }
.history-entry summary span { overflow-wrap: anywhere; white-space: pre-wrap; }
.history-entry summary strong { display: inline-block; margin-left: 14px; padding: 4px 12px; border-radius: 20px; background: #eee7fc; font-size: 13px; white-space: nowrap; }
.history-votes { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 20px; }
.history-votes figure { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 80px; margin: 0; }
.history-votes figcaption { font-size: 12px; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.copy-field { display: flex; align-items: stretch; gap: 8px; }
.copy-field input { flex: 1; min-width: 0; }
.copy-field button { flex-shrink: 0; margin: 0; }

.deck-settings label { margin-top: 0; }
.deck-settings select { width: 100%; padding: 12px; border: 1px solid #c6cfc5; border-radius: 8px; font: inherit; background: #fcfdfb; color: #20362e; }
.deck-settings select:focus-visible { outline: 3px solid #a4bf55; outline-offset: 3px; }
.deck-settings select:disabled { opacity: .65; }
.card-caption { display: block; font-size: 10px; font-weight: 650; line-height: 1; }
.card[data-value="100"] .card-center { font-size: 25px; }

#toggle-invitation { margin: 0 0 16px; }

#queue-list { padding-left: 24px; }
#queue-list li { padding: 12px 0; border-top: 1px solid #e7e1ef; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.queue-actions button { font-size: 12px; margin-top: 8px; }

.round-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.round-notice { min-height: 1.65em; margin: 0; color: #49337b; font-size: 14px; font-weight: 650; }
#estimation-panel.round-started { animation: item-highlight 1.2s ease-out; }
.card.card-entering { animation: card-entrance .28s ease-out backwards; }
.card.card-entering:nth-child(2) { animation-delay: 25ms; }
.card.card-entering:nth-child(3) { animation-delay: 50ms; }
.card.card-entering:nth-child(4) { animation-delay: 75ms; }
.card.card-entering:nth-child(5) { animation-delay: 100ms; }
.card.card-entering:nth-child(6) { animation-delay: 125ms; }
.card.card-entering:nth-child(7) { animation-delay: 150ms; }
.card.card-entering:nth-child(8) { animation-delay: 175ms; }
.card.card-entering:nth-child(9) { animation-delay: 200ms; }
.card.card-entering:nth-child(10) { animation-delay: 225ms; }
.card.card-entering:nth-child(11) { animation-delay: 250ms; }
.card.card-entering:nth-child(12) { animation-delay: 250ms; }
.card.card-entering:nth-child(13) { animation-delay: 250ms; }
.card.card-entering:nth-child(14) { animation-delay: 250ms; }
.card.card-entering:nth-child(15) { animation-delay: 250ms; }
.card.card-entering:nth-child(16) { animation-delay: 250ms; }
.card.card-entering:nth-child(17) { animation-delay: 250ms; }
.card.card-entering:nth-child(18) { animation-delay: 250ms; }
.card.card-entering:nth-child(19) { animation-delay: 250ms; }
.card.card-entering:nth-child(20) { animation-delay: 250ms; }
@keyframes item-highlight {
  from { background-color: #eee7fc; border-color: #bca6dc; }
  to { background-color: #fff; border-color: #e6e2ef; }
}
@keyframes card-entrance {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  #estimation-panel.round-started { animation: none; background-color: #eee7fc; border-color: #bca6dc; }
  .card.card-entering { animation: none; }
}

#cards.deck-preview { gap: 8px; padding-top: 0; }
.deck-preview .card { width: 40px; height: 58px; margin: 4px 0; border-radius: 7px; box-shadow: 0 2px 4px #28204412; }
.deck-preview .card-center { font-size: 20px; }
.deck-preview .card-top, .deck-preview .card-bottom { font-size: 8px; }
.deck-preview .card-top { top: 4px; left: 4px; }
.deck-preview .card-bottom { bottom: 4px; right: 4px; }
.deck-preview .card[data-value="100"] .card-center { font-size: 17px; }
.deck-preview .card-caption { font-size: 6px; }