:root{--cyan:#d4b15e;--pink:#f1dfa8;--glass:#ffffff0d;--glass-border:#ffffff21;--txt-dim:#aab7af}*{box-sizing:border-box}body{margin:0;background:#142721;color:#f2f0e6;font-family:system-ui,-apple-system,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}header{height:80px;max-width:1240px;margin:auto;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:14px;font-size:17px;letter-spacing:2px;font-weight:800;text-decoration:none;color:inherit}.brand>span:first-child{font-size:35px;color:#d9ba75}.brand-note{border-left:1px solid #ffffff25;padding-left:16px;font-size:9px;letter-spacing:1.7px;color:#90a397;font-weight:500}.header-right{display:flex;align-items:center;gap:8px;color:#90a397;font-size:9px;letter-spacing:1.5px}.live-dot{height:5px;width:5px;border-radius:50%;background:#d9ba75}main{max-width:1150px;margin:auto;display:grid;grid-template-columns:290px 1fr;gap:90px;padding:35px 32px;align-items:center}.eyebrow{font-size:9px;letter-spacing:2px;color:#bca66f;font-weight:700}h1{font-family:Georgia,serif;font-size:56px;line-height:1.04;letter-spacing:-2px;margin:20px 0}.intro{font-size:13px;line-height:1.9;color:#9eafa4}.rating{margin-top:28px;padding:20px 0;border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16}.rating>span{font-size:9px;letter-spacing:1.6px;color:#b2bdb3}.rating>div{display:flex;gap:10px;align-items:baseline;margin:6px 0}.rating b{font-size:46px;letter-spacing:-2px;font-weight:500;color:#e6ce94}.rating small{color:#839b8c;font-size:12px}.rating p{font-size:10px;color:#708f7c;margin:0}.rewards{display:flex;flex-direction:column;gap:14px;margin:20px 0;font-size:12px}.rewards>div{display:flex;align-items:center;justify-content:space-between}.rewards span{color:#95a99b}.rewards b{font-weight:500}.rewards .white-piece{font-size:19px;color:#fff}.tips{border-top:1px solid #ffffff16;padding-top:18px}.tips h2{font-size:12px;font-weight:700;margin:0}.tips p{font-size:11px;line-height:1.8;color:#a0b0a4}.tips .muted{font-size:10px;color:#6e8978}.play-area{width:100%;max-width:590px}.play-heading,.player-bar{display:flex;align-items:center;justify-content:space-between;padding:0 3px}.play-heading>div:first-child,.player-bar>div{display:flex;align-items:center;gap:11px}.play-heading b,.player-bar b{display:block;font-size:12px;font-weight:600}.play-heading small,.player-bar small{display:block;color:#849e8d;font-size:10px;margin-top:3px}.player-avatar{display:grid;place-items:center;border-radius:10px;width:37px;height:37px;font-size:27px}.player-avatar.black{color:#d9d6c9;background:#0d1b17}.player-avatar.white{color:#283e31;background:#e4dfc9}.board-actions{display:flex;gap:6px}.board-actions button{border:1px solid #ffffff17;background:transparent;border-radius:7px;padding:6px 10px;color:#a6b8aa}.board-shell{margin:16px 0;position:relative;background:#1b3027;border:1px solid #ffffff15;border-radius:13px;box-shadow:0 20px 50px #0004;overflow:hidden}.game-body{width:100%}.local-note{font-size:8px;letter-spacing:1.5px;color:#738c7b}.pause-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:7;background:#10241fed;backdrop-filter:blur(6px)}.pause-overlay[hidden]{display:none}.pause-overlay span{font-size:9px;letter-spacing:2px;color:#bca66f}.pause-overlay h2{font:32px Georgia,serif}.pause-overlay button{background:#ddc38a;color:#203125;border:0;border-radius:25px;padding:12px 24px;font-weight:700}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#244134;border:1px solid #cdb37370;border-radius:12px;padding:14px 20px;opacity:0;pointer-events:none;z-index:20;max-width:90vw;text-align:center;font-size:13px}#toast.show{opacity:1}button:focus-visible,[role=button]:focus-visible,a:focus-visible{outline:3px solid #e2bb62;outline-offset:-3px}
/* Override the source game's embedded sizing while preserving its behavior. */
body .chess-wrap{padding:18px 20px 14px;gap:14px;min-height:450px}body .chess-board{width:100%;max-width:540px;border-radius:5px;border:1px solid #211c1140;box-shadow:0 4px 18px #0003}body .chess-cell.l{background:#e8dfc6}body .chess-cell.d{background:#6e8b70}body .chess-cell .pc{font-family:'DejaVu Sans','Segoe UI Symbol',sans-serif;font-size:clamp(24px,4.8vw,48px);text-shadow:none}body .chess-cell.last{background-image:linear-gradient(#ddbe5d55,#ddbe5d55)}body .chess-cell .dot{background:#1c40266b;width:23%;height:23%}body .chess-cell.sel{outline:3px solid #f3ce63}body .chess-status{font-size:11px;gap:8px;width:100%;min-height:34px;color:#d0dfd1}body .chess-status>span{flex:1;min-width:130px}body .chess-reset{font-size:10px;padding:7px 10px}body .chess-diff{padding:25px;gap:18px;background:#10241fed}body .chess-diff h2{font-family:Georgia,serif;font-size:37px;margin:0}body .chess-diff:before{content:'WEISS ZIEHT. DU ENTSCHEIDEST.';font-size:8px;letter-spacing:2px;color:#8fa28e}body .chess-diff-btn{font-size:13px;min-width:90px;padding:15px 12px;border-color:#9cb39a55}body .chess-diff-btn:hover{background:#d8bf8250}body .chess-cell:after{position:absolute;pointer-events:none;font-family:system-ui;font-size:9px;line-height:1;font-weight:700;opacity:.75}body .chess-cell[data-col='0']:before{content:attr(data-rank);position:absolute;left:4px;top:4px;font-size:9px;font-weight:700;color:#1b3d26}body .chess-cell[data-row='7']:after{content:attr(data-file);bottom:3px;right:4px;color:#1b3d26}body .chess-cell.d:before,body .chess-cell.d:after{color:#f5f2df}body.wood .chess-cell.l{background:#e8d0a9}body.wood .chess-cell.d{background:#a5714b}@media(max-width:850px){header{height:52px;padding:0 16px}.brand{font-size:14px;gap:9px}.brand-note{font-size:8px}.header-right{display:none}main{display:block;padding:16px 12px}aside{display:none}.play-area{margin:auto;max-width:570px}.board-shell{margin:12px 0}body .chess-wrap{padding:12px 10px;min-height:360px}body .chess-cell .pc{font-size:clamp(24px,8vw,46px)}body .chess-diff h2{font-size:30px}body .chess-status{font-size:10px;gap:6px}body .chess-reset{padding:7px 9px;font-size:10px}}@media(max-width:360px){body .chess-diff-row{gap:5px}body .chess-diff-btn{min-width:78px;padding:12px 8px}}

/* Keep the eight columns equal even when a device uses wider chess glyphs. */
body .chess-board {
  grid-template: repeat(8, minmax(0, 1fr)) / repeat(8, minmax(0, 1fr));
}
.chess-cell, .board-actions button, .chess-reset, .chess-diff-btn, #resume {
  touch-action: manipulation;
}

@media (max-width: 850px), (pointer: coarse) {
  .board-actions button, body .chess-reset, body .chess-diff-btn, #resume {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 850px) {
  main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px max(8px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  aside {
    display: block;
    order: 1;
    width: 100%;
    max-width: 570px;
  }
  aside > .eyebrow, aside > h1, aside > .intro, .tips .muted { display: none; }
  .rating { margin-top: 0; padding: 10px 0; }
  .rating b { font-size: 30px; }
  .board-shell { margin: 8px 0; }
  body .chess-wrap { padding: 6px; gap: 6px; min-height: 0; }
  body .chess-board { container-type: inline-size; }
  body .chess-cell .pc { font-size: clamp(18px, 9cqi, 48px); }
  body .chess-status { font-size: 12px; }
  body .chess-status > span { min-width: 100%; text-align: center; }
  body .chess-reset { font-size: 12px; }
  body .chess-diff { padding: 12px; gap: 10px; }
  body .chess-diff-btn { min-width: 0; padding: 9px 7px; }
  body .chess-diff-btn small { font-size: 10px; }
  body .chess-cell[data-col='0']:before { left: 2px; top: 2px; font-size: 8px; }
  body .chess-cell[data-row='7']:after { right: 2px; bottom: 2px; font-size: 8px; }
}

/* Give each side a contrasting edge on light and dark squares. */
body .chess-cell .pc-white {
  color: #fff !important;
  -webkit-text-stroke: 1px #17231d;
}
body .chess-cell .pc-black {
  color: #000 !important;
  font-variant-emoji: text;
  text-shadow: none !important;
  -webkit-text-stroke: 0.5px #e8dfc6;
}

body .chess-diff:before { content: var(--chess-difficulty-copy, 'WEISS ZIEHT. DU ENTSCHEIDEST.'); }
body .chess-diff-btn { max-width: 100%; }