/* Duel Arena shell. The vocabulary is the 2004 game interface: bevelled stone
   panels, yellow text with a hard black shadow, stack-coloured amounts. */
:root {
    --stone: #2b2620;
    --stone-hi: #5a5040;
    --stone-lo: #14110d;
    --stone-face: #3a332a;
    --sand: #c9a66b;
    --ink: #e8dcc0;
    --dim: #a39880;
    --yellow: #ffff00;
    --white: #ffffff;
    --green: #00ff80;
    --red: #ff5a3c;
    --orange: #ff9040;
    --pix: 'Jersey 15', 'Courier New', monospace;
    --body: Verdana, Geneva, Tahoma, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: #15110c; }

body {
    margin: 0;
    color: var(--ink);
    font: 13px/1.55 var(--body);
    background-color: #1b1610;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    min-height: 100vh;
}

a { color: var(--sand); }
a:hover { color: var(--yellow); }
b { color: var(--white); font-weight: bold; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---- top bar ---- */
.top {
    display: flex; align-items: center; gap: 18px;
    padding: 8px 16px;
    background: var(--stone);
    border-bottom: 2px solid var(--stone-lo);
    box-shadow: inset 0 -2px 0 var(--stone-hi), inset 0 2px 0 var(--stone-hi);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; image-rendering: pixelated; display: block; }
.brand-name {
    font: 34px/1 var(--pix); color: var(--yellow); letter-spacing: .5px;
    text-shadow: 2px 2px 0 #000;
}
.top-links { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.top-links a { text-decoration: none; }
.top-links a:hover { text-decoration: underline; }

.chip {
    font: 12px/1 var(--body); color: var(--ink);
    background: var(--stone-lo); border: 1px solid var(--stone-hi);
    padding: 5px 8px; cursor: pointer;
}
.chip:hover { color: var(--yellow); }

/* ---- buttons: the red-brown stone button of the login screen ---- */
.btn {
    font: 20px/1 var(--pix); color: var(--white); text-shadow: 1px 1px 0 #000;
    padding: 7px 14px 8px; cursor: pointer; white-space: nowrap;
    background: #6b2a1c;
    border: 2px solid; border-color: #a5523c #2c0f08 #2c0f08 #a5523c;
}
.btn:hover { background: #7e3322; color: var(--yellow); }
.btn:active { border-color: #2c0f08 #a5523c #a5523c #2c0f08; padding: 8px 13px 7px 15px; }
.btn[disabled] { opacity: .55; cursor: default; }

.link { background: none; border: 0; padding: 0; font: inherit; color: var(--sand); cursor: pointer; text-decoration: underline; }
.link:hover { color: var(--yellow); }

.banner { background: #4a3a10; color: var(--yellow); text-align: center; padding: 5px 12px; border-bottom: 2px solid var(--stone-lo); }

/* ---- panels ---- */
.panel {
    background: var(--stone-face);
    border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    box-shadow: 0 0 0 2px #0c0a07;
    margin: 0 0 18px;
}
.panel-h {
    margin: 0; padding: 4px 10px 5px;
    font: 24px/1 var(--pix); font-weight: normal; color: var(--orange); text-shadow: 1px 1px 0 #000;
    background: var(--stone); border-bottom: 2px solid var(--stone-lo);
    box-shadow: inset 0 -1px 0 var(--stone-hi);
}
.panel-b { padding: 10px 12px 12px; }
.panel-b p { margin: 0 0 9px; }
.panel-b p:last-child { margin-bottom: 0; }

/* ---- the floor: purse | game | feed ---- */
.floor {
    display: grid;
    grid-template-columns: minmax(230px, 270px) auto minmax(230px, 290px);
    gap: 20px; justify-content: center; align-items: start;
    padding: 22px 16px 4px;
}

.frame {
    position: relative; width: 773px; max-width: 100%;
    border: 4px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    box-shadow: 0 0 0 2px #0c0a07, 0 14px 40px rgba(0, 0, 0, .55);
    background: #000;
}
.frame canvas {
    display: block; width: 100%; height: auto;
    image-rendering: pixelated; outline: none;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.gate {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .72); padding: 16px;
}
.gate[hidden] { display: none; }
.name-panel { width: min(100%, 400px); margin: 0; }

.under { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px 0; color: var(--dim); font-size: 12px; max-width: 773px; }

/* ---- purse ---- */
.who { display: flex; flex-direction: column; margin-bottom: 8px; }
#who-name { font: 26px/1 var(--pix); color: var(--white); text-shadow: 1px 1px 0 #000; }
.addr { color: var(--dim); font-size: 11px; }

.ledger { margin: 0 0 12px; }
.ledger > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--stone); }
.ledger dt { color: var(--dim); }
.ledger dd { margin: 0; text-align: right; }
.amt { font: 24px/1 var(--pix); text-shadow: 1px 1px 0 #000; color: var(--yellow); }
.amt.s-white { color: var(--white); }
.amt.s-green { color: var(--green); }

.worth { display: block; color: var(--sand); font-size: 11px; line-height: 1.3; }
.worth:empty { display: none; }
.worth-inline { color: var(--sand); }
.rate { margin: 0 0 8px; padding: 5px 8px; font-size: 11px; color: var(--sand); background: var(--stone-lo); border: 1px solid var(--stone); }
.chat .v { display: block; color: #4a3f27; font-size: 11px; margin: -1px 0 2px; }
.money { margin: 0 0 12px; }
.money label { display: block; margin-bottom: 4px; color: var(--ink); }
.row { display: flex; gap: 6px; }
.row input { flex: 1; min-width: 0; }
input {
    font: 13px var(--body); color: var(--yellow);
    background: #0e0c09; border: 2px solid; border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo);
    padding: 6px 8px;
}
input::placeholder { color: #6e6553; }
.hint { margin: 4px 0 0; color: var(--dim); font-size: 11px; }

.status { min-height: 1.5em; margin: 0 0 8px; color: var(--yellow); }
.status.bad { color: var(--red); }
.status.good { color: var(--green); }

.moves { list-style: none; margin: 0 0 10px; padding: 0; font-size: 11px; color: var(--dim); }
.moves li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px solid var(--stone); }
.moves a { color: var(--sand); }

/* ---- play to earn ---- */
.chest { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--stone-lo); color: var(--dim); }
.chest > span:last-child { text-align: right; }
.event { padding: 7px 8px; margin: 0 0 8px; background: var(--stone); border: 1px solid var(--stone-lo); }
.event p { margin: 3px 0 0; font-size: 12px; color: var(--ink); }
.event-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.event-top b { font: 20px/1 var(--pix); font-weight: normal; color: var(--yellow); text-shadow: 1px 1px 0 #000; }
.clock { font: 20px/1 var(--pix); color: var(--white); text-shadow: 1px 1px 0 #000; }
.event.live { border-color: var(--red); }
.event.live .clock { color: var(--red); }
.event.soon .clock { color: var(--green); }

/* ---- feed: reads like the chatbox ---- */
.tally { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--stone-lo); padding-bottom: 8px; }
.tally div { text-align: center; flex: 1; }
.tally .amt { display: block; }
.tally small { color: var(--dim); font-size: 11px; }

.chat {
    list-style: none; margin: 0; padding: 8px 10px; max-height: 250px; overflow-y: auto;
    background: #c8b48a; color: #000; font-size: 12px; line-height: 1.45;
    border-top: 2px solid var(--stone-hi);
    scrollbar-color: var(--stone-hi) var(--stone-lo);
}
.chat li { padding: 1px 0; }
.chat .w { color: #00007f; font-weight: bold; }
.chat .p { color: #7f0000; font-weight: bold; }
.chat .quiet { color: #4a412f; }
.chat li.fresh { animation: arrive .9s steps(3) 1; }
@keyframes arrive { from { background: #ffff00; } to { background: transparent; } }

.board { width: 100%; border-collapse: collapse; font-size: 12px; }
.board th { text-align: left; font-weight: normal; color: var(--dim); padding: 6px 8px 4px; border-bottom: 1px solid var(--stone); }
.board td { padding: 4px 8px; border-bottom: 1px solid var(--stone); }
.board td:nth-child(n+3), .board th:nth-child(n+3) { text-align: right; }
.board tr:first-child td:nth-child(2) { color: var(--yellow); }
.board .up { color: var(--green); }
.board .down { color: var(--red); }
.quiet { color: var(--dim); }

/* ---- lower ---- */
.lower {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
    max-width: 1100px; margin: 18px auto 0; padding: 0 16px;
}
.steps { margin: 0; padding-left: 34px; }
.steps li { margin: 0 0 8px; padding-left: 2px; max-width: 62ch; }
.steps li::marker { font: 20px var(--pix); color: var(--yellow); }
.rules p { max-width: 66ch; }

.foot { text-align: center; color: #7d735f; font-size: 11px; padding: 8px 16px 28px; }

/* ---- wallet picker ---- */
.picker { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.picker .panel { width: min(100%, 360px); margin: 0; }
.picker-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pick {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    font: 13px var(--body); color: var(--ink); padding: 8px 10px;
    background: var(--stone); border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
}
.pick:hover { color: var(--yellow); }
.pick img { width: 24px; height: 24px; }
.pick .warn { margin-left: auto; color: var(--red); font-size: 11px; }

/* ---- responsive ---- */
@media (max-width: 1400px) {
    .floor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 813px; margin: 0 auto; }
    .stage { grid-column: 1 / -1; grid-row: 1; }
    .side { display: contents; }
    .side .panel:first-child { grid-column: 2; grid-row: 2; }
    .side .panel:last-child { grid-column: 1 / -1; }
    .purse { grid-column: 1; grid-row: 2; }
}
@media (max-width: 700px) {
    .top { flex-wrap: wrap; gap: 10px; }
    .top-links { order: 3; width: 100%; margin-left: 0; gap: 12px; }
    #wallet-btn { margin-left: auto; }
    .floor { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 4px; }
    .purse, .side .panel:first-child, .side .panel:last-child { grid-column: 1; grid-row: auto; }
    .lower { grid-template-columns: minmax(0, 1fr); }
    .brand-name { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .chat li.fresh { animation: none; } }