/* Not Ticket to Ride on the phone. Dark first, light after. */
body.g-notticket { font-family: "Spectral", Georgia, serif; height: auto; min-height: 100%; }
.ntp { display: flex; flex-direction: column; gap: 10px; padding-bottom: 236px; }
.ntp-bar { display: contents; }
.ntp-act:empty, .ntp-log:empty { display: none; }
.ntp-mapcard, .ntp-market, .ntp-tix, .ntp-opp { background: rgba(9,15,13,.62); border: 1px solid rgba(201,173,115,.45); }

/* whose turn */
.ntp-turnbar { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 12px 14px; font-size: 16px; font-family: var(--font); }
.ntp-turnbar.me { flex-direction: column; align-items: flex-start; gap: 3px; background: linear-gradient(120deg, #ffd23f, #ffb000); color: #1b1b1b; box-shadow: 0 10px 30px rgba(255,190,0,.45); animation: ntp-pop .35s cubic-bezier(.2,1.4,.4,1) both, ntp-throb 1.6s ease-in-out .4s infinite; }
.ntp-turnbar.me b { font-family: "IM Fell English SC", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .02em; }
.ntp-turnbar.me span { font-size: 15px; font-weight: 700; }
.ntp-turnbar.idle { background: rgba(0,0,0,.3); color: var(--label-2); }
.ntp-turnbar.idle b { color: var(--text); }
@keyframes ntp-pop { from { transform: scale(.85); opacity: 0; } }
@keyframes ntp-throb { 50% { box-shadow: 0 10px 40px rgba(255,190,0,.75); transform: scale(1.012); } }
.ntp-last { margin-top: -4px; text-align: center; font: 800 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #1b1b1b; background: #ff7a55; border-radius: 999px; padding: 7px 0; animation: ntp-blink 1.2s ease-in-out infinite; }
@keyframes ntp-blink { 50% { opacity: .7; } }
body.ntp-myturn::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 15; box-shadow: inset 0 0 0 5px #ffc400, inset 0 0 50px rgba(255,196,0,.45); animation: ntp-frame 1.6s ease-in-out infinite; }
@keyframes ntp-frame { 50% { box-shadow: inset 0 0 0 7px #ffc400, inset 0 0 80px rgba(255,196,0,.6); } }
.ntp.waiting .ntp-fan { opacity: .62; filter: saturate(.75); transition: opacity .3s; }
.ntp.waiting .ntp-fan .ntc.peeking { opacity: 1; }

/* everyone at the table */
.ntp-opps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; font-family: var(--font); }
.ntp-opp { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 1px; align-items: center; border-radius: 14px; padding: 6px 9px 6px 6px; font-size: 13px; font-weight: 700; border-width: 2px; border-color: transparent; }
.ntp-opp .avatar { grid-row: 1 / 3; }
.ntp-opp.turn { border-color: #ffb800; box-shadow: 0 0 12px rgba(255,184,0,.45); }
.ntp-opp .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntp-opp .pt { background: rgba(255,210,63,.18); color: #ffd23f; border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.ntp-opp .st { grid-column: 2 / 4; display: flex; align-items: center; gap: 3px; color: var(--label-2); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ntp-opp .st i { display: inline-block; margin-left: 5px; }
.ntp-opp .st i:first-child { margin-left: 0; }
.ntp-opp .st i.tr { width: 14px; height: 7px; border-radius: 2px; border: 1px solid #141414; }
.ntp-opp .st i.cd { width: 8px; height: 11px; border-radius: 2px; background: linear-gradient(160deg, #c9ad73, #8a6d3b); }
.ntp-opp .st i.tk { width: 11px; height: 8px; border-radius: 2px; background: #f1e2bd; box-shadow: inset 0 0 0 1px #7a3b22; }

/* the face-up row and the deck */
.ntp-market { border-radius: 16px; padding: 8px 8px 10px; }
.ntp-mlabel { font: 600 12px/1.2 var(--font); color: var(--label-2); text-align: center; margin-bottom: 6px; }
.ntp-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; justify-items: center; --cw: min(13vw, 54px); }
.ntp-slot { background: none; border: none; padding: 0; position: relative; border-radius: 6px; cursor: pointer; }
.ntp-slot:disabled { cursor: default; }
.ntp-slot.empty { width: var(--cw); aspect-ratio: 44 / 68; border: 2px dashed rgba(230,200,140,.3); }
.ntp-slot.can .ntc { box-shadow: 0 0 0 2.5px #ffd23f, 0 0 14px rgba(255,210,63,.6), 0 4px 10px rgba(0,0,0,.4); animation: ntp-bob 1.6s ease-in-out infinite; }
.ntp-slot.can:active .ntc { transform: scale(.94); }
@keyframes ntp-bob { 50% { transform: translateY(-2px); } }
.ntp-slot.deck .ntc-count { font-size: 12px; min-width: 24px; height: 20px; right: -8px; top: -6px; }

/* claim / tickets buttons */
.ntp-act { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; }
.ntp-act .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 62px; padding: 10px 12px; font-family: var(--font); }
.ntp-act .btn b { font-size: 17px; }
.ntp-act .btn small { font-size: 12px; font-weight: 600; opacity: .85; }
.ntp-claim { background: #2f8f4e !important; color: #fff; }
.ntp-tkt { background: #f1e2bd !important; color: #4a2410; box-shadow: inset 0 0 0 2px #7a3b22; }

/* the map */
.ntp-mapcard { border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ntp-maphead { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 13px/1.25 var(--font); color: var(--label-2); padding: 0 2px; }
.ntp-maphead b { color: #ffd23f; }
.ntp-zoom { flex: none; border: none; border-radius: 999px; padding: 7px 14px; font: 700 13px/1 var(--font); background: rgba(255,255,255,.12); color: var(--text); cursor: pointer; min-height: 32px; }
.ntp-mapwrap { border-radius: 10px; overflow: hidden; }
.ntp-mapwrap .ntm { width: 100%; height: auto; }
.ntp-mapwrap.zoom { overflow: auto; max-height: 52vh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ntp-mapwrap.zoom .ntm { width: 820px; max-width: none; }
.ntp-svg.fit .ntm-labels text { font-size: 34px; stroke-width: 9px; }
.ntp-svg.fit .ntm-labels text.hub { font-size: 46px; }
.ntp-svg.fit .ntm-regions, .ntp-svg.fit .ntm-water, .ntp-svg.fit .ntm-fares, .ntp-svg.fit .ntm-cart, .ntp-svg.fit .ntm-compass, .ntp-svg.fit .ntm-peak { display: none; }
.ntp-svg.fit .ntm-ring { stroke-width: 7; r: 19; }
.ntp-svg.fit .ntm-legal path { stroke-width: 28; }
.ntp-svg.zoom .ntm-labels text { font-size: 18px; }
.ntp-svg.zoom .ntm-labels text.hub { font-size: 24px; }

/* my tickets */
.ntp-tix { border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.ntp-label { display: flex; justify-content: space-between; gap: 8px; font: 800 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-2); padding: 0 2px 2px; }
.ntp-trow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1.5px solid transparent; border-radius: 12px; padding: 8px 10px; background: linear-gradient(180deg, #fbf3df, #efdfb8); color: #2a2218; cursor: pointer; min-height: 52px; font-family: "Spectral", Georgia, serif; }
.ntp-trow .v { width: 34px; height: 34px; border-radius: 50%; background: #7a3b22; color: #fbf3df; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.ntp-trow .c { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ntp-trow .c b { font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntp-trow .bar { display: block; height: 6px; border-radius: 999px; background: rgba(122,59,34,.18); overflow: hidden; }
.ntp-trow .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #d97706, #f59e0b); }
.ntp-trow > span:last-child { font: 700 12px/1.2 var(--font); color: #7a3b22; text-align: right; white-space: nowrap; }
.ntp-trow .ok { color: #1f7a3a; } .ntp-trow .no { color: #b42318; }
.ntp-trow.done .bar i { background: #2f9e44; }
.ntp-trow.blocked { opacity: .75; }
.ntp-trow.on { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255,210,63,.45); }
.ntp-empty { font-size: 14px; color: var(--label-2); font-style: italic; padding: 4px 2px; }
.ntp-log { font: 500 13px/1.45 var(--font); color: var(--label-2); padding: 0 4px; }
.ntp-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntp-log .l-claim { color: var(--text); font-weight: 700; } .ntp-log .l-last { color: #ff8a6a; font-weight: 700; }

/* the hand, fanned by colour */
.ntp-dock { padding-top: 26px; background: linear-gradient(to top, rgba(8,12,11,.95) 84%, rgba(8,12,11,0)) !important; }
.ntp-handline { display: flex; justify-content: space-between; font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(238,241,248,.6); padding: 0 6px 4px; }
.ntp-fan { height: calc(var(--cw) * 68 / 44 + 34px); }
.ndp-fan .ntc { position: absolute; top: 22px; transform-origin: 50% 100%; transition: transform .18s ease, filter .2s; cursor: pointer; }
.ndp-fan .ntc.peeking { translate: 0 -30px; z-index: 60 !important; filter: none; }
.ndp-fan .ntc.lit { box-shadow: 0 0 0 3px #ffd23f, 0 0 16px rgba(255,210,63,.55), 0 6px 14px rgba(0,0,0,.4); }
.ndp-fan .ntc.stack { box-shadow: 3px -3px 0 -1px var(--cd), 6px -6px 0 -2px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.4); }
.ndp-fan .ntc.stack.lit { box-shadow: 3px -3px 0 -1px var(--cd), 0 0 0 3px #ffd23f, 0 0 16px rgba(255,210,63,.55), 0 6px 14px rgba(0,0,0,.4); }
.ndp-fan .ntc .ntc-count { font-size: 15px; height: 24px; min-width: 32px; right: auto; left: -8px; top: -9px; }
.ndp-fan .ntc.ntp-in { animation: ntp-in .55s cubic-bezier(.2,1.1,.35,1) both; }
@keyframes ntp-in { from { translate: 0 -52vh; scale: .45; opacity: 0; } 60% { opacity: 1; } }
.ntp-peekcard { --cw: min(42vw, 168px); }
.ntp-big { --cw: min(44vw, 180px); }
.ntp-big.small { --cw: min(30vw, 120px); }

/* sheets */
.ntp-sub { font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label-2); margin-top: 4px; }
.btn.ntp-pay { display: flex; align-items: center; gap: 10px; text-align: left; font-family: var(--font); font-size: 15px !important; min-height: 52px !important; background: #2f8f4e; color: #fff; }
.ntp-dots { display: inline-flex; gap: 3px; flex: none; }
.ntp-dots i { width: 13px; height: 18px; border-radius: 3px; border: 1.5px solid rgba(0,0,0,.6); }
.ntp-dots i.loco { background: conic-gradient(#d23a2e 0 12%, #ec7a26 0 25%, #f1c22e 0 37%, #3b9a4c 0 50%, #2c6cc4 0 62%, #8b4cb0 0 75%, #2a2a2f 0 87%, #f3f0e6 0); }
.ntp-rhead { display: flex; align-items: center; gap: 12px; }
.ntp-rcars { display: inline-flex; gap: 3px; flex: none; }
.ntp-rcars i { width: 15px; height: 26px; border-radius: 3px; border: 1.5px solid rgba(0,0,0,.6); }
.ntp-rcars.sm i { width: 9px; height: 16px; border-radius: 2px; }
.ntp-rlist { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.ntp-ritem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border-radius: 12px; border: none; background: rgba(255,255,255,.07); color: var(--text); text-align: left; cursor: pointer; font-family: var(--font); }
.ntp-ritem .nm { font-weight: 700; font-size: 15px; min-width: 0; }
.ntp-ritem .pt { font-weight: 800; color: #ffd23f; }
.ntp-offers { display: flex; flex-direction: column; gap: 10px; }
.ntp-opick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; color: var(--text); }
.ntp-opick .ntt { --tw: min(84vw, 330px); transition: transform .15s; }
.ntp-opick.on .ntt { transform: scale(1.02); }
.ntp-need { font: 600 12px/1.2 var(--font); color: var(--label-2); }
.ntp-check { position: absolute; left: 14px; bottom: 34px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 18px/1 var(--font); background: rgba(0,0,0,.35); color: #fff; border: 2px solid #fff; }
.ntp-opick.on .ntp-check { background: #2f9e44; }

/* big moments and the private ticket toast */
.ntp-moment { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 55%, transparent), rgba(0,0,0,.6) 75%); animation: ntp-moment 3s ease both; }
@keyframes ntp-moment { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
.ntp-moment .big { font-family: "IM Fell English SC", Georgia, serif; font-size: 70px; line-height: .9; color: #ffd23f; text-shadow: 4px 4px 0 #8a1d15, 8px 8px 0 rgba(0,0,0,.3); transform: rotate(-5deg); text-align: center; animation: ntp-slam .5s cubic-bezier(.2,1.5,.4,1) both; padding: 0 12px; }
@keyframes ntp-slam { from { transform: rotate(-5deg) scale(3); opacity: 0; } }
.ntp-moment .who { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.72); color: #fff; font: 800 16px/1.25 var(--font); padding: 8px 16px 8px 8px; border-radius: 999px; max-width: 92vw; }
.ntp-moment .avatar { width: 40px; height: 40px; font-size: 18px; flex: none; }
.ntp-done { position: fixed; left: 50%; top: 18%; z-index: 85; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 22px; border-radius: 18px; background: linear-gradient(180deg, #fbf3df, #efdfb8); color: #2a2218; box-shadow: 0 0 0 3px #2f9e44, 0 20px 50px rgba(0,0,0,.45); pointer-events: none; animation: ntp-toast 2.8s cubic-bezier(.2,1.3,.4,1) both; white-space: nowrap; }
.ntp-done b { font-family: "IM Fell English SC", Georgia, serif; font-size: 26px; font-weight: 400; color: #1f7a3a; }
.ntp-done span { font: 700 14px/1.2 var(--font); }
@keyframes ntp-toast { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* the end */
.ntp-endart { width: 190px; --cw: 92px; display: flex; justify-content: center; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
.ntp-endart .ntc-art { width: 190px; height: auto; }
.ntp-endart.win { animation: ntp-chug 1.2s ease-in-out infinite; }
@keyframes ntp-chug { 50% { transform: translateX(6px) rotate(-1deg); } }
.ntp-end { padding-bottom: 40px; }
.ntp-break { display: flex; flex-direction: column; gap: 2px; background: rgba(9,15,13,.62); border: 1px solid rgba(201,173,115,.45); border-radius: 16px; padding: 10px 14px; font-family: var(--font); }
.ntp-break div { display: flex; justify-content: space-between; font-size: 16px; padding: 4px 0; }
.ntp-break b { font-variant-numeric: tabular-nums; }
.ntp-break .pos { color: #7ee0a1; } .ntp-break .neg { color: #ff8a6a; }
.ntp-break .tot { border-top: 1px solid rgba(201,173,115,.35); margin-top: 4px; padding-top: 8px; font-size: 20px; font-weight: 800; }
.ntp-break .tot b { color: #ffd23f; font-family: "IM Fell English SC", Georgia, serif; font-size: 28px; font-weight: 400; }
.ntp-endtix { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ntp-endtix .ntt { --tw: min(88vw, 340px); }

/* ---- light theme ---- */
[data-theme="light"] .ntp-mapcard, [data-theme="light"] .ntp-market, [data-theme="light"] .ntp-tix, [data-theme="light"] .ntp-opp, [data-theme="light"] .ntp-break { background: rgba(255,251,240,.86); border-color: rgba(168,136,90,.55); box-shadow: 0 4px 14px rgba(80,55,20,.08); }
[data-theme="light"] .ntp-turnbar.idle { background: rgba(255,251,240,.86); box-shadow: 0 4px 14px rgba(80,55,20,.08); }
[data-theme="light"] .ntp-opp .pt { background: rgba(183,121,31,.15); color: #8a5a00; }
[data-theme="light"] .ntp-slot.empty { border-color: rgba(120,90,40,.3); }
[data-theme="light"] .ntp-slot.can .ntc { box-shadow: 0 0 0 2.5px #e09b00, 0 0 12px rgba(224,155,0,.45), 0 4px 10px rgba(80,55,20,.25); }
[data-theme="light"] .ntp-maphead b { color: #9a5b00; }
[data-theme="light"] .ntp-zoom { background: rgba(120,90,40,.12); }
[data-theme="light"] .ntp-handline { color: var(--label-2); }
[data-theme="light"] body.g-notticket .ntp-dock { background: linear-gradient(to top, rgba(236,226,204,.98) 84%, rgba(236,226,204,0)) !important; }
[data-theme="light"] .ndp-fan .ntc.lit { box-shadow: 0 0 0 3px #e09b00, 0 0 14px rgba(224,155,0,.45), 0 6px 14px rgba(80,55,20,.25); }
[data-theme="light"] .ntp-ritem { background: rgba(120,90,40,.08); }
[data-theme="light"] .ntp-ritem .pt { color: #9a5b00; }
[data-theme="light"] .ntp-log .l-last { color: #c2410c; }
[data-theme="light"] .ntp-break .pos { color: #1f7a3a; } [data-theme="light"] .ntp-break .neg { color: #c2410c; }
[data-theme="light"] .ntp-break .tot b { color: #9a6410; }
[data-theme="light"] .ntp-break .tot { border-top-color: rgba(120,90,40,.25); }