/* ========================================================================
   MAHJONG SOLITAIRE

   Kacheln in Kabinett-Projektion: jede Kachel ist ein Koerper mit Deckflaeche,
   rechter und unterer Flanke (Tiefe 45 Grad nach rechts unten) plus
   Kontaktschatten. Licht kommt konstant von oben links, deshalb ist die rechte
   Flanke heller als die untere.

   ACHTUNG: Kachelmasse und Tiefe stehen doppelt - hier als Custom Properties
   und in MahjongSolitaire.razor.cs als Konstanten (TileW/TileH/TileD), weil
   die Kacheln serverseitig absolut positioniert werden. Beide Stellen muessen
   uebereinstimmen, sonst reissen Fugen auf oder Ebenen schweben.
   ======================================================================== */

.mj-game-container {
    /* --- Geometrie (siehe Hinweis oben) --- */
    --mj-tile-w: 52px;
    --mj-tile-h: 68px;
    --mj-tile-d: 8px;    /* Tiefe = zugleich Ebenen-Versatz */
    --mj-gap: 0px;       /* Kacheln beruehren sich */

    /* --- Kachelfarben --- */
    --mj-face-top: #fdfaf3;
    --mj-face-mid: #f5eddd;
    --mj-face-bot: #eae0ca;
    --mj-ink: rgba(80, 60, 32, 0.22);
    --mj-side-r: #d8d1c3;   /* ca. 12 % dunkler als die Deckflaeche */
    --mj-side-r-2: #cdc5b5;
    --mj-side-b: #bab4a8;   /* ca. 24 % dunkler */
    --mj-side-b-2: #aca596;

    /* --- Gesichter --- */
    --mj-red: #a12a2c;
    --mj-blue: #1e4a7a;
    --mj-green: #15624a;
    --mj-green-light: #1f7b5d;
    --mj-purple: #6a3a8a;
    --mj-pink: #b03060;

    /* CJK-Schrift: bewusst OHNE @import von einer Schriften-CDN, damit die
       Bibliothek keine externe Abhaengigkeit mitbringt und offline laeuft.
       'Noto Serif SC' wird genutzt, wenn es lokal installiert ist. */
    --mj-cjk-font: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC',
                   'Songti TC', 'SimSun', 'Microsoft YaHei', serif;

    --mj-bg-dark: #2a1a0e;
    --mj-bg-wood: #3d2b1a;
    --mj-gold: #c8a84e;
    --mj-gold-light: #e8c86e;

    background: radial-gradient(ellipse at 40% 40%, var(--mj-bg-wood) 0%, var(--mj-bg-dark) 100%);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Georgia', 'Palatino Linotype', serif;
}

/* --- Board --- */
.mj-board {
    position: relative;
    margin: 0 auto;
    /* Groesse und der Rand fuer die oberste Ebene kommen aus dem Code-Behind:
       Die Kachelkoordinaten enthalten den Innenabstand bereits, deshalb hier
       KEIN padding - das wuerde bei absolut positionierten Kindern doppelt
       zaehlen. */
}

/* ========================================================================
   KACHELKOERPER
   ======================================================================== */

.mj-tile {
    position: absolute;
    width: calc(var(--mj-tile-w) + var(--mj-tile-d));
    height: calc(var(--mj-tile-h) + var(--mj-tile-d));
    cursor: default;
}

/* 1. Kontaktschatten - liegt unter dem Koerper, kein Rundum-Glow */
.mj-tile-shadow {
    position: absolute;
    left: 4px;
    top: 5px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.42);
    filter: blur(9px);
}

/* 2. Untere Flanke - dunkelste Flaeche (Licht von oben links) */
.mj-tile-side-b {
    position: absolute;
    left: 0;
    top: var(--mj-tile-h);
    width: calc(var(--mj-tile-w) + var(--mj-tile-d));
    height: var(--mj-tile-d);
    background: linear-gradient(90deg, var(--mj-side-b-2), var(--mj-side-b));
    clip-path: polygon(0 0, var(--mj-tile-w) 0, 100% 100%, var(--mj-tile-d) 100%);
}

/* 3. Rechte Flanke - heller als die untere */
.mj-tile-side-r {
    position: absolute;
    left: var(--mj-tile-w);
    top: 0;
    width: var(--mj-tile-d);
    height: calc(var(--mj-tile-h) + var(--mj-tile-d));
    background: linear-gradient(180deg, var(--mj-side-r), var(--mj-side-r-2));
    clip-path: polygon(0 0, 100% var(--mj-tile-d), 100% 100%, 0 var(--mj-tile-h));
}

/* 4. Deckflaeche */
.mj-tile-face {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--mj-tile-w);
    height: var(--mj-tile-h);
    box-sizing: border-box;
    padding: 4px 6px;
    border-radius: 6px;
    background: linear-gradient(158deg, var(--mj-face-top) 0%, var(--mj-face-mid) 55%, var(--mj-face-bot) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 var(--mj-ink),
        0 0 0 1px var(--mj-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--mj-cjk-font);
}

/* ========================================================================
   ZUSTAENDE
   Keine Groessen- oder Positionsaenderung - sonst springt das Raster.
   ======================================================================== */

.mj-tile.mj-free {
    cursor: pointer;
}

