body { margin: 0; font-family: sans-serif; background: #14301c; color: #fff; text-align: center; }
#menu { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 40px; margin: 8px 0; }
h2 { margin: 18px 0 8px; }
.grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
button { font: inherit; padding: 10px 14px; border-radius: 10px; border: 3px solid transparent; background: #2d5a3a; color: #fff; cursor: pointer; }
button.on { border-color: #ffe14d; background: #3f7a50; }
button:disabled { opacity: .4; cursor: not-allowed; }
.flag { display: inline-block; width: 22px; height: 14px; border: 1px solid #fff; margin-right: 8px; vertical-align: middle; }
.card { display: flex; flex-direction: column; gap: 2px; width: 150px; }
.card span { font-size: 13px; color: #ffe9a0; }
#play { margin-top: 20px; font-size: 22px; background: #e8a900; color: #000; }
canvas { max-width: 100%; display: block; margin: 10px auto 0; border-radius: 8px; }
.help { font-size: 14px; opacity: .8; }
#result { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#result[hidden] { display: none; }
#cup { max-width: 900px; margin: 0 auto; padding: 16px; }
#cup[hidden], #menu[hidden], #game[hidden] { display: none; }
.flagsvg { border: 1px solid rgba(255,255,255,.7); vertical-align: middle; border-radius: 2px; }
.flagbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100px; padding: 8px; }
.card canvas { background: rgba(255,255,255,.1); border-radius: 8px; }
.you { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; margin-bottom: 10px; }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
table { background: rgba(0,0,0,.3); border-radius: 8px; padding: 6px; border-collapse: collapse; width: 100%; }
caption { font-weight: bold; padding: 4px; }
td, th { padding: 3px 6px; text-align: center; } td:first-child { text-align: left; }
tr.up td { background: rgba(255,225,77,.12); }
.tm { display: inline-flex; align-items: center; gap: 6px; } .tm.me { color: #ffe14d; font-weight: bold; }
.pairs { display: grid; gap: 8px; } .pair { background: rgba(0,0,0,.3); padding: 8px; border-radius: 8px; }
.pair span { opacity: .6; margin: 0 8px; }
.last { margin: 12px 0; background: rgba(0,0,0,.25); padding: 8px; border-radius: 8px; }
.note { font-size: 14px; opacity: .8; }
.gold { color: #ffd700; font-size: 34px; }
#cup button, #result button { margin-top: 12px; font-size: 20px; background: #e8a900; color: #000; }
.stage { position: relative; width: 1000px; max-width: 100%; margin: 10px auto 0; }
.stage canvas { margin: 0; }
.stage .view3d { width: 100%; height: auto; border-radius: 8px; }
.stage #pitch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }