/* Game Theory. All rules scoped under .gmt-* (the app inlines only this file). */

/* coins and chips */
.gmt-stack { display: inline-flex; flex-direction: column-reverse; align-items: center; min-width: 26px; height: 64px; justify-content: flex-start; }
.gmt-coin { display: block; width: 26px; height: 9px; margin-top: -2px; border-radius: 50%; background: radial-gradient(ellipse at 40% 35%, #fff2c4, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 1px 0 #8a5e10; }
.gmt-none { height: auto; font: 700 12px var(--sans); color: var(--faint); align-self: flex-end; }
.gmt-chip { display: inline-block; min-width: 54px; padding: 5px 8px; border-radius: 9px; font: 800 14px var(--sans); text-align: center; }
.gmt-chip.share { background: rgba(63,214,154,.16); color: var(--mint); border: 1px solid rgba(63,214,154,.5); }
.gmt-chip.grab { background: rgba(169,155,255,.16); color: var(--violet-bright); border: 1px solid rgba(169,155,255,.55); }

/* 0. the three rules */
.gmt-rules { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; }
.gmt-row { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.gmt-rules.drop .gmt-row { animation: gmtDrop .5s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes gmtDrop { from { opacity: 0; transform: translateY(-18px); } }
.gmt-pair { display: flex; align-items: flex-end; gap: 6px; }
.gmt-row p { margin: 0; font: 700 15px/1.25 var(--sans); color: var(--text); align-self: center; }
@media (max-height: 700px) { .gmt-stack { height: 46px; } .gmt-coin { height: 7px; width: 22px; } .gmt-row { padding: 6px 10px; } .gmt-rules { gap: 6px; } }

/* 1, 3. the table */
.gmt-table { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
.gmt-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gmt-side img { height: 110px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.gmt-side b { font: 800 15px var(--sans); color: var(--text); }
.gmt-n { font: 800 26px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.gmt-plus { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font: 800 24px var(--sans); color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.7); animation: gmtUp 1.2s ease-out forwards; pointer-events: none; }
.gmt-plus.zero { color: var(--faint); }
@keyframes gmtUp { from { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -34px); } }
.gmt-key { grid-column: 1 / -1; margin: 6px 0 0; font: 600 13px/1.45 var(--sans); color: var(--dim); text-align: center; }
.gmt-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gmt-card { width: 84px; height: 40px; margin: 4px 0 2px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); border: 1.5px dashed var(--line-strong); font: 800 16px var(--sans); color: var(--faint); transition: transform .25s; }
.gmt-card.up { border-style: solid; animation: gmtFlip .3s ease-out; }
.gmt-card.up.share { background: rgba(63,214,154,.16); color: var(--mint); border-color: rgba(63,214,154,.6); }
.gmt-card.up.grab { background: rgba(169,155,255,.16); color: var(--violet-bright); border-color: rgba(169,155,255,.6); }
@keyframes gmtFlip { from { transform: rotateY(90deg); } }
.gmt-vs { display: flex; flex-direction: column; align-items: center; font: 700 13px var(--sans); color: var(--dim); }
.gmt-vs b { font: 800 28px var(--sans); color: var(--text); }
.gmt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-height: 700px) { .gmt-side img { height: 78px; } .gmt-n { font-size: 22px; } .gmt-card { height: 34px; } }

/* 2. two plans over 10 rounds */
.gmt-long { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; }
.gmt-long img { height: 84px; }
.gmt-plan { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; align-items: center; box-sizing: border-box; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; }
.gmt-plan.picked { border-color: var(--violet-bright); box-shadow: 0 0 0 2px rgba(169,155,255,.35); }
.gmt-pl { grid-column: 1 / -1; font: 700 14px var(--sans); color: var(--dim); }
.gmt-cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.gmt-cells i { height: 26px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font: 800 13px var(--sans); font-style: normal; color: var(--text); }
.gmt-cells i.hi { background: rgba(252,192,80,.22); border-color: rgba(252,192,80,.6); }
.gmt-cells i.lo { background: rgba(110,105,96,.2); }
.gmt-plan > b { font: 800 22px var(--sans); color: var(--gold); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-height: 700px) { .gmt-long img { height: 60px; } .gmt-long { gap: 6px; } }

/* 5. the ring */
.gmt-ring { position: relative; width: min(78vw, 290px, 38vh); aspect-ratio: 1; margin: 0 auto; }
.gmt-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.gmt-lines line { stroke: rgba(169,155,255,.35); stroke-width: 1; }
.gmt-rb { position: absolute; width: 15%; transform: translate(-50%, -50%); animation: gmtPop .4s cubic-bezier(.3,1.5,.5,1) backwards; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.gmt-rb.gmt-h1 { filter: hue-rotate(70deg) drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.gmt-rb.gmt-h2 { filter: hue-rotate(160deg) drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.gmt-rb.gmt-h3 { filter: hue-rotate(250deg) drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
@keyframes gmtPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }

/* 6. matches */
.gmt-matches { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin: 0 auto; }
.gmt-match { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 52px 1fr 52px; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 6px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); cursor: pointer; min-height: 64px; -webkit-tap-highlight-color: transparent; }
.gmt-match img { width: 52px; height: 52px; object-fit: contain; grid-row: 1 / 3; grid-column: 1; }
.gmt-match img + .gmt-ms + img { grid-column: 3; }
.gmt-match .gmt-ms { grid-column: 2; grid-row: 1; }
.gmt-match em { grid-column: 2; grid-row: 2; }
.gmt-ms { display: flex; justify-content: center; align-items: baseline; gap: 8px; font: 800 24px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.gmt-ms i { font: 600 13px var(--sans); color: var(--dim); font-style: normal; }
.gmt-match em { font: 600 13px var(--sans); color: var(--dim); font-style: normal; text-align: center; }
.gmt-match.lost .gmt-ma { color: var(--dim); }
.gmt-match.tie .gmt-ms { color: var(--gold); }
@media (max-height: 700px) { .gmt-match { min-height: 54px; padding: 4px 10px; } .gmt-match img { width: 44px; height: 44px; } .gmt-ms { font-size: 21px; } .gmt-matches { gap: 6px; } }

/* 7. leaderboard */
.gmt-board { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 340px; margin: 0 auto; }
.gmt-bh { margin: 0 0 2px; display: flex; justify-content: flex-end; font: 600 12px var(--sans); color: var(--dim); }
.gmt-br { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(63,214,154,.10); border: 1px solid rgba(63,214,154,.3); font: 700 15px var(--sans); color: var(--text); animation: gmtDrop .4s ease-out backwards; }
.gmt-br i { font-style: normal; color: var(--dim); }
.gmt-br b { font-variant-numeric: tabular-nums; }
.gmt-br.me { background: rgba(252,192,80,.16); border-color: var(--gold); }
.gmt-br.me b { color: var(--gold); }
.gmt-br.sly { background: rgba(110,105,96,.16); border-color: var(--line); color: var(--dim); }
.gmt-gap { text-align: center; color: var(--faint); font: 700 14px var(--sans); line-height: 1; }
@media (max-height: 700px) { .gmt-br { padding: 4px 10px; font-size: 14px; } .gmt-board { gap: 3px; } }