* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px 12px; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #fff; background: #87ceeb linear-gradient(180deg, #4aa8f0 0%, #9bd6ff 52%, #8fd16a 52.5%, #5ea84a 100%) fixed; }
h1.title { margin: 0; font-size: clamp(36px, 9vw, 72px); font-weight: 900; letter-spacing: 5px; text-transform: uppercase; text-align: center; line-height: 1; text-shadow: 0 5px 0 #c8374a, 0 8px 0 rgba(0, 0, 0, 0.25), 0 0 24px rgba(255, 255, 255, 0.4); }
h1.title .heart { color: #ff5a6e; display: inline-block; transform: translateY(-4px); }
.sub { margin: -6px 0 0; font-size: 15px; font-weight: 800; letter-spacing: 2px; text-align: center; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); }
.card { width: min(460px, 94vw); padding: 18px 22px 20px; background: rgba(20, 28, 48, 0.82); border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.card h2 { margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; }
.card p { margin: 6px 0; line-height: 1.45; font-size: 14px; font-weight: 700; }
.card p.hint { font-size: 12.5px; opacity: 0.8; }
.card hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); margin: 16px 0; }
form { margin: 0; }
label { display: block; margin: 10px 0 4px; font-size: 12.5px; font-weight: 800; opacity: 0.92; }
input[type=text], input[type=password] { width: 100%; padding: 9px 11px; font: 800 15px "Trebuchet MS", system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, 0.4); border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 8px; }
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: #fff; }
button, .button { display: inline-block; margin-top: 14px; padding: 11px 16px; font: 900 15px "Trebuchet MS", system-ui, sans-serif; letter-spacing: 1px; color: #fff; text-decoration: none; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.14); border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 12px; }
button:hover, .button:hover { background: rgba(255, 255, 255, 0.3); border-color: #fff; }
button.primary, .button.primary { width: 100%; font-size: 17px; text-transform: uppercase; letter-spacing: 3px; background: linear-gradient(180deg, #4fbf5a, #2f9a3c); border-color: #d6ffd9; }
button.primary:hover, .button.primary:hover { background: linear-gradient(180deg, #62d86d, #38b047); }
.row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row form, .row a { margin: 0; }
.error { margin: 0 0 10px; padding: 8px 11px; font-size: 13.5px; font-weight: 800; color: #ffd0ca; background: rgba(200, 55, 74, 0.3); border: 2px solid rgba(255, 140, 130, 0.7); border-radius: 10px; }
.notice { margin: 0 0 10px; padding: 8px 11px; font-size: 13.5px; font-weight: 800; background: rgba(255, 224, 102, 0.18); border: 2px solid rgba(255, 224, 102, 0.5); border-radius: 10px; }
.chip { display: inline-block; padding: 0 8px; border-radius: 9px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #3a2f00; background: #ffe066; text-shadow: none; }
.chip.player { color: #fff; background: rgba(255, 255, 255, 0.25); }
a { color: #ffe066; font-weight: 800; }
.foot { font-size: 12px; font-weight: 700; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.card.wide { width: min(1040px, 96vw); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.tile { padding: 7px 8px; text-align: center; background: rgba(255, 255, 255, 0.09); border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 10px; }
.tile .v { display: block; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tile .k { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }
.scroll { overflow-x: auto; }
table.matches { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.matches th { padding: 4px 8px; text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; opacity: 0.8; border-bottom: 2px solid rgba(255, 255, 255, 0.25); }
table.matches td { padding: 5px 8px; font-weight: 700; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
table.matches td.won { color: #9ff0a6; }
table.matches td.lost { color: #ffb0a8; }
table.matches small { font-weight: 700; opacity: 0.85; }
.names { margin: 1px 0; font-size: 12px; font-weight: 700; opacity: 0.92; }