/* root variables for easy theming */
:root {
    --card-w: 120px;
    --card-h: 180px;

    /* UI palette - edit these to change the UI colors */
    --ui-fill: #ffdaa3;        /* panel backgrounds */
    --ui-outline: #ffb999;     /* subtle outlines/borders */
    --ui-text: #501fab;        /* primary UI text */

    --primary: #8b5ea5;        /* accent color (buttons, highlights) */
    --button-text: #ff9d65;    /* button text color */

    --trash-fill: #fdadc8;     /* trash background */
    --trash-outline: #ff4466;  /* trash outline color */
    --trash-text: #ff4466;     /* trash text/icon color */

    --label-bg: rgba(255,255,255,0.85);
    --label-text: #333333;
}

body { font-family: system-ui, sans-serif; height:100vh; margin:0; display:flex; flex-direction:column; color:var(--ui-text); }
#controls { padding:8px; background:var(--ui-fill); border-bottom:1px solid var(--ui-outline); z-index:5; }
#workspace {flex:1; position:relative; background-image: url(assets/original/backgrounds/PPEBG002-orgcomp.png);
            background-size: cover; background-position: center; overflow:hidden;}
.card {
    position:absolute;
    width:var(--card-w); height:var(--card-h);
    background-image: url('assets/original/cards/PPECB001.png'); background-size: cover; background-position: center; border-radius:8px; box-shadow:0 6px 12px rgba(0,0,0,0.15);
    display:flex; align-items:center; justify-content:center; user-select:none;
    touch-action:none;
    transform-origin:center center;
    padding:8px;
}
.card .label {position:absolute; bottom:6px; left:6px; right:6px; font-size:12px; text-align:center; color:var(--label-text); background:var(--label-bg); padding:2px 4px; border-radius:4px}
.rotate-handle {
    position:absolute; top:-18px; right:10px; width:24px; height:24px; border-radius:50%;
    background: #eee; border:1px solid #ccc; display:flex; align-items:center; justify-content:center;
    cursor:grab; user-select:none;
}
#trash {
    position:fixed; right:12px; bottom:12px; width:96px; height: 96px; background: var(--trash-fill); color: var(--trash-text);
    border-radius:8px; border-color: var(--trash-outline); display:flex; align-items:center; justify-content:center; font-weight:600;
    box-shadow:0 4px 12px rgba(0,0,0,0.12); z-index:10; pointer-events:auto;
}

/* Basic button styles using the palette */
button {
    background: var(--primary);
    color: var(--button-text);
    border: 0;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}
button[disabled] { opacity: 0.5; cursor: default; }

/* visual state while dragging over trash */
.trash-over { outline:3px solid rgba(114,28,36,0.12); }
.active { transform: scale(0.96); opacity:0.9 }