.mj-tile.mj-free:hover .mj-tile-face {
    background: linear-gradient(158deg, #fffdf7 0%, #faf3e6 55%, #f2e9d6 100%);
}

.mj-tile.mj-selected .mj-tile-face {
    background: linear-gradient(158deg, #fff6dd, #f6e4b8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 var(--mj-ink),
        0 0 0 2px #d8a648;
}

/* Hinweis: nur Koerper pulsieren lassen, nicht den Kontaktschatten */
.mj-tile.mj-hint .mj-tile-face,
.mj-tile.mj-hint .mj-tile-side-r,
.mj-tile.mj-hint .mj-tile-side-b {
    animation: mjHintPulse 1.6s ease-in-out infinite;
}

/* Blockiert: nur der Inhalt wird blass, der Koerper bleibt voll deckend */
.mj-tile.mj-blocked .mj-tile-face > * {
    opacity: 0.45;
}

.mj-tile.mj-removing {
    animation: mjTileRemove 0.4s ease forwards;
    pointer-events: none;
}

/* ========================================================================
   KACHELGESICHTER - reines CSS, keine Bilddateien,
   keine Unicode-Mahjong-Zeichen (plattformabhaengig)
   ======================================================================== */

.mj-tile-face > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
}

/* --- Zahlen (Wan) --- */
.mj-num {
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
}

.mj-suit-mark {
    font-size: 14px;
    line-height: 1;
}

.mj-characters .mj-num,
.mj-characters .mj-suit-mark {
    color: var(--mj-red);
}

/* --- Winde --- */
.mj-wind-glyph {
    font-size: 28px;
    font-weight: 600;
    color: var(--mj-blue);
    line-height: 1;
}

.mj-wind .mj-suit-mark {
    font-size: 11px;
    color: var(--mj-blue);
    opacity: 0.85;
}

/* --- Drachen --- */
.mj-dragon-glyph {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.mj-dragon-red .mj-dragon-glyph { color: var(--mj-red); }
.mj-dragon-green .mj-dragon-glyph { color: var(--mj-green); }

/* Weisser Drache: leerer Rahmen statt Schriftzeichen */
.mj-dragon-frame {
    width: 26px;
    height: 34px;
    border: 2.5px solid var(--mj-blue);
    border-radius: 3px;
    opacity: 0.65;
}

/* --- Kreise (Pin) --- */
.mj-pips,
.mj-pip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5px;
}

.mj-pips { flex-direction: column; }
.mj-pip-row { flex-direction: row; }

.mj-pip {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 -1px 1.5px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.mj-pips-lg .mj-pip { width: 22px; height: 22px; }   /* Wert 1 */
.mj-pips-sm .mj-pip { width: 10px; height: 10px; }   /* Werte 7-9 */

.mj-pip-blue { background: var(--mj-blue); }
.mj-pip-red { background: var(--mj-red); }

/* --- Bambus (Sou) --- */
.mj-sticks,
.mj-stick-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5px;
}

.mj-sticks { flex-direction: column; }
.mj-stick-row { flex-direction: row; }

.mj-stick {
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mj-green), var(--mj-green-light));
    flex-shrink: 0;
}

.mj-sticks-h30 .mj-stick { height: 30px; }   /* Wert 1 */
.mj-sticks-h18 .mj-stick { height: 18px; }   /* ein- und zweizeilig */
.mj-sticks-h12 .mj-stick { height: 12px; }   /* dreizeilig */

/* --- Jahreszeiten und Blumen (im Design-Prompt nicht erwaehnt, im Spiel
       aber vorhanden - gleiche Typo-Skala wie die Zahlen) --- */
.mj-season .mj-num,
.mj-season .mj-suit-mark { color: var(--mj-purple); }

.mj-flower .mj-num,
.mj-flower .mj-suit-mark { color: var(--mj-pink); }

/* ========================================================================
   ANIMATIONEN
   ======================================================================== */

@keyframes mjTileRemove {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes mjHintPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.16); }
}

/* ========================================================================
   OVERLAYS UND LEISTE
   ======================================================================== */

.mj-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--mj-gold-light);
    font-size: 18px;
    border-radius: 10px;
    border: 1px solid var(--mj-gold);
    z-index: 100000;
    text-align: center;
    backdrop-filter: blur(4px);
    animation: solFadeIn 0.3s ease;
}

.mj-win-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20000;
    animation: solFadeIn 0.5s ease;
    backdrop-filter: blur(6px);
}

.mj-win-card {
    background: linear-gradient(135deg, var(--mj-bg-wood) 0%, #4a3020 100%);
    border: 3px solid var(--mj-gold);
    border-radius: 16px;
    padding: 40px 60px;
    text-align: center;
    color: #e8e0d0;
    box-shadow: 0 0 60px rgba(200, 168, 78, 0.3);
    animation: solScaleIn 0.5s ease 0.2s both;
}

.mj-win-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--mj-gold-light);
    margin-bottom: 16px;
    letter-spacing: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mj-win-stats {
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 1.8;
}

.mj-win-stats strong {
    color: var(--mj-gold-light);
}

@keyframes solFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes solScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.mj-remaining-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mj-remaining-track {
    width: 120px;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.mj-remaining-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mj-gold), var(--mj-gold-light));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Hinweis: Es gibt bewusst KEINE Media Queries, die die Kachelgroesse
   veraendern. Die Positionen kommen als feste Pixelwerte aus dem Code-Behind;
   eine reine CSS-Verkleinerung wuerde das Raster zerreissen. Fuer kleine
   Bildschirme skaliert der Auto-Zoom das gesamte Board. */

@media (max-width: 600px) {
    .mj-win-card { padding: 24px 32px; }
    .mj-win-title { font-size: 24px; }
}